js的作用域与作用域链

JavaScript的作用域和作用域链。在初学JavaScript时,觉得它就和其他语言没啥区别,尤其是作用域这块,想当然的以为“全局变量就是在整个程序的任何地方都可以访问,也就是写在函数外的变量,局部变量也就是写在函数内部或循环体内部,出了循环体和函数就不可访问”,但是在JavaScript中并不是这么简单,需要去深入的学习。



一. 什么是作用域
任何程序语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围。比如C/C++等,都是块级作用域,也就是说在每一个代码块内声明的变量,出了这个代码块就是不可见的,而JS根本就没有块级作用域这个概念,而是函数作用域。如下面的例子:


1

2

3

4

5

6

7

8

9

10

function test(){

    var sum = 0;

    for (var i = 0; i < 2; i++)

    {

        sum = sum + i;

    }

    console.log(i);

}

test();

上面的程序输出结果为2,知道c和c++或java的同学都会知道,在for循环体块中定义的变量,在循环体外部是不可访问的,可是在JS中,没有块作用域这个概念,只有函数作用域的概念,所以只要是在函数体内部定义的变量,在这个函数体内都是可访问的。

二. 函数作用域
看到上面的小例子,应该对函数作用域有一点模糊的理解吧。其实也就是说,变量和函数在声明它们的函数体中,和这个函数体嵌套的任意函数体内部都是可访问的。下面再看个小例子:


1

2

3

4

5

6

7

8

9

10

11

function test(){

    var name = "xiyangyang";

    function showname(){

        console.log(name);

    }

    showname();

}

test(); //xiayangyang

showname(); //ReferenceError: showname is not defined

结果如代码后的注释,可见变量和函数只在当前运行函数体的内部有效,在当前运行函数体的外部是无效的。

三. 变量作用域
JS的变量计较特殊,下面是一些小例子,请看它的特殊点:
(1)全局变量被覆盖:


1

2

3

4

5

6

7

8

9

var name = "huitaiyang"

function test(){

    console.log(name);

    var name = "xiyangyang";

    console.log(name);

}

test();

如上代码不知道JS变量作用域的肯定会觉得,第一个输出“huitaiyang”,第二个输出“xiyangyang”,其实不是的,第一个会输出“undefined”,第二个是“xiyangyang”(其实一开始我也是这么想的),无论如何请随时谨记,JS是函数作用域,也就是它首先会在函数内部寻找name属性,找不到才会继续往上一层寻找。
这个小例子中,在test函数内部有name的定义,也就是找到了,它不会在往上层寻找了,但是name在打印时并没有赋值,所以就输出了undefined,第二次打印时已经赋值,就是正常的“xiyangyang”。

(2)没有var声明的局部变量,上升为全局变量:


1

2

3

4

5

6

7

function test(){

    name = "xiyangyang";

    console.log(name);

}

test();

console.log(name);

上面代码两次打印结果都是“xiyangyang”,所以没有var声明的变量都是全局变量,是window对象的属性,console.log(name); 这样和上面的结果一致。

四. 作用域链
一旦函数创建,函数的作用域就确定了,作用域链就由作用域中对象的集合组成。当函数执行时,它会把当前正在执行的函数内部的所有变量(包括this)置于作用域链的首部,会把该函数外部的对象置于第二,第三…层,window对象置于最外层。作用域链的层数和函数的层数有关。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var name = "huitaiyang"

function test(){

    var name = "xiyangyang";

    function show1(){

        var name = "lanyangyang";

        console.log(name);

    }

    function show2(){

        console.log(name);

    }

    show1();

    show2();

}

test();

在上面的例子中,打印出来的结果是“langyangyang”和“xiyangyang”。
解析:当test()执行时,运行到show1,创建show1的执行环境,将show1的所有内部变量都置于作用域链的首部,然后将函数test的所有对象都置于show1的后面,最后是window对象,然后从作用域链的头部开始查找name属性,所以show1()的作用域链是:show1()->test()->window
,所以name就是lanyangyang;同理show2()的作用域链是:show2()->test()->window
,所以name就是xiyangyang。

五. 作用域链和代码优化
看完上面的所有内容的同学就会很容易理解这里,如下这个小例子:


1

2

3

4

5

function changeColor(){

    document.getElementById(‘btn‘).onclick = function(){

        document.getElementById(‘obj‘).style.backgroundColor = ‘red‘;

    };

}

大家都知道document是全局变量,也就是在作用域链的最尾部,查找是很消耗资源的,所以需要优化,优化后代码为:


1

2

3

4

5

6

function changeColor(){

    var doc = document;

    doc.getElementById(‘btn‘).onclick = function(){

        doc.getElementById(‘obj‘).style.backgroundColor = ‘red‘;

    };

}

这样找一次就够了,所以当一个对象被跨作用域访问时,可以把它存储为局部变量使用,这样就起到了优化的作用。

六. 修改作用域链
这里就简单的提一下,能理解就有好了,with和catch会修改函数的作用域链。
(1)如果代码块中有with,则with中的所有对象会置于当前作用域链的最顶层,当前函数会被置于第二层。会降低代码的性能,所以不推荐使用。
(2)catch语句会把异常对象置于作用域链的顶部,当前执行函数会被置于第二层。同样影响代码的性能。

时间: 2024-10-01 06:27:15

js的作用域与作用域链的相关文章

js的变量,变量作用域,作用域链

变量声明: 使用var关键字声明,如果使用没有声明的变量,则JS会自动声明此变量根据变量作用域.如果变量只声明为赋值,则此时值是undefined.重复声明变量,在JS不会报错,会依据最后一次的声明来处理变量. 变量作用域: 一个变量的作用域是,程序代码定义这个变量的区域,全局变量在程序代码内任何地方都可以访问. 包括在{}函数,对象内的变量(属性)成为局部变量. 在函数体内定义的变量成为局部变量,作用域也是局部,函数参数也是局部变量. 他们只在函数体内有意义. 在函数体内,局部变量优先于全局变

Js作用域与作用域链详解

一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错.我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫. 一:函数作用域 先看一小段代码: [javascript] view plaincopy var scope="global"; function t(){ console.log(scope); var scope="local" console.log(scope); } t(

Js 作用域与作用域链与执行上下文不得不说的故事 ?(? ???ω??? ?)?

最近在研究Js,发现自己对作用域,作用域链,活动对象这几个概念,理解得不是很清楚,所以拜读了@田小计划大神的博客与其他文章,受益匪浅,写这篇随笔算是自己的读书笔记吧~. 作用域 首先明确一个概念,js只有函数作用域(function-based),没有块级作用域,也就是只有函数会有自己的作用域,其他都没有. 接着,作用域分为全局作用域与局部作用域. 全局作用域中的对象可以在代码的任何地方访问,一般来说,下面情况的对象会在全局作用域中: 最外层函数和在最外层函数外面定义的变量 没有通过关键字"va

js作用域与作用域链

一直对Js的作用域有点迷糊,今天偶然读到JavaScript权威指南,立马被吸引住了,写的真不错.我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫. 一:函数作用域 先看一小段代码: [javascript] view plain copy var scope="global"; function t(){ console.log(scope); var scope="local" console.log(scope); } t

js中作用域与作用域链详解

一:函数作用域 先看一小段代码: [javascript] view plaincopy var scope="global"; function t(){ console.log(scope); var scope="local" console.log(scope); } t(); 第一句输出的是: "undefined",而不是 "global" 第二讲输出的是:"local" 你可能会认为第一句会输

了解 JS 作用域与作用域链

(1)作用域 一个变量的作用域(scope)是程序源代码中定义的这个变量的区域. 1. 在JS中使用的是词法作用域(lexical scope) 不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope) 在函数内声明的变量具有函数作用域(function scope),属于局部变量 局部变量优先级高于全局变量 var name="one"; function test(){ var name="two"; console.log

js的作用域与作用域链的理解(转)

一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错.我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫. 一:函数作用域 先看一小段代码: 第一句输出的是: "undefined",而不是 "global" 第二讲输出的是:"local" 你可能会认为第一句会输出:"global",因为代码还没执行var scope="local&qu

Js作用域与作用域链详解-转

转自:http://blog.csdn.net/yueguanghaidao/article/details/9568071 一直对Js的作用域有点迷糊,今天偶然读到Javascript权威指南,立马被吸引住了,写的真不错.我看的是第六版本,相当的厚,大概1000多页,Js博大精深,要熟悉精通需要大毅力大功夫. 一:函数作用域 先看一小段代码: 1 var scope="global"; 2 function t(){ 3 console.log(scope); 4 var scope

理解js中的作用域,作用域链以及闭包

作用域变量作用域的类型:全局变量和局部变量全局作用域对于最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的 <script> var outerVar = "outer"; function fn(){ console.log(outerVar); } fn();//result:outer </script> 局部作用域和全局用域相反,局部作用域一般只在固定的代码片段内可访问到,对于函数外部是无法访问的 <script> fu