js易错题记录

1.下面的代码会在 console 输出神马？为什么？

var myObject = {
 foo: "bar",
 func: function() {
 var self = this;
 console.log("outer func: this.foo = " + this.foo);
 console.log("outer func: self.foo = " + self.foo);
 (function() {
 console.log("inner func: this.foo = " + this.foo);
 console.log("inner func: self.foo = " + self.foo);
 }());
 }
};
myObject.func();

第一个和第二个的输出不难判断，在 ES6 之前，JavaScript 只有函数作用域，所以 func 中的 IIFE 有自己的独立作用域，并且它能访问到外部作用域中的 self，所以第三个输出会报错，因为 this 在可访问到的作用域内是 undefined，第四个输出是 bar。

（bar    bar   undefined   bar）

2.将 JavaScript 代码包含在一个函数块中有神马意思呢？为什么要这么做？

换句话说，为什么要用立即执行函数表达式（Immediately-Invoked Function Expression）。

IIFE 有两个比较经典的使用场景，一是类似于在循环中定时输出数据项，二是类似于 JQuery/Node 的插件和模块开发。

?

1 2 3 4 5

for(var i = 0; i < 5; i++) {  setTimeout(function() {  console.log(i);  }, 1000); }

上面的输出并不是你以为的0，1，2，3，4，而输出的全部是5，这时 IIFE 就能有用了：

?

1 2 3 4 5 6 7

for(var i = 0; i < 5; i++) {  (function(i) {  setTimeout(function() {  console.log(i);  }, 1000);  })(i) }

而在 JQuery/Node 的插件和模块开发中，为避免变量污染，也是一个大大的 IIFE：

?

1 2 3

(function($) {  //代码  } )(jQuery);

出自：https://www.jb51.net/article/77140.htm