(转载)Javascript 进阶 作用域 作用域链

载请标明出处:http://blog.csdn.net/lmj623565791/article/details/25076713

一直觉得Js很强大,由于长期不写js代码,最近刚好温故温故。

1、Javascript没有代码块作用域的概念,局部作用域是针对函数来说的。

[javascript] view plaincopy

  1. function fun()
  2. {
  3. for( var i = 0 ; i < 10 ; i++)
  4. {}
  5. //如果在Java中i此时应当属于未声明的变量,但是Js中i的作用域依然存在
  6. console.log(i);//10
  7. if(true)
  8. {
  9. var b = "helloworld";
  10. }
  11. console.log(b);//helloworld
  12. }
  13. fun();

2、如果不使用var声明的变量,默认为全局变量

[javascript] view plaincopy

  1. function fun02()
  2. {
  3. a = "helloworld";
  4. var b = "welcome";
  5. }
  6. fun02();
  7. console.log(a); //     helloworld
  8. console.log(b); //   b is not defined

3、Js中的作用域链

先看个简单的例子:只有一个函数对象,函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

[javascript] view plaincopy

  1. var a = "hello";
  2. function fun04()
  3. {
  4. a = "world";
  5. var b ="welcome";
  6. }

作用域链的图:


注:图中省略了,Global Scope中的window,document等,每个函数对象中的arguments,this等均未画出。

[javascript] view plaincopy

  1. function fun03()
  2. {
  3. var a = 10;
  4. return function(){
  5. a*= 2 ;
  6. return a ;
  7. };
  8. }
  9. var f = fun03();
  10. f();
  11. var x = f();
  12. console.log(x);  //40
  13. var g = fun03();
  14. var y = g();
  15. console.log(y); //20

观察上面代码,存在fun03,f,g三个函数对象。

下面是作用域链的图:

注:每个函数对象一个作用域链,这里直接画在了一起;对于变量的查找,先从链的0开始找。

函数对象 f 在代码中执行了2 次,所以a*2*2 = 40 ; 函数对象 g 在代码中执行了1次, 所以 a *2 = 20 ;

4、闭包

上面的例子可以看到,在fun03执行完成后,a的实例并没有被销毁,这就是闭包。个人对闭包的理解是:函数执行完成后,函数中的变量没有被销毁,被它返回的子函数所引用。

下面以一个特别经典的例子,同时使用作用域链解析:

[javascript] view plaincopy

  1. window.onload = function()
  2. {
  3. var elements = document.getElementsByTagName("li");
  4. for(var i = 0; i < elements.length ; i ++)
  5. {
  6. elements[i].onclick = function()
  7. {
  8. alert(i);
  9. }
  10. }
  11. }

相信上面的代码肯定大家都写过,本意是点击每个li,打印出它们的索引,可是事实上打印出的都是elements.length。这是为什么呢?

看下上面的简易的作用域链(省略了很多部分,主要是理解),此时每个onclick函数的i,指向的都是 onload 中的i 此时的 i = element.length.

下面看解决方案:

[javascript] view plaincopy

  1. window.onload = function ()
  2. {
  3. var elements = document.getElementsByTagName("li");
  4. for (var i = 0; i < elements.length; i++)
  5. {
  6. (function (n)
  7. {
  8. elements[n].onclick = function ()
  9. {
  10. alert(n);
  11. }
  12. })(i);
  13. }
  14. }

在onclick函数的外层,包了一层立即执行的函数,所以此时的n指向的 n 是立即执行的,所有都是1~elements.length 。

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

以上原子 摘抄的  (文章开头的链接)

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

其实,关于上面循环中,i获取到的始终是  elements.length的问题,只需要 将 i 的值定义一个变量 存放一下,也可以解决。

时间: 2024-10-13 12:01:17

(转载)Javascript 进阶 作用域 作用域链的相关文章

JavaScript进阶之原型链

对象 1 function f1(){ 2 }; 3 typeof f1 //"function"函数对象 4 5 6 var o1 = new f1(); 7 typeof o1 //"object"普通对象 8 9 var o2 = {}; 10 typeof o2 //"object"普通对象 JavaScript中将对象分为普通对象和函数对象. 使用函数对象可以创建普通对象,普通对象没法创建函数对象. 凡是通过new Function创建

Javascript 进阶 作用域 作用域链

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/25076713 一直觉得Js很强大,由于长期不写js代码,最近刚好温故温故. 1.Javascript没有代码块作用域的概念,局部作用域是针对函数来说的. function fun() { for( var i = 0 ; i < 10 ; i++) {} //如果在Java中i此时应当属于未声明的变量,但是Js中i的作用域依然存在 console.log(i);//10 if(

javascript篇-----函数作用域,函数作用域链和声明提前

在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于这类型的编程语言,javascript是没有块级作用域.取而代之的,javascript使用的是块级作用域:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的. 在如下的所示的代码中,在不同位置定义了变量 i . j 和 k ,它们都在同一个作用域内——这三个变量在函数体内均是有定义

JavaScript中的作用域链和闭包

JavaScript中的作用域链和闭包 2012-06-29 11:41 1878人阅读 评论(46) 收藏 举报 JavaScript中出现了一个以前没学过的概念——闭包.何为闭包?从表面理解即封闭的包,与作用域有关.所以,说闭包以前先说说作用域. 作用域(scope) 通常来说一段程序代码中使用的变量和函数并不总是可用的,限定其可用性的范围即作用域,作用域的使用提高了程序逻辑的局部性,增强程序的可靠性,减少名字冲突. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥

JavaScript this 局部变量全局变量 作用域 作用域链 闭包

从阮老师博客的一道测试题说起: 代码段一: var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()()); 代码段二: var name = "The Window"; var object

深入理解JavaScript的变量作用域(转载Rain Man之作)

在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域. 函数中声明的变量在整个函数中都有定义. 1.JavaScript的作用域链 首先看下下面这段代码: <script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVa

深入理解JavaScript的变量作用域

在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域. 函数中声明的变量在整个函数中都有定义. 1.JavaScript的作用域链 首先看下下面这段代码: 1 <script type="text/javascript"> 2 var rain = 1; 3 function rainman(){ 4 var man = 2; 5 function inner(){ 6

javascript函数以及作用域简介

javascript函数以及作用域简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.基本函数 对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数.JavaScript中函数基本上可以分为以下三类: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8&

[转]深入理解JavaScript的变量作用域

1.JavaScript的作用域链 2.函数体内部,局部变量的优先级比同名的全局变量高. 3.JavaScript没有块级作用域. 4.函数中声明的变量在整个函数中都有定义. 5.未使用var关键字定义的变量都是全局变量. 6.全局变量都是window对象的属性 在学习JavaScript的变量作用域之前,我们应当明确几点: JavaScript的变量作用域是基于其特有的作用域链的. JavaScript没有块级作用域. 函数中声明的变量在整个函数中都有定义. 1.JavaScript的作用域链

javascript中函数作用域之”提升“

javascript中函数作用域之变量提升 当我们在函数内部用关键字var声明一个变量的时候,此变量的作用域限制在当前函数. 提升:在一个作用域内部,不管一个变量用var声明的位置在哪里,这个变量属于当前整个作用域,并且在当前作用域的任何位置都可以访问它.在javascript中,这种行为/现象称之为"提升",即一个变量在一个作用域的任何位置用var声明,javascript引擎都会把这些用var声明的变量"移动"到当前作用域的开始处. 谈到javascript这种