IIFes 立即执行

71 阅读2分钟

1 IIFes function experssion 的方式建立函数以后立即执行 就是后面加一个()表示立即执行

IIFEs(Immediately Invoked Functions Expressions)  其实可以就字面上直接来理解,Immediately 就是立即的意思,invoked 则是执行某个函式时,「执行」的意思,function expression 是一种用来建立 function 的方法,总括来说,就是用 function expression 的方式建立函数后并立即执行它

// function expression
var sayWelcome = function(name) {
  console.log('Welcome, ' + name);
}

console.log(sayWelcome);

结果是:

NGAb1ZG.png 这是尚未执行的代码

如果是IIFEs就是在代码最后加上一个执行的指令也就是括号()

// Immediately Invoked Functions Expressions (IIFEs)
var sayWelcomeIIFEs = function(name) {
  console.log('Welcome ' + name);
}();

也可以带入参数:

// Immediately Invoked Functions Expressions (IIFEs)
var sayWelcomeIIFEs = function(name) {
  console.log('Welcome ' + name);
}('PJCHEN');

注意:这个时候,执行 以后的函数以及变成回传(返回) 的一个字符串了,就没办法执行拉

// 不可行的做法
function(name) {
  return('Welcome, ' + name);
}

但是这么做是不可行的,因为 JavaScript 引擎在解析代码的时候,它会认为你现在要输入 function statement,因为你用 function 做为开头,可是你却没有给该 function 的名称,于是它无法正确理解这段代码便抛出错误

3KZE1l5.png 这个时候的话就是告诉,这不是一个function statement 达到这样的目的话,用()括起来的话,

(function(name) {
  return('Welcome, ' + name);
});

js会用expression来读取这段函数,但是这个function会被建立,但是不会存在在变量里面, 也不会被执行,只要在后面加上() 就好了,就变了可以立即执行的函数了

PPhbmZq.png

lg:通过这样的方法,这个IIFEs内定义的变量不会抛出这个函数之外的干扰其他的部分

2 为啥使用IIFEs

(function(name)

image.png

2.1 程序先建立global execution context 但是这里面是没有任何内容的,因为没有在global这层里面建立任何变量,接下来,js引擎执行到我们建立的这段IIFEs,她会在这个匿名函数存储在global execution context,但是加了() 就会立即执行,js为这个匿名函数建立一个新的execution context 接着的话 就执行这个function中的代码内容,这代码里面建立了一个变项,使用这个变量就在这段局域里面. lg:不会影响外面的内容

9.png 结果就是两者greeting不会互相影响 10.png