了解 JS 作用域与作用域链

（1）作用域

一个变量的作用域（scope）是程序源代码中定义的这个变量的区域。

1. 在JS中使用的是词法作用域（lexical scope)

不在任何函数内声明的变量（函数内省略var的也算全局）称作全局变量（global scope）

在函数内声明的变量具有函数作用域（function scope），属于局部变量

局部变量优先级高于全局变量

var name="one";
function test(){
  var name="two";
  console.log(name); //two
}
test();

函数内省略var的，会影响全局变量，因为它实际上已经被重写成了全局变量

var name="one";
function test(){
  name="two";

}
test();
console.log(name); //two

函数作用域，就是说函数是一个作用域的基本单位，js不像c/c++那样具有块级作用域 比如 if  for 等

function test(){
  for(var i=0;i<10;i++){
    if(i==5){
      var name = "one";
    }
  }
  console.log(name); //one
}

test();  //因为是函数级作用域，所以可以访问到name="one"

当然了，js里边还使用到了高阶函数，其实可以理解成嵌套函数

function test1(){
  var name = "one";
  return function (){
    console.log(name);
  }
}
test1()();

test1()之后将调用外层函数，返回了一个内层函数，再继续()，就相应调用执行了内层函数，所以就输出 ”one"

嵌套函数涉及到了闭包，后面再谈..这里内层函数可以访问到外层函数中声明的变量name，这就涉及到了作用域链机制

2. JS中的声明提前

js中的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。并且，变量在声明之前就可以使用了，这种情况就叫做声明提前（hoisting)

tip:声明提前是在js引擎预编译时就进行了，在代码被执行之前已经有声明提前的现象产生了

比如

var name="one";
function test(){
  console.log(name);  //undefined
  var name="two";
  console.log(name); //two
}

test();

上边就达到了下面的效果

var name="one";
function test(){
  var name;
  console.log(name);  //undefined
  name="two";
  console.log(name); //two
}

test();

再试试把var去掉？这是函数内的name已经变成了全局变量，所以不再是undefined

var name="one";
function test(){
  console.log(name);  //one
  name="two";
  console.log(name); //two
}

test();

3. 值得注意的是，上面提到的都没有传参数，如果test有参数，又如何呢？

function test(name){
  console.log(name);  //one
  name="two";
  console.log(name); //two
}

var name = "one";
test(name);
console.log(name); // one

之前说过，基本类型是按值传递的，所以传进test里面的name实际上只是一个副本，函数返回之后这个副本就被清除了。
千万不要以为函数里边的name="two"把全局name修改了，因为它们是两个独立的name

（2）作用域链

上面提到的高级函数就涉及到了作用域链

function test1(){
  var name = "one";
  return function (){
    console.log(name);
  }
}
test1()();

1. 引入一大段话来解释：
每一段js代码（全局代码或函数）都有一个与之关联的作用域链（scope chain）。

这个作用域链是一个对象列表或者链表，这组对象定义了这段代码中“作用域中”的变量。

当js需要查找变量x的值的时候（这个过程称为变量解析（variable resolution）），它会从链的第一个对象开始查找，如果这个对象有一个名为x的属性，则会直接使用这个属性的值，如果第一个对象中没有名为x的属性，js会继续查找链上的下一个对象。如果第二个对象依然没有名为x的属性，则会继续查找下一个，以此类推。如果作用域链上没有任何一个对象含有属性x，那么就认为这段代码的作用域链上不存在x，并最终抛出一个引用错误（ReferenceError）异常。

2. 作用域链举例：

在js最顶层代码中（也就是不包括任何函数定义内的代码），作用域链由一个全局对象组成。

在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。

在一个嵌套的函数体内，作用域上至少有三个对象。

3. 作用域链创建规则：

当定义一个函数时（注意，是定义的时候就开始了），它实际上保存一个作用域链。

当调用这个函数时，它创建一个新的对象来储存它的参数或局部变量，并将这个对象添加保存至那个作用域链上，同时创建一个新的更长的表示函数调用作用域的“链”。

对于嵌套函数来说，情况又有所变化：每次调用外部函数的时候，内部函数又会重新定义一遍。因为每次调用外部函数的时候，作用域链都是不同的。内部函数在每次定义的时候都要微妙的差别---在每次调用外部函数时，内部函数的代码都是相同的，而且关联这段代码的作用域链也不相同。

（tip: 把上面三点理解好，记住了，最好还要能用自己的话说出来，不然就背下来，因为面试官就直接问你：请描述一下作用域链...)

举个作用域链的实用例子：

var name="one";
function test(){
  var name="two";
  function test1(){
    var name="three";
    console.log(name);  //three
  }
  function test2(){
    console.log(name);  // two
  }

  test1();
  test2();
}

test();

上边是个嵌套函数，相应的应该是作用域链上有三个对象
那么在调用的时候，需要查找name的值，就在作用域链上查找

当成功调用test1()的时候，顺序为 test1()->test()->全局对象window 因为在test1()上就找到了name的值three，所以完成搜索返回

当成功调用test1()的时候，顺序为 test2()->test()->全局对象window  因为在test2()上没找到name的值，所以找test()中的，找到了name的值two,就完成搜索返回

还有一个例子有时候我们会犯错的，面试的时候也经常被骗到。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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); //都是 Button4
        },false);
    }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

为什么？
根据作用域链中变量的寻找规则：

b.addEventListener("click",function(){
            alert("Button"+i);
        },false);

这里有一个函数，它是匿名函数，既然是函数，那就在作用域链上具有一个对象，这个函数里边使用到了变量i，它自然会在作用域上寻找它。
查找顺序是 这个匿名函数 -->外部的函数buttonInit() -->全局对象window

匿名函数中找不到i,自然跑到了buttonInit(), ok,在for中找到了，

这时注册事件已经结束了，不要以为它会一个一个把i放下来，因为函数作用域之内的变量对作用域内是一直可见的，就是说会保持到最后的状态

当匿名函数要使用i的时候，注册事件完了，i已经变成了4，所以都是Button4

那怎么解决呢？

给它传值进去吧，每次循环时，再使用一个匿名函数，把for里边的i传进去，匿名函数的规则如代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function buttonInit(){
    for(var i=1;i<4;i++){
        (function(data_i){
        var b=document.getElementById("button"+data_i);
        b.addEventListener("click",function(){
            alert("Button"+data_i);
        },false);
        })(i);
    }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

这样就可以 Button1..2..3了

4.上述就是作用域链的基本描述，另外，with语句可用于临时拓展作用域链（不推荐使用with）

语法形如：

with(object)

statement

这个with语句，将object添加到作用域链的头部，然后执行statement,最后把作用域链恢复到原始状态

简单用法：

比如给表单中各个项的值value赋值

一般可以我们直接这样

var f = document.forms[0];
f.name.value = "";
f.age.value = "";
f.email.value = "";

引入with后(因为使用with会产生一系列问题，所以还是使用上面那张形式吧）

with(document.forms[0]){
f.name.value = "";
f.age.value = "";
f.email.value = "";
}

另外，假如 一个对象o具有x属性，o.x = 1;
那么使用

with(o){
  x = 2;
}

就可以转换成 o.x = 2;
假如o没有定义属性x，它的功能就只是相当于  x = 2; 一个全局变量罢了。

因为with提供了一种读取o的属性的快捷方式，但他并不能创建o本身没有的属性。

时间： 2024-11-05 12:21:22

了解 JS 作用域与作用域链的相关文章

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

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

第十八篇 js高级知识---作用域链

一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己的能力有现,有点地方说的不明白,还请高手指点.这个文章,如果有时间的话应该会写一个系列,包括js的高级方面的知识,最终希望能够说到js的引擎方面的东西.千里之行,始于足下,下面开始说说最简单的一个东西—js的作用域链,时常也比较容易弄错,也算是自己做一个纪录. 首先看一段代码: function t

js中的作用域链

js中的执行环境: 所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据 ,决定了它们各自的行为.而每个执行环境都有一个与之相关的变量对象,环境中定义的所有变量和函数都保存在这个对象中. js中的作用域链: 每个函数都有自己的执行环境,当代码在执行环境中执行时,就会创建变量对象的作用域链.作用域链保证了对执行环境有权访问所有变量和函数的有序访问.作用域链的前端,始终都是当前执行的代码所在的环境的变量对象,如果环境是一个函数,那么它的

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

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

js闭包和作用域链

闭包 闭包 函数对象之间可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内 这种特性称做“闭包”. 什么是变量? 变量就是为一切事物赋的一个name; var的作用,初始化变量. 变量作用域 程序源码中定义这个变量的区域就就是变量作用域.(名字放在什么地方了) 全局变量拥有全局作用域,在js代码的任何地方都是有定义的.(这个名字很响亮) 在函数体内声明的变量在函数体内有效,他们是局部变量,函数参数也是局部变量他们只在函数体内有定义.(里层的能拿到的外层的值,外层的拿不到里层的

js的作用域与作用域链

JavaScript的作用域和作用域链.在初学JavaScript时,觉得它就和其他语言没啥区别,尤其是作用域这块,想当然的以为"全局变量就是在整个程序的任何地方都可以访问,也就是写在函数外的变量,局部变量也就是写在函数内部或循环体内部,出了循环体和函数就不可访问",但是在JavaScript中并不是这么简单,需要去深入的学习. 一. 什么是作用域任何程序语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围.比如C/C++等,都是块级作用域,也就是说在每一个代码块内声明的变

JS详细图解作用域链与闭包

JS详细图解作用域链与闭包 攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路.而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战. 闭包有多重要?如果你是初入前端的朋友,我没有办法直观的告诉你闭包在实际开发中的无处不在,但是我可以告诉你,前端面试,必问闭包.面试官们常常用对闭包的了解程度来判定面试者的基础水平,保守估计,10个前端面试者,至少5个都死在闭包上. 可是为什么,闭包如此重要,还是有那么多人没有搞清楚呢?是因为大家不愿意学习吗?还真不是,

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

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

JS高级(三)--原型链、闭包、作用域、函数的四种调用方式

一.原型链(家族族谱) 概念:JS里面的对象可能会有父对象,父对象还会有父对象,.....祖先 根本:继承 属性:对象中几乎都会有一个__proto__属性,指向他的父对象 意义:可以实现让该对象访问到父对象中相关属性 根对象:Object.prototype var arr=[1,3,5] arr.__proto__:Array.prototype arr.__proto__.__proto__就是找到了根对象 function Animal(){} var cat=new Animal();