前言:早上在看《JavaScript设计模式与开发实践》一书的时候,看到立即执行函数一词,仔细想了下对立即执行函数(IIFE)好像也不是很了解,虽然很基础,但是自己之前都略过去了。所以花点时间补充一下。
概念:声明一个匿名函数,然后马上调用这个函数。
理解:一个独立的词法作用域。不仅避免了外界访问此 IIFE 中的变量,而且又不会污染全局作用域。
一、函数的基本写法
// 1.函数声明
// getNum(1) // 不会报错,正常执行
function getNum(num) {
console.log(num);
}
// 2.函数表达式
// getNum2(2) // 报错,not defined
const getNum2 = function (num) {
console.log(num);
}
二、立即执行函数的写法
错误示范
function getNum3() {
// console.log(3); // SyntaxError: Unexpected token )
}();
但是这样写却是可以的
const getNum4 = function () {
// console.log(4); // 4
}();
原因是 JavaScript 引擎看到 function 关键字会认为这是函数声明语句,不应该以()结尾。
所以要解决这个问题就要让引擎知道,()前面部分不是函数定义语句,而是一个表达式,可以对此进行运算。
比如给前面表达式加上(),()具有优先级,先执行,或者使用运算符 + - !~ 等
这种情况下 JavaScript 引擎就会认为这是一个表达式,而不是函数声明,比如
!function(a){
console.log(a); // 1
}(1);
+function(a){
console.log(a); // 1
}(1);
一般写法
// IIFE第一种方法
(function (num) {
console.log(num); // 5
})(5);
// IIFE第二种写法
(function (num) {
console.log(6); // 6
}(6));
使用场景
比较出名的就是 jQuery 的封装写法,同理,立即执行函数大多是用在封装插件和库当中,避免被外界影响和污染全局。
暂时写这些,后续再碰到或者加深了理解再回来修改!