您的位置:时时app平台注册网站 > web前端 > JavaScript从功用域到闭包

JavaScript从功用域到闭包

2019-10-18 23:54

以前都是直接用前端框架Bootstrap,突然想看看Javascript,发现javascript是个非常有趣的东西,这里把刚碰到的一个小问题的理解做下笔录(废话不多说,上代码)。

代码块

JavaScript中的代码块是指由<script>标签分割的代码段。JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。如下:

<script type="text/javascript">//代码块一
var test1 = "我是代码块一test1";
alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
alert("我是代码块一");//没有运行到这里
var test2 = "我是代码块一test2";//没有运行到这里但是预编译环节声明提前了,所以有变量但是没赋值
</script>
<script type="text/javascript">//代码块二
alert("我是代码块二"); //这里有运行到
alert(test1); //弹出"我是代码块一test1"
alert(test2); //弹出"undefined"
</script>

上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性。

但是当第一个代码块报错停止后,并不影响下一个代码块运行。当然在下面的例子中,虽然代码块二中的函数声明预编译了,但是在代码块1中的函数出现Fn函数为定义错误(浏览器报错,并不是声明未赋值的undefined),说明代码块1完全执行后才执行代码块2。

<script type="text/javascript">//代码块1
Fn(); //浏览器报错:"undefined",停止代码块1运行
alert("执行了代码块1");//未运行
</script>
<script type="text/javascript">//代码块2
alert("执行了代码块2");//执行弹框效果
function Fn(){ //函数1
alert("执行了函数1");
}
</script>

所以js函数解析顺序如下:
  step 1. 读入第一个代码块。
  step 2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。
  step 3. 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。
  step 4. 执行代码段,有错则报错(比如变量未定义)。
  step 5. 如果还有下一个代码段,则读入下一个代码段,重复step2。
  step6. 结束。

:需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代 码块中,而需要在页面元素加载完后的js放在</body>元素后面,body标签的onload事件是在最后执行的。

<script type="text/javascript">
alert("first");
function Fn(){
alert("third");
}
</script>
<body onload="Fn()">
</body>
<script type="text/javascript">
alert("second");
</script>

关于作者:Damonare

图片 1

知乎专栏[前端进击者] 个人主页 · 我的文章 · 19 ·          

/**
 * Example 1
 */
var localvar = "local var";
console.log(localvar);//local var

/**
 * Example 2
 */
console.log(x === undefined); // true
var x = 3;

/**
 * Example 3
 */
var myvar = "my value";
//Test01
//will return a value of undefined
(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
  console.log(myvar); // local value
})();
console.log(myvar);//my value
//Test02
(function myFunction(){
  console.log(myvar);//my value
})();
//Test03
var test = new function(){
  console.log(myvar);//my value
};

作用域

闭包

1.理解闭包

我们已经理解了什么是作用域,什么是块级作用域,那又该如何去访问函数内部的变量呢?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

JavaScript

function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result();// 弹出999

1
2
3
4
5
6
7
8
9
function f1(){
var n=999;
function f2(){
    alert(n);
}
    return f2;
}
var result=f1();
result();// 弹出999

上面函数中的f2函数就是闭包,就是通过建立函数来访问函数内部的局部变量。

2.闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

JavaScript

function f1(){ var n=999; nAdd=function(){n =1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000

1
2
3
4
5
6
7
8
9
10
11
12
function f1(){
    var n=999;
    nAdd=function(){n =1}
    function f2(){
    alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000

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

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

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

3.闭包的注意点

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

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

4.经典闭包小案例

如果你能理解下面全部的案例,那你的闭包就算是真正掌握了。

JavaScript

var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } };  alert(object.getNameFunc()());//The Window

1
2
3
4
5
6
7
8
9
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
    return function(){
        return this.name;
        };
    }
};  alert(object.getNameFunc()());//The Window

JavaScript

var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFunc()());//My Object

1
2
3
4
5
6
7
8
9
10
11
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
    var that = this;
    return function(){
        return that.name;
        };
    }
  };
  alert(object.getNameFunc()());//My Object

JavaScript

function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,? var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,? var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?

1
2
3
4
5
6
7
8
9
10
11
function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?

//问:三行a,b,c的输出分别是什么?

这是一道非常典型的JS闭包问题。其中嵌套了三层fun函数,搞清楚每层fun的函数是那个fun函数尤为重要。

//答案:

//a: undefined,0,0,0

//b: undefined,0,1,2

//c: undefined,0,1,1

都答对了么?如果都答对了恭喜你在js闭包问题当中几乎没什么可以难住你了。

(3).在使用或引用某个变量之后进行声明和初始化操作,这个被提升的引用仍将得到 undefined 值。

  自执行函数

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 2 图片 3

1 赞 9 收藏 1 评论

总结原因:匿名函数(function() {})();是一个特殊的闭包写法。

 

说了半天,究竟什么是闭包呢?

  由于闭包的存在,全局变量自然无法访问(闭包的一个重要原因就是为了避免访问全局变量),故Test01 function中第一句输出结果为undefined。

  [代码块]()  **

  • 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。
  • 闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。
  • 当在一个函数内定义另外一个函数就会产生闭包。

解释如下:


本文作者: 伯乐在线 - Damonare 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

(2).JavaScript 变量感觉上是被“提升”或移到了函数或语句的顶部。然而提升后的变量将返回 undefined 值。

[闭包]() 

为了便于理解,我们可以简单的将闭包理解为:

  经过查看官方API文档发现,在匿名函数(function() {})();的使用中形成了闭包(重点,不清楚的可以查阅闭包的概念,闭包概念还是好理解的);

 

  • 闭包:是指有权访问另外一个函数作用域中的变量的函数。

(1).JavaScript 变量的特别之处是,你可以引用稍后声明的变量而不会引发异常。这一概念称为变量声明提升(hoisting);

**函数声明与赋值**

参考

《学习Javascript闭包(Closure)》

打赏支持我写出更多好文章,谢谢!

打赏作者

(4).这里Example 3中Test01是这次问题的关键,Test01和Test02是很相似的(至少我看着很相似)。但是最后输出结果不能用(1)、(2)、(3)来解释

**  [块作用域与函数作用域](

其实关于闭包各个论坛社区里都有很多的文章来讲它,毕竟闭包是JavaScript中一个特色,也正因为这个雨中不同的特色也让闭包理解起来有一些吃力。笔者在这里不仅仅是想介绍闭包,也向列举一些笔者所见过的一些闭包,如果有读者还有一些比较经典的闭包例子,希望可以在评论区里留一下,谢谢。

函数声明与赋值

JavaScript中的作用域

JavaScript中是没有块级作用域的。不过关于块级作用域我们在这里不做深入探究,笔者在JavaScript的作用域和块级作用域概念理解中有对块级作用域较为详细的解释,不懂的读者可以去看看。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

JavaScript

var n=999; function f1(){ alert(n); } f1(); // 999

1
2
3
4
5
var n=999;
function f1(){
    alert(n);
}
f1(); // 999

如上函数,f1可调用全局变量n

另一方面,在函数外部自然无法读取函数内的局部变量。

JavaScript

function f1(){ var n=999; } alert(n); // error

1
2
3
4
function f1(){
    var n=999;
}
alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量。

JavaScript

function f1(){ n=999; } f1(); alert(n); // 999

1
2
3
4
5
function f1(){
    n=999;
}
f1();
alert(n); // 999

**作用域链**

 

块作用域与函数作用域

函数作用域是相对块作用域来进行解释的,其和局部作用域是一个意思。参考引文:JavaScript的作用域和块级作用域概念理解

块作用域:任何一对花括号{}中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是无效的,我们称之为块级作用域。

函数作用域:在函数中的参数和变量在函数外部是无法访问的。JavaScript 的作用域是词法性质的(lexically scoped)。这意味着,函数运行在定义它的作用域中,而不是在调用它的作用域中。下文会解释。

图片 4图片 5

 1 //C语言 
 2 #include <stdio.h> 
 3 void main() 
 4 { 
 5 int i=2; 
 6 i--; 
 7 if(i) 
 8 { 
 9 int j=3; 
10 } 
11 printf("%d/n",j); 
12 }

View Code

运行这段代码,会出现“use an undefined variable:j”的错误。可以看到,C语言拥有块级作用域,因为j是在if的语句块中定义的,因此,它在块外是无法访问的。

图片 6图片 7

1 function test(){ 
2         for(var i=0;i<3;i  ){};    
3         alert(i); 
4         } 
5         test();

View Code

运行这段代码,弹出"3",可见,在块外,块中定义的变量i仍然是可以访问的。也就是说,JS并不支持块级作用域,它只支持函数作用域,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

作用域中的声明提前

var scope="global";  //全局变量
function t(){  
    console.log(scope);  
    var scope="local" ;//局部变量
    console.log(scope);  
            }  
t();

 

(console.log()是控制台的调试工具,chrome叫检查,有的浏览器叫审查元素,alert()弹窗会破坏页面效果)

第一句输出的是: "undefined",而不是 "global"

第二讲输出的是:"local"

第二个不用说,就是局部变量输出"local"。第一个之所以也是"local",是因为Js中的声明提前,尽管在第4行才进行局部变量的声明与赋值,但其实是将第4行的声明提前了,放在了函数体顶部,然后在第4行进行局部变量的赋值。可以理解为下面这样。

var scope="global";//全局变量
function t(){
    var scope;//局部变量声明
    console.log(scope);
    scope="local";//局部变量赋值
    console.log(scope);
}
t();

 

具体细节可以查阅犀牛书(《JavaScript权威指南》)中的详细介绍。

 

自执行函数

也就是在函数名后添加括号,函数就会自执行。在绑定事件时,像我这样的初学者有时会犯如下的错误,window.onclick = ab();这样函数ab一开始就会执行。正确的做法应该将ab后的括号去掉。而这种加括号的做法其实是把ab函数运行的结果赋值给点击事件。

下面两个例子清楚地反映了函数赋值后的情况。

1:

function ab () {
    var i=0;
    alert("ab");
    return i;
}
var c=ab();//执行ab函数
alert(typeof c "      " c);//number  0

2:

function ab () {
    var i=0;
    alert("ab");
    return i;
}
var c=ab;//只赋值
alert(typeof c "      " c);//function  function ab () {var i=0;alert("ab");return i;}

注:但是这个函数必须是函数表达式(诸如上文提到的赋值式函数),不能是函数声明。详细请看:js立即执行函数:(function(){...})()与(function(){...}())

文中主要讲到匿名函数的自执行方法,即在function前面加!、 、 -甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、 、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码(jq使用的就是这种方法)。举例如下所示。

(function(a){
    console.log(a);   //firebug输出123,使用()运算符
})(123);

(function(a){
    console.log(a);   //firebug输出1234,使用()运算符
}(1234));

!function(a){
    console.log(a);   //firebug输出12345,使用!运算符
}(12345);

 function(a){
    console.log(a);   //firebug输出123456,使用 运算符
}(123456);

-function(a){
    console.log(a);   //firebug输出1234567,使用-运算符
}(1234567);

var fn=function(a){
    console.log(a);   //firebug输出12345678,使用=运算符
}(12345678)

其作用就是:实现块作用域。

javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。代码如下:

function test(){ 
(function (){ 
for(var i=0;i<4;i  ){ 
} 
})(); 
alert(i); //浏览器错误:i is not defined
} 
test();

 可以对比最开始介绍作用域时候的代码。

 

 

作用域(scope)

**  作用域中的声明提前**

作用域链(Scope Chain)

当代码在一个环境中执行时,会创建变量对象的的一个作用域链(scope chain)。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是一个函数,则将其活动对象作为变量对象。参考引文:Js作用域与作用域链详解,浅析作用域链–JS基础核心之一

num="one";
var a = 1;  
function t(){  //t函数的局部作用域,可以访问到a,b变量,但是访问不到c变量
     var num="two"; 
     var b = 2;
    function A(){ //A函数局部作用域,可以访问到a,b,c变量 
        var num="three"; //局部变量与外部变量重名以局部变量为主
        var c = 3;
        console.log(num); //three 
            }  
    function B(){  //B函数局部作用域,可以访问到a,b变量,访问不到c变量
        console.log(num); //two 
            }  
    A();  
    B();  
}  
t();

当执行A时,将创建函数A的执行环境(调用对象),并将该对象置于链表开头,然后将函数t的调用对象链接在之后,最后是全局对象。然后从链表开头寻找变量num。

即:A()->t()->window,所以num是”three";

但执行B()时,作用域链是: B()->t()->window,所以num是”two";

另外,有一个特殊的例子我觉得应该发一下。利用“JavaScript 的作用域是词法性质的(lexically scoped)。这意味着,函数运行在定义它的作用域中,而不是在调用它的作用域中。” 这句话,解释了下面的例子。

var x = 10;

function a() {
console.log(x);
}

function b () {
var x = 5;
a();
}

b();//输出为10

虽然b函数调用了a,但是a定义在全局作用域下,同样也是运行在全局作用域下的,所以其内部的变量x,向上寻找到了全局变量x=10;所以b函数的输出为10;

更深层次的讲解请参照:JavaScript 开发进阶:理解 JavaScript 作用域和作用域链。

目录

**  声明式函数、赋值式函数与匿名函数**

闭包(Closure)

闭包对于初学者来说很难,需要学习很多很多才能领会,所以也是先把作用域链和匿名函数的知识作为铺垫。我这里的闭包内容属于基础篇,以后可能会贴一些更为核心的内容。我这里参照了大神们的讲解来说。参考引文:学习Javascript闭包(Closure),JavaScript 匿名函数(anonymous function)与闭包(closure),浅析作用域链–JS基础核心之一

闭包是能够读取其他函数内部变量的函数,所以在本质上,闭包将函数内部和函数外部连接起来的一座桥梁。

闭包是在函数执行结束,作用域链将函数弹出之后,函数内部的一些变量或者方法,还可以通过其他的方法引用。

两个用处:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

为了帮助理解,我找了几个例子:

1.(阮一峰老师的讲解)

function f1(){
    var n=999;
    nAdd=function(){n =1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000

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

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

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

2.(某大神)

function foo() { 
var a = 10; 
function bar() { 
a *= 2; 
return a; 
} 
return bar; 
} 
var baz = foo(); 
alert(baz()); //20
alert(baz()); //40    
alert(baz()); //80

var blat = foo(); 
alert(blat()); //20

现在可以从外部访问 a; 
a 是运行在定义它的 foo 中,而不是运行在调用 foo 的作用域中。 只要 bar 被定义在 foo 中,它就能访问 foo 中定义的变量 a,即使 foo 的执行已经结束。也就是说,按理,"var baz = foo()" 执行后,foo 已经执行结束,a 应该不存在了,但之后再调用 baz 发现,a 依然存在。这就是 JavaScript 特色之一——运行在定义,而不是运行的调用。 
其中, "var baz = foo()" 是一个 bar 函数的引用;"var blat= foo()" 是另一个 bar 函数引用。 
用闭包还可实现私有成员,但是我还没理解,所以就先不贴出来,想看的请参照参考引文:JavaScript 匿名函数(anonymous function)与闭包(closure)。

 

结束

第一次写这么长的文章,大部分是引用,但是所有内容都是亲自实践并思考后才贴出来,作为初学者可能有解释和引用不当的地方,还请大家指出。有问题的地方还请各位老师同学多来指教探讨。

再次感谢所有引文作者,知识的增长在于传播,感谢辛苦的传播者。

 

参考文献:

JavaScript 开发进阶:理解 JavaScript 作用域和作用域链,

JavaScript的作用域和块级作用域概念理解,

Js作用域与作用域链详解,

浅析作用域链–JS基础核心之一,

javascript 匿名函数的理解(透彻版),

JS中函数执行顺序的问题,

js立即执行函数:(function(){...})()与(function(){...}()), 

学习Javascript闭包(Closure),

JavaScript 匿名函数(anonymous function)与闭包(closure)

 

全局作用域和局部作用域

通常来讲这块是全局变量与局部变量的区分。 参考引文:JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

全局作用域:最外层函数和在最外层函数外面定义的变量拥有全局作用域。

  1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

  2)所有末定义直接赋值的变量自动声明为拥有全局作用域,即没有用var声明的变量都是全局变量,而且是顶层对象的属性。

  3)所有window对象的属性拥有全局作用域

局部作用域:和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所以在一些地方也会看到有人把这种作用域称为函数作用域。

代码部分请参照引文。

  [全局作用域和局部作用域]()

 

声明式函数、赋值式函数与匿名函数

匿名函数:function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。下文会讲到。

JS中的函数定义分为两种:声明式函数与赋值式函数。

<script type="text/javascript">
Fn(); //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。
function Fn(){ //声明式函数
alert("执行了声明式函数");
}
</script>

<script type="text/javascript">
Fn(); //执行结果:"Fn is not a function"
var Fn = function(){ //赋值式函数
alert("执行了赋值式函数");
}
</script>

JS的解析过程分为两个阶段:预编译期(预处理)与执行期。
预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),此时处理函数的只是声明式函数,而且变量也只是进行了声明(声明提前)但未进行初始化以及赋值。所以才会出现上面两种情况。

当正常情况,函数调用在声明之后,同名函数会覆盖前者。

<script type="text/javascript">
function Fn(){ //声明式函数
alert("执行了声明式函数");
}
var Fn = function(){ //赋值式函数
alert("执行了赋值式函数");
}
Fn();//执行结果:"执行了赋值式函数",同名函数后者会覆盖前者
</script>

 同理当提前调用声明函数时,也存在同名函数覆盖的情况。

<script type="text/javascript">
Fn(); //执行结果:"执行了函数2",同名函数后者会覆盖前者
function Fn(){ //函数1
alert("执行了函数1");
}
function Fn(){ //函数2
alert("执行了函数2");
}
</script> 

 

经典案例

下面是一个经典的事件绑定例子:

<div id = "test">
    <p>栏目1</p>
    <p>栏目2</p>
    <p>栏目3</p>
    <p>栏目4</p>
</div>
 </body>
<script type="text/javascript">    
function bindClick(){
    var allP = document.getElementById("test").getElementsByTagName("p"),
    i=0,
    len = allP.length;        
    for( ;i<len;i  ){
    allP[i].onclick = function(){
        alert("you click the " i " P tag!");//you click the 4 P tag!    
    }
    }
}
bindClick();//运行函数,绑定点击事件
</script>

上面的代码给P标签添加点击事件,但是不管我们点击哪一个p标签,我们获取到的结果都是“you click the 4 P tag!”。

我们可以把上述的JS代码给分解一下,让我们看起来更容易理解,如下所示。前面使用一个匿名函数作为click事件的回调函数,这里使用的一个非匿名函数,作为回调,完全相同的效果。

function bindClick(){
    var allP = document.getElementById("test").getElementsByTagName("p"),
    i=0,
    len = allP.length;
    for( ;i<len;i  ){
    allP[i].onclick = AlertP;
    }
    function AlertP(){
    alert("you click the " i " P tag!");
    }
}
bindClick();//运行函数,绑定点击事件

这里应该没有什么问题吧,前面使用一个匿名函数作为click事件的回调函数,这里使用的一个非匿名函数,作为回调,完全相同的效果。也可以做下测试哦。

理解上面的说法了,那么就可以很简单的理解,为什么我们之前的代码,会得到一个相同的结果了。首先看一下for循环中,这里我们只是对每一个匹配的元素添加了一个click的回调函数,并且回调函数都是AlertP函数。这里当为每一个元素添加成功click之后,i的值,就变成了匹配元素的个数,也就是i=len,而当我们触发这个事件时,也就是当我们点击相应的元素时,我们期待的是,提示出我们点击的元素是排列在第几行。当click事件触发时,执行回调函数AlertP,但是当执行到这里的时候,发现alert方法中,有一个变量是未知的,并且在AlertP的局部作用域中,也没有查找到相应的变量,那么按照作用域链的查找方式,就会向父级作用域去查找,这里的父级作用域中,确实是有变量i的,而i的值,却是经过for循环之后的值,i=len。所以也就出现了我们最初看到的效果。

解决办法如下所示:

function bindClick(){
    var allP = document.getElementById("test").getElementsByTagName("p"),
  i=0,
  len = allP.length;
    for( ;i<len;i  ){
    AlertP(allP[i],i);
    }
    function AlertP(obj,i){
    obj.onclick = function(){
        alert("you click the " i " P tag!");
    }
    }
}
bindClick();

这里,objiAlertP函数内部,就是局部变量了。click事件的回调函数,虽然依旧没有变量i的值,但是其父作用域AlertP的内部,却是有的,所以能正常的显示了,这里AlertP我放在了bindClick的内部,只是因为这样可以减少必要的全局函数,放到全局也不影响的。

这里是添加了一个函数进行绑定,如果我不想添加函数呢,当然也可以实现了,这里就要说到自执行函数了。可以跳到本文的自执行函数,也可以看参考引文的深度讲解:浅析作用域链–JS基础核心之一

本文由时时app平台注册网站发布于web前端,转载请注明出处:JavaScript从功用域到闭包

关键词: