js易错题记录

  • Post author:
  • Post category:其他


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



版权声明:本文为daimomo000原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。