js的作用域链理解

最新推荐文章于 2024-04-07 20:59:33 发布
最新推荐文章于 2024-04-07 20:59:33 发布
阅读量820 收藏
点赞数
文章标签： html javascript 语言

原文章出处 ：http://blog.csdn.net/yueguanghaidao/article/details/9568071#comments



 一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函数作用域

先看一小段代码：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. console.log(scope);
  4. var scope="local"
  5. console.log(scope);
  6. }
  7. t(); 
var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）

第一句输出的是： "undefined"，而不是 "global"

第二讲输出的是："local"

你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。

我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思，可以将上述代码重写如下：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. var scope;
  4. console.log(scope);
  5. scope="local"
  6. console.log(scope);
  7. }
  8. t(); 
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢，有以下代码为证：

[javascript] view plain copy print ?
  1. var name="global";
  2. if(true){
  3. var name="local";
  4. console.log(name)
  5. }
  6. console.log(name); 
var name="global";
if(true){
    var name="local";
    console.log(name)
}
console.log(name);
都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。

所以下面的代码也就很好理解了。

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. var s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. console.log(s);
  9. }
  10. t(true); 
function t(flag){
    if(flag){
        var s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
    console.log(s);
}
t(true);
输出：2 ”ifscope"


二：变量作用域

还是首先看一段代码：

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. }
  9. t(true);
  10. console.log(s); 
function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
}
t(true);
console.log(s);

就是上面的翻版，知识将声明s中的var去掉。

程序会报错还是输出“ifscope"呢？

让我揭开谜底吧，会输出：”ifscope"

这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig"


当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1 ->不可删除

sex=”girl“ ->可删除

this.age=22 ->可删除


三：作用域链

先来看一段代码：

[javascript] view plain copy print ?
  1. name="lwy";
  2. function t(){
  3. var name="tlwy";
  4. function s(){
  5. var name="slwy";
  6. console.log(name);
  7. }
  8. function ss(){
  9. console.log(name);
  10. }
  11. s();
  12. ss();
  13. }
  14. t(); 
name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();

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

name是"slwy"。

但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"

下面看一个很容易犯错的例子：

[html] view plain copy print ?
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function buttonInit(){
  5. for(var i=1;i<4;i++){
  6. var b=document.getElementById("button"+i);
  7. b.addEventListener("click",function(){ alert("Button"+i);},false);
  8. }
  9. }
  10. window.onload=buttonInit;
  11. </script>
  12. </head>
  13. <body>
  14. <button id="button1">Button1</button>
  15. <button id="button2">Button2</button>
  16. <button id="button3">Button3</button>
  17. </body>
  18. </html> 
<html>
<head>
<script type="text/javascript">
function buttonInit(){
	for(var i=1;i<4;i++){
		var b=document.getElementById("button"+i);
		b.addEventListener("click",function(){ alert("Button"+i);},false);
	}
}
window.οnlοad=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，

所以弹出”button4“。


四：with语句

说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。

看下面代码

[javascript] view plain copy print ?
  1. person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
  2. with(person.wife){
  3. console.log(name);
  4. } 
person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}
with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".

with语句结束后，作用域链恢复正常。


 一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函数作用域

先看一小段代码：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. console.log(scope);
  4. var scope="local"
  5. console.log(scope);
  6. }
  7. t(); 
var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）

第一句输出的是： "undefined"，而不是 "global"

第二讲输出的是："local"

你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。

我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思，可以将上述代码重写如下：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. var scope;
  4. console.log(scope);
  5. scope="local"
  6. console.log(scope);
  7. }
  8. t(); 
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢，有以下代码为证：

[javascript] view plain copy print ?
  1. var name="global";
  2. if(true){
  3. var name="local";
  4. console.log(name)
  5. }
  6. console.log(name); 
var name="global";
if(true){
    var name="local";
    console.log(name)
}
console.log(name);
都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。

所以下面的代码也就很好理解了。

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. var s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. console.log(s);
  9. }
  10. t(true); 
function t(flag){
    if(flag){
        var s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
    console.log(s);
}
t(true);
输出：2 ”ifscope"


二：变量作用域

还是首先看一段代码：

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. }
  9. t(true);
  10. console.log(s); 
function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
}
t(true);
console.log(s);

就是上面的翻版，知识将声明s中的var去掉。

程序会报错还是输出“ifscope"呢？

让我揭开谜底吧，会输出：”ifscope"

这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig"


当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1 ->不可删除

sex=”girl“ ->可删除

this.age=22 ->可删除


三：作用域链

先来看一段代码：

[javascript] view plain copy print ?
  1. name="lwy";
  2. function t(){
  3. var name="tlwy";
  4. function s(){
  5. var name="slwy";
  6. console.log(name);
  7. }
  8. function ss(){
  9. console.log(name);
  10. }
  11. s();
  12. ss();
  13. }
  14. t(); 
name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();

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

name是"slwy"。

但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"

下面看一个很容易犯错的例子：

[html] view plain copy print ?
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function buttonInit(){
  5. for(var i=1;i<4;i++){
  6. var b=document.getElementById("button"+i);
  7. b.addEventListener("click",function(){ alert("Button"+i);},false);
  8. }
  9. }
  10. window.onload=buttonInit;
  11. </script>
  12. </head>
  13. <body>
  14. <button id="button1">Button1</button>
  15. <button id="button2">Button2</button>
  16. <button id="button3">Button3</button>
  17. </body>
  18. </html> 
<html>
<head>
<script type="text/javascript">
function buttonInit(){
	for(var i=1;i<4;i++){
		var b=document.getElementById("button"+i);
		b.addEventListener("click",function(){ alert("Button"+i);},false);
	}
}
window.οnlοad=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，

所以弹出”button4“。


四：with语句

说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。

看下面代码

[javascript] view plain copy print ?
  1. person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
  2. with(person.wife){
  3. console.log(name);
  4. } 
person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}
with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".

with语句结束后，作用域链恢复正常。


 一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函数作用域

先看一小段代码：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. console.log(scope);
  4. var scope="local"
  5. console.log(scope);
  6. }
  7. t(); 
var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）

第一句输出的是： "undefined"，而不是 "global"

第二讲输出的是："local"

你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。

我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思，可以将上述代码重写如下：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. var scope;
  4. console.log(scope);
  5. scope="local"
  6. console.log(scope);
  7. }
  8. t(); 
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢，有以下代码为证：

[javascript] view plain copy print ?
  1. var name="global";
  2. if(true){
  3. var name="local";
  4. console.log(name)
  5. }
  6. console.log(name); 
var name="global";
if(true){
    var name="local";
    console.log(name)
}
console.log(name);
都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。

所以下面的代码也就很好理解了。

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. var s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. console.log(s);
  9. }
  10. t(true); 
function t(flag){
    if(flag){
        var s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
    console.log(s);
}
t(true);
输出：2 ”ifscope"


二：变量作用域

还是首先看一段代码：

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. }
  9. t(true);
  10. console.log(s); 
function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
}
t(true);
console.log(s);

就是上面的翻版，知识将声明s中的var去掉。

程序会报错还是输出“ifscope"呢？

让我揭开谜底吧，会输出：”ifscope"

这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig"


当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1 ->不可删除

sex=”girl“ ->可删除

this.age=22 ->可删除


三：作用域链

先来看一段代码：

[javascript] view plain copy print ?
  1. name="lwy";
  2. function t(){
  3. var name="tlwy";
  4. function s(){
  5. var name="slwy";
  6. console.log(name);
  7. }
  8. function ss(){
  9. console.log(name);
  10. }
  11. s();
  12. ss();
  13. }
  14. t(); 
name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();

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

name是"slwy"。

但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"

下面看一个很容易犯错的例子：

[html] view plain copy print ?
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function buttonInit(){
  5. for(var i=1;i<4;i++){
  6. var b=document.getElementById("button"+i);
  7. b.addEventListener("click",function(){ alert("Button"+i);},false);
  8. }
  9. }
  10. window.onload=buttonInit;
  11. </script>
  12. </head>
  13. <body>
  14. <button id="button1">Button1</button>
  15. <button id="button2">Button2</button>
  16. <button id="button3">Button3</button>
  17. </body>
  18. </html> 
<html>
<head>
<script type="text/javascript">
function buttonInit(){
	for(var i=1;i<4;i++){
		var b=document.getElementById("button"+i);
		b.addEventListener("click",function(){ alert("Button"+i);},false);
	}
}
window.οnlοad=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，

所以弹出”button4“。


四：with语句

说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。

看下面代码

[javascript] view plain copy print ?
  1. person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
  2. with(person.wife){
  3. console.log(name);
  4. } 
person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}
with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".

with语句结束后，作用域链恢复正常。


 一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函数作用域

先看一小段代码：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. console.log(scope);
  4. var scope="local"
  5. console.log(scope);
  6. }
  7. t(); 
var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）

第一句输出的是： "undefined"，而不是 "global"

第二讲输出的是："local"

你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。

我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思，可以将上述代码重写如下：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. var scope;
  4. console.log(scope);
  5. scope="local"
  6. console.log(scope);
  7. }
  8. t(); 
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢，有以下代码为证：

[javascript] view plain copy print ?
  1. var name="global";
  2. if(true){
  3. var name="local";
  4. console.log(name)
  5. }
  6. console.log(name); 
var name="global";
if(true){
    var name="local";
    console.log(name)
}
console.log(name);
都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。

所以下面的代码也就很好理解了。

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. var s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. console.log(s);
  9. }
  10. t(true); 
function t(flag){
    if(flag){
        var s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
    console.log(s);
}
t(true);
输出：2 ”ifscope"


二：变量作用域

还是首先看一段代码：

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. }
  9. t(true);
  10. console.log(s); 
function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
}
t(true);
console.log(s);

就是上面的翻版，知识将声明s中的var去掉。

程序会报错还是输出“ifscope"呢？

让我揭开谜底吧，会输出：”ifscope"

这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig"


当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1 ->不可删除

sex=”girl“ ->可删除

this.age=22 ->可删除


三：作用域链

先来看一段代码：

[javascript] view plain copy print ?
  1. name="lwy";
  2. function t(){
  3. var name="tlwy";
  4. function s(){
  5. var name="slwy";
  6. console.log(name);
  7. }
  8. function ss(){
  9. console.log(name);
  10. }
  11. s();
  12. ss();
  13. }
  14. t(); 
name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();

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

name是"slwy"。

但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"

下面看一个很容易犯错的例子：

[html] view plain copy print ?
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function buttonInit(){
  5. for(var i=1;i<4;i++){
  6. var b=document.getElementById("button"+i);
  7. b.addEventListener("click",function(){ alert("Button"+i);},false);
  8. }
  9. }
  10. window.onload=buttonInit;
  11. </script>
  12. </head>
  13. <body>
  14. <button id="button1">Button1</button>
  15. <button id="button2">Button2</button>
  16. <button id="button3">Button3</button>
  17. </body>
  18. </html> 
<html>
<head>
<script type="text/javascript">
function buttonInit(){
	for(var i=1;i<4;i++){
		var b=document.getElementById("button"+i);
		b.addEventListener("click",function(){ alert("Button"+i);},false);
	}
}
window.οnlοad=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，

所以弹出”button4“。


四：with语句

说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。

看下面代码

[javascript] view plain copy print ?
  1. person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
  2. with(person.wife){
  3. console.log(name);
  4. } 
person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}
with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".

with语句结束后，作用域链恢复正常。


一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函数作用域

先看一小段代码：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. console.log(scope);
  4. var scope="local"
  5. console.log(scope);
  6. }
  7. t(); 
var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）

第一句输出的是： "undefined"，而不是 "global"

第二讲输出的是："local"

你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。

我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。

在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.

所谓函数作用域就是说：-》变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。

所以根据函数作用域的意思，可以将上述代码重写如下：

[javascript] view plain copy print ?
  1. var scope="global";
  2. function t(){
  3. var scope;
  4. console.log(scope);
  5. scope="local"
  6. console.log(scope);
  7. }
  8. t(); 
var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是由定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。

为什么说Js没有块级作用域呢，有以下代码为证：

[javascript] view plain copy print ?
  1. var name="global";
  2. if(true){
  3. var name="local";
  4. console.log(name)
  5. }
  6. console.log(name); 
var name="global";
if(true){
    var name="local";
    console.log(name)
}
console.log(name);
都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。

现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。

所以下面的代码也就很好理解了。

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. var s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. console.log(s);
  9. }
  10. t(true); 
function t(flag){
    if(flag){
        var s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
    console.log(s);
}
t(true);
输出：2 ”ifscope"


二：变量作用域

还是首先看一段代码：

[javascript] view plain copy print ?
  1. function t(flag){
  2. if(flag){
  3. s="ifscope";
  4. for(var i=0;i<2;i++)
  5. ;
  6. }
  7. console.log(i);
  8. }
  9. t(true);
  10. console.log(s); 
function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++) 
            ;
    }
    console.log(i);
}
t(true);
console.log(s);

就是上面的翻版，知识将声明s中的var去掉。

程序会报错还是输出“ifscope"呢？

让我揭开谜底吧，会输出：”ifscope"

这主要是Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性。

所以你用console.log(window.s)也是会输出“ifconfig"


当使用var声明一个变量时，创建的这个属性是不可配置的，也就是说无法通过delete运算符删除

var name=1 ->不可删除

sex=”girl“ ->可删除

this.age=22 ->可删除


三：作用域链

先来看一段代码：

[javascript] view plain copy print ?
  1. name="lwy";
  2. function t(){
  3. var name="tlwy";
  4. function s(){
  5. var name="slwy";
  6. console.log(name);
  7. }
  8. function ss(){
  9. console.log(name);
  10. }
  11. s();
  12. ss();
  13. }
  14. t(); 
name="lwy";
function t(){
    var name="tlwy";
    function s(){
        var name="slwy";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();
    ss();
}
t();

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

name是"slwy"。

但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"

下面看一个很容易犯错的例子：

[html] view plain copy print ?
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function buttonInit(){
  5. for(var i=1;i<4;i++){
  6. var b=document.getElementById("button"+i);
  7. b.addEventListener("click",function(){ alert("Button"+i);},false);
  8. }
  9. }
  10. window.onload=buttonInit;
  11. </script>
  12. </head>
  13. <body>
  14. <button id="button1">Button1</button>
  15. <button id="button2">Button2</button>
  16. <button id="button3">Button3</button>
  17. </body>
  18. </html> 
<html>
<head>
<script type="text/javascript">
function buttonInit(){
	for(var i=1;i<4;i++){
		var b=document.getElementById("button"+i);
		b.addEventListener("click",function(){ alert("Button"+i);},false);
	}
}
window.οnlοad=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，

所以弹出”button4“。


四：with语句

说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。

看下面代码

[javascript] view plain copy print ?
  1. person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
  2. with(person.wife){
  3. console.log(name);
  4. } 
person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}
with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".

with语句结束后，作用域链恢复正常。


arfanter
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS-图解作用域链-秒懂
小王的技术库
06-01 896
作用域形成时机：我们来分析这样一个代码，这里我们省略了变量和函数声明的描述首先，这个代码是在写全局作用域中的，所以在这个代码编译的时候，会创建全局上下文，同时全局的变量对象也就产生了，这个对象中有、、等变量，也会有在全局中声明的变量和。在全局代码编译过程中，声明了函数。这时，函数就会有一个的属性，这个属性指向了一个作用域链（下面简称函数体中指向的作用域链），这个作用域链只有一个对像，这个对象就是全局上下文中的变量对象。这个变量对象中会有、、、等变量上图中的还是，因为代码只是编译完成，没有得到执行，所以变量a
JS作用域链详解
热门推荐
mengfanshaoxia的博客
02-21 1万+
1、作用域 作用域是一套规则，用来确定在何处以及如何查找标识符。在 JS 中作用域分为全局作用域和函数作用域，另外函数作用域可以互相嵌套。在下面的例子中，存在着全局作用域 fn 作用域和 bar作用域，他们相互嵌套。 <script> var a = 1; var b = 2; function fn(x) { var a = 10; function bar(x) {
JavaScript之作用域链详解
最新发布
Jarvan_I的博客
04-07 582
作用域链是由变量对象的列表组成，这些变量对象按照它们被创建的顺序排列。本文将详细介绍JavaScript作用域链，包括什么是作用域链、作用域链的创建过程、作用域链的查找规则以及相关的代码示例。通过深入了解作用域链的创建过程和查找规则，我们能更好地理解JavaScript代码的执行过程，尤其是在涉及嵌套函数和闭包的情况下。：作用域链的顶端是当前执行上下文的变量对象，然后依次链接到父级执行上下文的变量对象，直至全局执行上下文。闭包是指在一个函数内部定义的函数，它可以访问外部函数的变量，形成一个闭包作用域链。
js作用域及作用域链概念理解及使用
xyjikl
07-12 6407
之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包，觉得写得很清晰，可以简单理解闭包产生原因，但看评论都在说了解了作用域链和活动对象才能真正理解闭包，起初不以为然，后来在跟公司同事交流的时候发现作用域和执行环境确实很重要，又很基础，对理解JavaScript闭包很有帮助，所以在写一篇对作用域和执行环境的理解。 作用域 作用域就是变量和函数的可访问范围，控制着变量和函数的可见
说说你对作用域链的理解
zthtt的博客
01-06 581
作用域链的作用是保证执行环境下对变量和函数的访问是有序的； 作用域链的变量只能向上访问，当变量访问到window对象时即被终止； （注意：Javascript没有块级作用域。可以通过(function(){})()立即执行的形式实现块级作用域；当然ES6可以通过{}搭配let const形成块级作用域）； 函数的作用域内的变量，如果在本作用域内没有找到定义，则会往一层一层上一级查找，知道找到全局作用域，如果都没有则返回undefiened,这种一层一层的类似锁链的关系，叫作用域链 ...
7.说说你对Javascript中作用域的理解?
kleinBlue.的博客
10-18 319
一、作用域 作用域，即变量（变量作用域又称上下文）和函数生效（能被访问）的区域或集合 换句话说，作用域决定了代码区块中变量和其他资源的可见性 举个例子 functionmyFunction(){ letinVariable="函数内部变量"; } myFunction();//要先执行这个函数，否则根本不知道里面是啥 console.log(inVariable);//UncaughtReferenceError:inVariableisnotdefined ...
理解JavaScript作用域和作用域链
03-02
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript。任何程序...
深入理解JavaScript作用域和作用域链
12-09
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript。 ...
作用域链的理解（超级详细）
贫僧法号依平
03-12 836
引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。可见上述代码中在函数内部声明的变量或函数，在函数外部是无法访问的，这说明在函数内部定义的变量或者方法只是函数作用域。任何不在函数中或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问。把作用域比喻成一个建筑，这份建筑代表程序中的嵌套作用域链，第一层代表当前的执行作用域，顶层代表全局作用域。变量，当我们在全局访问这个变量的时候，系统会报错。
js的作用域链
qq_56668869的博客
05-21 181
作用域链 上下文对象 scopes [[scopes]]
JavaScript中的作用域链
m0_75198698的博客
04-28 455
当`inner()`函数被调用时，也创建了一个新的执行上下文，并将该函数的[[Scope]]属性赋值给新执行上下文的作用域链，此时作用域链包括`inner()`函数的变量对象、`outer()`函数的变量对象和全局执行上下文的变量对象。在这个例子中，当`outer()`函数被调用时，创建了一个新的执行上下文，并将该函数的[[Scope]]属性赋值给新执行上下文的作用域链，此时作用域链包括`outer()`函数的变量对象和全局执行上下文的变量对象。- 当执行到一个函数时，创建一个新的函数执行上下文。
详解js函数的作用域链Scopes
weixin_43706224的博客
04-04 436
作用域链的第一个元素是函数的活动对象(activation object)，它包含了函数的参数、函数内部定义的变量和函数声明。作用域链是一种动态的数据结构，因为在函数执行时它是动态创建的，当函数执行完毕后，作用域链也会被销毁。这是一个重要的概念，因为它说明同一个函数在不同的执行上下文中，它的作用域链可能会不同，从而导致变量的解析结果也可能不同。在函数内部声明的变量和函数都是局部的，只能在函数内访问。如果在函数内部和外部同时定义了同名的变量或函数，函数内部的变量或函数会覆盖外部的。
什么是作用域和作用域链，简单几句话帮你搞明白！
海贼王某人的博客
01-21 2370
作用域： 作用域简单点来理解就是对象可以被调用的区域，或者可以使用的区域，下面一段代码简单理解一下，str的作用域就是整个fun()内部，str1的作用域就是fun1()内部 fun() { let str = '1'; let fun1 = function() { let str1 = '2' console.log(str1,str) //1，2 } console.log(str) // 1 console
【JavaScript】作用域
Superman_H的博客
07-15 570
# 作用域 作用域可以分为以下几种类型： 1. 全局作用域（Global Scope）：全局作用域是整个程序中都可访问的最外层作用域。 在全局作用域中声明的变量为全局变量，可以被程序中的任何代码访问。 2. 函数作用域（Function Scope）：函数作用域是在函数内部声明的变量的可访问范围。 在函数作用域中声明的变量为局部变量，只能在函数内部访问。 3. 块级作用域（Block Scope）：块级作用域是在代码块（由 `{ }` 包裹的代码片段）内部声明的变量的可访问范围。
JS 作用域和作用域链
destiny'Note
08-27 8186
1. 作用域 作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。 执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。 全局执行环境是最外围的一个执行环境。根据 ECMAS...
说说你对作用域链的理解？
weixin_30915275的博客
05-21 135
　　　　作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，边访问到window对象即被终止，作用域链向下访问变量是不被允许的。 转载于:https://www.cnblogs.com/Alice-67/p/10897808.html...
JS中的作用域与作用域链
BigDaruizi的博客
09-05 1629
一、相关知识 1、执行期上下文 函数执行的前一刻，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕时，它所产生的执行上下文会被销毁。 2、作用域 每个JavaScript函数都是一个特殊的对象，对象中有的属性我们可以访问，但有的不可以，这些属性仅供Ja...
js中作用域、作用域链的理解
05-13
作用域链是指在 JavaScript 中变量和函数的查找规则。当访问一个变量或函数时，JavaScript 引擎会先从当前作用域开始查找，如果没有找到，则会向上一级作用域查找，直到找到为止。这些作用域形成了一条链，被称为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值