首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS 作用域与作用域链详解

Posted in Javascript onApril 07, 2015

（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本身没有的属性。

以上所述就是本文的全部内容了，希望能够对大家学习javascript有所帮助。

JS 作用域与作用域链详解

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
JavaScript实现在页面间传值的方法
Apr 07 #Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 #Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 #Javascript
TypeScript具有的几个不同特质
Apr 07 #Javascript
实现前后端数据交互方法汇总
Apr 07 #Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 #Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 #Javascript
放大器(1) R601SW(1) 矿石收音机(1) 电子管(5) DSP(2) 车机(1) 修复(2) ETON(1) 接收机(2) E1-XM(1)
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP中PDO的错误处理
2011/09/04 PHP
php目录操作实例代码
2014/02/21 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
原生js实现移动小球（碰撞检测）
2020/12/17 Javascript
python妹子图简单爬虫实例
2015/07/07 Python
带你认识Django
2019/01/15 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
python tornado修改log输出方式
2019/11/18 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
python 多进程队列数据处理详解
2019/12/23 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
高三体育教学反思
2014/01/29 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
无线电知识基础入门篇
2022/02/18 无线电