作者:姚一豪

日期:2020年8月18日

一、变量的作用域

     变量的作用域分为:全局变量和局部变量.

 Js作为弱类型语言,可以体现在变量的作用域上,函数内部可以访问到全局变量

[code]var y = 3;

function foo() {

console.log(y);

}

foo(); // 3

  函数外部无法访问到内部变量

[code]function foo(){

var y = 3;

}

console.log(y);  //    y is not defined

 

二、外部访问函数内部变量方法

函数外部若想访问获取函数内部变量,可以在函数内部在定义一个函数.

[code]function foo() {

var y = 3;

function foo2() {

console.log(y); //3

}

}

 

   可见函数foo2就被包含于foo1中,这时候foo中的局部变量对foo2中是可见的,但是foo2中的变量对foo1中是不可见的,子对象会一级一级向上寻找所有父对象的变量,父对象所有的变量对子对象是可见的,这是Javascript语言的"链式作用域"结构.

  foo2中可以访问foo1中的变量,所以我们外部想要获取foo中的变量,可以让foo2作为返回值.

[code]function foo() {

var n = 521;

function foo2() {

console.log(n);

}

return foo2;

}

var result = foo();

result(); // 521

 

三、闭包的定义

 "闭包"在我通俗的理解为定义在一个函数内部的函数,可以读取父函数的局部变量.在JavaScript语言中,只有函数内部的子函数才能读取局部变量,在上一段代码中,foo2就是闭包closure.

四.闭包的用处

  闭包在我目前认为,最大的作用体现在两个方面,一是前面提到的访问局部变量,另外一个是它可以使变量的值始终保存在内存中.

[code]function foo() {
var y = 520;

add = function () {
y++;
};

function foo2() {
console.log(y);
}

return foo2;
}

var result = foo();

result(); // 520

add();

result(); // 521

 

    在这段代码中，result实际上就是闭包foo2函数。它一共运行了两次，第一次的值是520，第二次的值是521。这证明了，函数foo中的局部变量y一直保存在内存中，并没有在foo调用后被自动清除。

   为什么会这样呢？原因就在于foo是foo2的父函数，而foo2被赋给了一个全局变量，这导致foo2始终在内存中，而foo2的存在依赖于foo，因此foo也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

   这段代码中另一个值得注意的地方，就是"add=function(){y++}"这一行，首先在add前面没有使用var关键字，因此add是一个全局变量，而不是局部变量。其次，add的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以add相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

六、例题分析

[code]function test() {

var n = 4399;

function add() {

n++;

console.log(n);

}

return { n: n, add: add };

}

var result = test();

var result2 = test();

result.add();

result.add();

console.log(result.n);

result2.add();

//4400

//4401

//4399

//4400

 

 

js在执行之前，会将所有带var和function的进行提前定义和声明。（带var的提前声明，function声明和定义都完成了）

首先，在全局作用域下，进行预解释：

test=xxxfff000（开辟一个堆内存，里面存的是代码字符串）

var result（声明一个变量result）

var  result2（声明一个变量result2）

-------------------------------

代码执行：

result=test()  -->将test执行的返回结果赋值给result，是一个对象，再开辟一个堆内存，test执行，形成一个私有作用域A

再进行预解释和代码执行等一系列操作

result2=test()  同理

result.add()  -->方法执行形成一个私有作用域

n++  顺着作用域链向上寻找到test作用域A（A这个作用域不销毁，因为被全局变量result占用了）中的n为4399，n++ 》4400

（这时test这个作用域A下的n变成4400）

(1)   console.log(n)  //4400   

==============================

result.add()   -->方法执行形成一个新的私有作用域

n++  顺着作用域链向上寻找到test作用域（A）中的n为4400，n++ 》4401

(2)   console.log(n)  //4401  

===============================

(3)   console.log(result.n)  //4399

此时找的只是result对应的那个堆内存中的n

===============================

result2.add()  -->方法执行形成一个私有作用域

n++ 顺着作用域链向上寻找到test作用域（B）中的n为4399，n++ 》4400

(3)   console.log(n)  //4400