首页

JavaScript必须掌握的基础 --- 闭包

seo达人

闭包(Closure)的定义

闭包是一个让初级JavaScript使用者既熟悉又陌生的一个概念。因为闭包在我们书写JavaScript代码时，随处可见，但是我们又不知道哪里用了闭包。

关于闭包的定义，网上(书上)的解释总是千奇百怪，我们也只能“取其精华去其糟粕”去总结一下。

  1. 即使函数在当前作用域外调用，但是还能访问当前作用域中的变量和函数
  2. 有权访问另一个函数作用域中的变量(函数)的函数。
  3. 闭包是指那些能够访问自由变量的函数

ECMAScript中，闭包指的是：

  1. 从理论角度：所有的函数都是闭包。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量也就相当于是在访问自由变量，这个时候使用最外层的作用域。

  2. 从实践角度：一下才算是闭包：

    • 即使创建它的上下文已经销毁，它仍然存在。
    • 在代码中引用了自由变量。

闭包跟词法作用域，作用域链，执行上下文这几个JavaScript中重要的概念都有关系，因此要想真的理解闭包，至少要对那几个概念不陌生。

闭包的优点：

  1. 可以是用函数内部的变量(函数)，也可以说是可以访问函数作用域。
  2. 拥有私有变量，避免污染全局变量

闭包的缺点：

  1. 私有变量一直存在，占用内存。

我们来一步一步引出闭包。

自执行函数 ( IIFE )

自执行函数也叫立即调用函数(IIFE)，是一个在定义时就执行的函数。 

var a=1;
(function() { console.log(a)
})()

上述代码是一个最简单的自执行函数。

在ES6之前，是没有块级作用域的，只有全局作用域和函数作用域，因此自执行函数还能在ES6之前实现块级作用域。 

// ES6 块级作用域 var a = 1; if(true) { let a=111; console.log(a); // 111 } console.log(a); // 1

这里 if{} 中用let声明了一个 a。这个 a 就具有块级作用域，在这个 {} 中访问 a ，永远访问的都是 let 声明的a，跟全局作用域中的a没有关系。如果我们把 let 换成 var ，就会污染全局变量 a 。

如果用自执行函数来实现： 

var a = 1;
(function() { if(true) { var a=111; console.log(a); // 111 }
})() console.log(a); // 1

为什么要在这里要引入自执行函数的概念呢？因为通常我们会用自执行函数来创建闭包，实现一定的效果。

来看一个基本上面试提问题： 

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

在理想状态下我们期望输出的是 0 ，1 ，2 ，3 ，4。但是实际上输出的是5 ，5 ，5 ，5 ，5。为什么是这样呢？其实这里不仅仅涉及到作用域，作用域链还涉及到Event Loop、微任务、宏任务。但是在这里不讲这些。

下面我们先解释它为什么会输出 5个5，然后再用自执行函数来修改它，以达到我们预期的结果。

提示：for 循环中，每一次的都声明一个同名变量，下一个变量的值为上一次循环执行完同名变量的值。

首先用var声明变量 for 是不会产生块级作用域的，所以在 () 中声明的 i 为全局变量。相当于： 

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

setTimeout中的第一个参数为一个全局的匿名函数。相当于： 

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

由于setTimeout是在1秒之后执行的，这个时候for循环已经执行完毕，此时的全局变量 i 已经变成了 5 。1秒后5个setTimeout中的匿名函数会同时执行，也就是5个 f 函数执行。这个时候 f 函数使用的变量 i 根据作用域链的查找规则找到了全局作用域中的 i 。因此会输出 5 个5。

那我们怎样来修改它呢？

  • 思路1：让setTimeout匿名函数中访问的变量 i 不再访问全局作用域中的 i 。因此把它包裹在一个函数作用域中。这时 匿名函数访问变量 i 时，会先去包裹它的函数作用域中查找。 
for(var i=0;i<5;i++) {
    (function (){ setTimeout(function() { console.log(i);
        },1000)
    })();
}

上述例子会输出我们期望的值吗？答案是否。为什么呢？我们虽然把 setTimeout 包裹在一个匿名函数中了，但是当setTimeout中匿名函数执行时，首先去匿名函数中查找 i 的值，找不到还是会找到全局作用域中，最终 i 的值仍然是全局变量中的 i ，仍然为 5个5.

那我们把外层的匿名函数中声明一个变量 j 让setTimeout中的匿名函数访问这个 j 不就找不到全局变量中的变量了吗。 

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

这个时候才达到了我们预期的结果：0 1 2 3 4。

我们来优化一下： 

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

*思路2：用 let 声明变量，产生块级作用域。 

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

这时for循环5次，产生 5 个块级作用域，也会声明 5 个具有块级作用域的变量 i ，因此setTimeout中的匿名函数每次执行时，访问的 i 都是当前块级作用域中的变量 i 。

理论中的闭包

什么是理论中的闭包？就是看似像闭包，其实并不是闭包。它只是类似于闭包。 

 function foo() { var a=2; function bar() { console.log(a); // 2 }
    bar();
}
foo();

上述代码根据最上面我们对闭包的定义，它并不完全是闭包，虽然是一个函数可以访问另一个函数中的变量，但是被嵌套的函数是在当前词法作用域中被调用的。

实践中的闭包

我们怎样把上述代码foo 函数中的bar函数，在它所在的词法作用域外执行呢？

下面的代码就清晰的展示了闭包： 

function foo() { var a=2; function bar() { console.log(a);
    } return bar;
} var baz=foo();
baz(); // 2 —— 朋友，这就是闭包的效果。

上述代码中 bar 被当做 foo函数返回值。foo函数执行后把返回值也就是 bar函数 赋值给了全局变量 baz。当 baz 执行时，实际上也就是 bar 函数的执行。我们知道 foo 函数在执行后，foo 的内部作用域会被销毁，因为引擎有垃圾回收期来释放不再使用的内存空间。所以在bar函数执行时，实际上foo函数内部的作用域已经不存在了，理应来说 bar函数 内部再访问 a 变量时是找不到的。但是闭包的神奇之处就在这里。由于 bar 是在 foo 作用域中被声明的，所以 bar函数 会一直保存着对 foo 作用域的引用。这时就形成了闭包。

我们先看个例子： 

var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope;
    } return f;
} var foo = checkscope();
foo();

我们用伪代码来解释JavaScript引擎在执行上述代码时的步骤：

  1. 当JavaScript引擎遇到可执行代码时，就会进入一个执行上下文(环境)
  2. 首先遇到的是全局代码，因此进入全局执行上下文，把全局执行上下文压入执行上下文栈。
  3. 全局上下文创建时会先在内部创建VO/AO，作用域链，this。然后执行代码。
  4. 当遇到 checkscope 函数执行时，进入checkscope的执行上下文，然后压入执行上下文栈。
  5. checkscope 执行上下文创建时会先在内部创建VO/AO，作用域链，this。然后执行代码。
  6. 当checkscope 函数执行完毕时，会从执行上下文栈中弹出，此时它的AO也会被浏览器回收。(这是理想状态下)
  7. 执行foo函数，向上查找foo的值，发现foo的值为checkscope函数内部函数f。因此这一步为执行 checkscope 内部函数f。
  8. 执行f函数同执行 checkscope 的步骤一致。
  9. f 函数执行完毕，从执行上下文栈中弹出。

但是我们想一个问题，checkscope函数执行完毕，它的执行上下文从栈中弹出，也就是销毁了不存在了，f 函数还能访问包裹函数的作用域中的变量(scope)吗？答案是可以。

理由是在第6步，我们说过当checkscope 执行函数执行完毕时，它的执行上下文会从栈中弹出，此时活动对象也会被回收，按理说当 f 在访问checkscope的活动对象时是访问不到的。

其实这里还有个概念，叫做作用域链：当 checkscope 函数被创建时，会创建对应的作用域链，里面值存放着包裹它的作用域对应执行上下文的变量对象，在这里只是全局执行上下文的变量对象，当checkscope执行时，此时的作用域链变化了 ，里面存放的是变量对象(活动对象)的集合，最顶端是当前函数的执行上下文的活动对象。端是全局执行上下文的变量对象。类似于： 

checkscope.scopeChain = [
    checkscope.AO
    global.VO
]

当checkscope执行碰到了 f 函数的创建，因此 f 函数也会创建对应的作用域链，默认以包裹它的函数执行时对应的作用域链为基础。因此此时 f 函数创建时的作用域链如下： 

checkscope.scopeChain = [
    checkscope.AO
    global.VO
]

当 f 函数执行时，此时的作用域链变化如下： 

checkscope.scopeChain = [
    f.AO
    checkscope.AO
    global.VO
]

当checkscope函数执行完毕，内部作用域会被回收，但是 f函数 的作用域链还是存在的，里面存放着 checkscope函数的活动对象，因此在f函数执行时会从作用域链中查找内部使用的 scope 标识符，从而在作用域链的第二位找到了，也就是在 checkscope.AO 找到了变量scope的值。

正是因为JavaScript做到了这一点，因此才会有闭包的概念。还有人说闭包并不是为了拥有它采取设计它的，而是设计作用域链时的副作用产物。

闭包是JavaScript中最难的点，也是平常面试中常问的问题，我们必须要真正的去理解它，如果只靠死记硬背是经不起考验的。

评论(0) 浏览(1847)

JavaScript必须掌握的基础 ---> this

seo达人

this

this是我们在书写代码时最常用的关键词之一，即使如此，它也是JavaScript最容易被最头疼的关键词。那么this到底是什么呢？


如果你了解执行上下文，那么你就会知道，其实this是执行上下文对象的一个属性：


executionContext = {

   scopeChain:[ ... ],

   VO:{

       ...

   },

   this:  ?

}

执行上下文中有三个重要的属性，作用域链(scopeChain)、变量对象(VO)和this。


this是在进入执行上下文时确定的，也就是在函数执行时才确定，并且在运行期间不允许修改并且是永久不变的


在全局代码中的this

在全局代码中this 是不变的，this始终是全局对象本身。


var a = 10;

this.b = 20;

window.c = 30;


console.log(this.a);

console.log(b);

console.log(this.c);


console.log(this === window) // true

// 由于this就是全局对象window，所以上述 a ,b ,c 都相当于在全局对象上添加相应的属性

如果我们在代码运行期尝试修改this的值，就会抛出错误：


this = { a : 1 } ; // Uncaught SyntaxError: Invalid left-hand side in assignment

console.log(this === window) // true

函数代码中的this

在函数代码中使用this，才是令我们最容易困惑的，这里我们主要是对函数代码中的this进行分析。


我们在上面说过this的值是，进入当前执行上下文时确定的，也就是在函数执行时并且是执行前确定的。但是同一个函数，作用域中的this指向可能完全不同，但是不管怎样，函数在运行时的this的指向是不变的，而且不能被赋值。


function foo() {

   console.log(this);

}


foo();  // window

var obj={

   a: 1,

   bar: foo,

}

obj.bar(); // obj

函数中this的指向丰富的多，它可以是全局对象、当前对象、或者是任意对象，当然这取决于函数的调用方式。在JavaScript中函数的调用方式有一下几种方式：作为函数调用、作为对象属性调用、作为构造函数调用、使用apply或call调用。下面我们将按照这几种调用方式一一讨论this的含义。


作为函数调用

什么是作为函数调用：就是独立的函数调用，不加任何修饰符。


function foo(){

   console.log(this === window); // true

   this.a = 1;

   console.log(b); // 2

}

var b = 2;

foo();

console.log(a); // 1

上述代码中this绑定到了全局对象window。this.a相当于在全局对象上添加一个属性 a 。


在严格模式下，独立函数调用，this的绑定不再是window，而是undefined。


function foo() {

   "use strict";

   console.log(this===window); // false

   console.log(this===undefined); // true

}

foo();

这里要注意，如果函数调用在严格模式下，而内部代码执行在非严格模式下，this 还是会默认绑定为 window。


function foo() {

   console.log(this===window); // true

}



(function() {

   "use strict";

   foo();

})()

对于在函数内部的函数独立调用 this 又指向了谁呢？


function foo() {

   function bar() {

       this.a=1;

       console.log(this===window); // true

   }

   bar()

}

foo();

console.log(a); // 1

上述代码中，在函数内部的函数独立调用，此时this还是被绑定到了window。


总结：当函数作为独立函数被调用时，内部this被默认绑定为(指向)全局对象window，但是在严格模式下会有区别，在严格模式下this被绑定为undefined。


作为对象属性调用

var a=1;

var obj={

   a: 2,

   foo: function() {

       console.log(this===obj); // true

       console.log(this.a); // 2

   }

}

obj.foo();

上述代码中 foo属性的值为一个函数。这里称 foo 为 对象obj 的方法。foo的调用方式为 对象 . 方法 调用。此时 this 被绑定到当前调用方法的对象。在这里为 obj 对象。


再看一个例子：


var a=1;

var obj={

   a: 2,

   bar: {

       a: 3,

       foo: function() {

           console.log(this===bar); // true

           console.log(this.a); // 3

       }

   }

}

obj.bar.foo();

遵循上面说的规则 对象 . 属性 。这里的对象为 obj.bar 。此时 foo 内部this被绑定到了 obj.bar 。 因此 this.a 即为 obj.bar.a 。


再来看一个例子：


var a=1;

var obj={

   a: 2,

   foo: function() {

       console.log(this===obj); // false

       console.log(this===window); // true

       console.log(this.a); // 1

   }

}


var baz=obj.foo;

baz();

这里 foo 函数虽然作为对象obj 的方法。但是它被赋值给变量 baz 。当baz调用时，相当于 foo 函数独立调用，因此内部 this被绑定到 window。


使用apply或call调用

apply和call为函数原型上的方法。它可以更改函数内部this的指向。


var a=1;

function foo() {

   console.log(this.a);

}

var obj1={

   a: 2

}

var obj2={

   a: 3

}

var obj3={

   a: 4

}

var bar=foo.bind(obj1);

bar();// 2  this => obj1

foo(); // 1  this => window

foo.call(obj2); // 3  this => obj2

foo.call(obj3); // 4  this => obj3

当函数foo 作为独立函数调用时，this被绑定到了全局对象window，当使用bind、call或者apply方法调用时，this 被分别绑定到了不同的对象。


作为构造函数调用

var a=1;

function Person() {

   this.a=2;  // this => p;

}

var p=new Person();

console.log(p.a); // 2

上述代码中，构造函数 Person 内部的 this 被绑定为 Person的一个实例。


总结：


当我们要判断当前函数内部的this绑定，可以依照下面的原则：


函数是否在是通过 new 操作符调用？如果是，this 绑定为新创建的对象

var bar = new foo();     // this => bar;

函数是否通过call或者apply调用？如果是，this 绑定为指定的对象

foo.call(obj1);  // this => obj1;

foo.apply(obj2);  // this => obj2;

函数是否通过 对象 . 方法调用？如果是，this 绑定为当前对象

obj.foo(); // this => obj;

函数是否独立调用？如果是，this 绑定为全局对象。

foo(); // this => window

DOM事件处理函数中的this

1). 事件绑定


<button id="btn">点击我</button>


// 事件绑定


function handleClick(e) {

   console.log(this); // <button id="btn">点击我</button>

}

       document.getElementById('btn').addEventListener('click',handleClick,false);  //   <button id="btn">点击我</button>

       

document.getElementById('btn').onclick= handleClick; //  <button id="btn">点击我</button>

根据上述代码我们可以得出：当通过事件绑定来给DOM元素添加事件，事件将被绑定为当前DOM对象。


2).内联事件


<button onclick="handleClick()" id="btn1">点击我</button>

<button onclick="console.log(this)" id="btn2">点击我</button>


function handleClick(e) {

   console.log(this); // window

}


//第二个 button 打印的是   <button id="btn">点击我</button>

我认为内联事件可以这样理解：


//伪代码


<button onclick=function(){  handleClick() } id="btn1">点击我</button>

<button onclick=function() { console.log(this) } id="btn2">点击我</button>

这样我们就能理解上述代码中为什么内联事件一个指向window，一个指向当前DOM元素。（当然浏览器处理内联事件时并不是这样的）


定时器中的this

定时器中的 this 指向哪里呢？


function foo() {

   setTimeout(function() {

       console.log(this); // window

   },1000)

}

foo();  

再来看一个例子


var name="chen";

var obj={

   name: "erdong",

   foo: function() {

       console.log(this.name); // erdong

       setTimeout(function() {

           console.log(this.name); // chen

       },1000)

   }

}

obj.foo();

到这里我们可以看到，函数 foo 内部this指向为调用它的对象，即：obj 。定时器中的this指向为 window。那么有什么办法让定时器中的this跟包裹它的函数绑定为同一个对象呢？


1). 利用闭包：


var name="chen";

var obj={

   name: "erdong",

   foo: function() {

       console.log(this.name) // erdong

       var that=this;

       setTimeout(function() {

           // that => obj

           console.log(that.name); // erdong

       },1000)

   }

}

obj.foo();

利用闭包的特性，函数内部的函数可以访问含义访问当前词法作用域中的变量，此时定时器中的 that 即为包裹它的函数中的 this 绑定的对象。在下面我们会介绍利用 ES6的箭头函数实现这一功能。


当然这里也可以适用bind来实现：


var name="chen";

var obj={

   name: "erdong",

   foo: function() {

       console.log(this.name); // erdong

       setTimeout(function() {

           // this => obj

           console.log(this.name); // erdong

       }.bind(this),1000)

   }

}

obj.foo();

被忽略的this

如果你把 null 或者 undefined 作为 this 的绑定对象传入 call 、apply或者bind，这些值在调用时会被忽略，实例 this 被绑定为对应上述规则。


var a=1;

function foo() {

   console.log(this.a); // 1  this => window

}

var obj={

   a: 2

}

foo.call(null);

var a=1;

function foo() {

   console.log(this.a); // 1  this => window

}

var obj={

   a: 2

}

foo.apply(null);

var a=1;

function foo() {

   console.log(this.a); // 1  this => window

}

var obj={

   a: 2

}

var bar = foo.bind(null);

bar();

bind 也可以实现函数柯里化：


function foo(a,b) {

   console.log(a,b); // 2  3

}

var bar=foo.bind(null,2);

bar(3);

更复杂的例子：


var foo={

   bar: function() {

       console.log(this);

   }

};


foo.bar(); // foo

(foo.bar)(); // foo


(foo.bar=foo.bar)(); // window

(false||foo.bar)();  // window

(foo.bar,foo.bar)();  // window

上述代码中：


foo.bar()为对象的方法调用，因此 this 绑定为 foo 对象。


(foo.bar)() 前一个() 中的内容不计算，因此还是 foo.bar()


(foo.bar=foo.bar)() 前一个 () 中的内容计算后为 function() { console.log(this); } 所以这里为匿名函数自执行，因此 this 绑定为 全局对象 window


后面两个实例同上。


这样理解会比较好：


(foo.bar=foo.bar)  括号中的表达式执行为 先计算，再赋值，再返回值。

(false||foo.bar)()    括号中的表达式执行为 判断前者是否为 true ，若为true，不计算后者，若为false，计算后者并返回后者的值。

(foo.bar,foo.bar)   括号中的表达式之行为分别计算 “，” 操作符两边，然后返回  “，” 操作符后面的值。

箭头函数中的this

箭头函数时ES6新增的语法。


有两个作用：


更简洁的函数

本身不绑定this

代码格式为：


// 普通函数

function foo(a){

   // ......

}

//箭头函数

var foo = a => {

   // ......

}


//如果没有参数或者参数为多个


var foo = (a,b,c,d) => {

   // ......

}

我们在使用普通函数之前对于函数的this绑定，需要根据这个函数如何被调用来确定其内部this的绑定对象。而且常常因为调用链的数量或者是找不到其真正的调用者对 this 的指向模糊不清。在箭头函数出现后其内部的 this 指向不需要再依靠调用的方式来确定。


箭头函数有几个特点(与普通函数的区别)


箭头函数不绑定 this 。它只会从作用域链的上一层继承 this。

箭头函数不绑定arguments，使用reset参数来获取实参的数量。

箭头函数是匿名函数，不能作为构造函数。

箭头函数没有prototype属性。

不能使用 yield 关键字，因此箭头函数不能作为函数生成器。

这里我们只讨论箭头函数中的this绑定。


用一个例子来对比普通函数与箭头函数中的this绑定：


var obj={

   foo: function() {

       console.log(this); // obj

   },

   bar: () => {

       console.log(this); // window

   }

}

obj.foo();

obj.bar();

上述代码中，同样是通过对象 . 方法调用一个函数，但是函数内部this绑定确是不同，只因一个数普通函数一个是箭头函数。


用一句话来总结箭头函数中的this绑定：


个人上面说的它会从作用域链的上一层继承 this ，说法并不是很正确。作用域中存放的是这个函数当前执行上下文与所有父级执行上下文的变量对象的集合。因此在作用域链中并不存在 this 。应该说是作用域链上一层对应的执行上下文中继承 this 。


箭头函数中的this继承于作用域链上一层对应的执行上下文中的this


var obj={

   foo: function() {

       console.log(this); // obj

   },

   bar: () => {

       console.log(this); // window

   }

}

obj.bar();

上述代码中obj.bar执行时的作用域链为：


scopeChain = [

   obj.bar.AO,

   global.VO

]

根据上面的规则，此时bar函数中的this指向为全局执行上下文中的this，即：window。


再来看一个例子：


var obj={

   foo: function() {

       console.log(this); // obj

       var bar=() => {

           console.log(this); // obj

       }

       bar();

   }

}

obj.foo();

在普通函数中，bar 执行时内部this被绑定为全局对象，因为它是作为独立函数调用。但是在箭头函数中呢，它却绑定为 obj 。跟父级函数中的 this 绑定为同一对象。


此时它的作用域链为：


scopeChain = [

    bar.AO,

    obj.foo.AO,

    global.VO

]

这个时候我们就差不多知道了箭头函数中的this绑定。


继续看例子：


var obj={

   foo: () => {

       console.log(this); // window

       var bar=() => {

           console.log(this); // window

       }

       bar();

   }

}

obj.foo();

这个时候怎么又指向了window了呢？


我们还看当 bar 执行时的作用域链：


scopeChain = [

    bar.AO,

    obj.foo.AO,

    global.VO

]

当我们找bar函数中的this绑定时，就会去找foo函数中的this绑定。因为它是继承于它的。这时 foo 函数也是箭头函数，此时foo中的this绑定为window而不是调用它的obj对象。因此 bar函数中的this绑定也为全局对象window。


我们在回头看上面关于定时器中的this的例子：


var name="chen";

var obj={

   name: "erdong",

   foo: function() {

       console.log(this.name); // erdong

       setTimeout(function() {

           console.log(this); // chen

       },1000)

   }

}

obj.foo();

这时我们就可以很简单的让定时器中的this与foo中的this绑定为同一对象:


var name="chen";

var obj={

   name: "erdong",

   foo: function() {

       // this => obj

       console.log(this.name); // erdong

       setTimeout(() =>  {

           // this => foo中的this => obj

           console.log(this.name); // erdong

       },1000)

   }

}

obj.foo();

评论(0) 浏览(2149)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档