JavaScript 闭包_JSHTMLDOM


JavaScript 闭包


JavaScript 变量能够本地或全局变量作用。

私有变量可以用到闭包。


一、全局变量

函数允许访问可以是函数内部定义的所有变量,例如:

示例代码

function myFunction() {

var a = 4;

return a * a;

}


演示一下 ?

函数允许访问函数外部定义的变量,例如:

示例代码

var a = 4;

function myFunction() {

return a * a;

}


演示一下 ?

在后面这个示例代码中,a 是全变量。

web网页中,全局变量属于 window 对象。

全局变量能用于页面中所有脚本使用和修改。

在第一个案例中,局部变量是 a。

局部变量只可用于定义的函数内部。对于其余函数与脚本代码它是不可见的。

相同名称的全局变量与局部变量是不同的变量。即便修改一个,不会改动另外一个的值。


关键词如通过 var 创建是一个总全局变量的,即它们在函数中创建。



二、变量生命周期

全局变量点击获得和您的应用程序 如:窗口、网页一样持久。

局部变量在函数调用时创建,当函数执行完毕后销毁。


三、计数器的困境

在统计一些数值时,而且计数器通常需要在所有函数中可用。

JavaScript 闭包 计数器困境 此时可使用全局变量,函数设置计数器递增:

示例代码

var counter = 0;

function add() {

  return counter += 1;

}

add();

add();

add();

// 我的计数器现在为 3


演示一下 ?

计数器数值在执行 pnn() 函数时发生变化。

可限定只有调用规定的 pnn() 函数才能修改计数器的值。

示例代码

function pnn() {

var counter = 0;

return counter += 1;

}

pnn();

pnn();

pnn();

// 本意是想输出 3, 但事与愿违,输出的都是 1 !


演示一下 ?

上面代码将无法正确输出,我每次调用 pnn() 函数,计数器都会设置为 1。

此刻 JavaScript 内嵌函数可以解决该问题。


四、JavaScript 内嵌函数

所有函数都可访问全局变量和一层的作用域。  

理论上,在 JavaScript 中,所有函数都可以访问上面的作用域。

JavaScript 支持嵌套函数。嵌套函数允许访问上一层的函数变量。

该示例代码中,内嵌函数 plus() 可以访问父函数的 counter 计数器变量:

示例代码

function add() {

var counter = 0;

function plus() {counter += 1;}

plus();    

return counter;

}


演示一下 ?

但是如果我们能在外部直接访问 plusa() 函数,我们就能解决计数器困境。。

重要在于 确保 var counter = 0; 只执行一次。

我们需要闭包。


五、JavaScript 闭包

还回忆过函数自我调用吗?这函数会做什么?

示例代码

var pnn = (function () {

var counter = 0;

return function () {return counter += 1;}

})();

pnn();

pnn();

pnn();

// 计数器为 3


演示一下 ?

六、示例代码解析

变量 pnn 指向了函数自我调用函数的返回值。

这个是自我调用函数只执行一次。可设置计数器为 0。并返回函数表达式。

pnn 形成了函数使用。最“好”部分是它能访问父作用域中的计数器。

这个叫作 JavaScript 闭包。它使函数拥有“私有”变量成为可能的。

计数器被受匿名函数的作用域保护,而且只能使用 pnn 方法修改的。


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved