Javascript变量的作用域和作用域链详解

工作这几年，js学的不是很好，正好周末有些闲时间，索性买本《js权威指南》，大名鼎鼎的犀牛书，好好的把js深入的看一看。买过这本书的第一印象就是贼厚，不过后面有一半部分都是参考手册。

一：作用域

　　说起变量第一个要说到的肯定就是作用域，正是因为不熟悉JS的作用域，往往就会把面向对象的作用域张冠李戴，毕竟有些东西总是习惯性的这样，但是并不是每次照搬都是可以的，那么下一个问题就来了，js到底是什么作用域，当然是函数作用域了，我们的浏览器就是一个被实例化的window对象，如果在window下定义一个name字段，那么name字段就具有window这个函数作用域，也就是在window下都是可以访问的，如果在window下定义一个function ctrip，然后里面再定义一个name，那么这个新定义的name只能在ctrip函数下通用，而老的name继续在window下通用，举个例子。

从图中可以看出两点：

1: 在window下定义了一个name，居然还可以在function下定义一个重名的name，这个在C#里面是不可想象的。

2：在JS下就可以做到眼瞎，它只认自己的作用域，所以就出现了第一个"second"，你可能觉得这个没有什么稀奇的地方，这是因为可能你还没有真正理解什么是函数作用域，解析器在执行ctrip的时候，第一件事情就是寻找ctrip下的所有局部变量，然后再执行后续语句，既然是先寻找，那么var name="second"这条语句定义在ctrip中任何位置都是可以的，下面我们把语句调换过来。

可以看到在ctrip函数下，第一个console.log输出的是undefined，这个结果可以证实，确实做了第一件事情是收集到了name这个局部变量，可能有人说为什么没有变成”second“，那是因为初始化操作必须是逐语句执行，所以在ctrip函数中执行console.log(name)时，此时解析器只知道有一个未赋值的变量name，所以就console的时候就是undefined了。

二：作用域链

　　从上面的这个例子中我们也很清楚的知道了，在function中定义的变量只具有function范围内的作用域，同时我们也看到上面这个例子只是一层嵌套，window是个大的function，里面是一个ctrip的function，同样的道理也可以延伸到多层嵌套，比如三层，四层。。。。N层，这些层就形成了一个链式结构。

从图中可以看到，我在ctrip下再定义了一个plane函数，这样的话就有三层了，输出的结果也是我们希望看到的，每层的name只在自己的作用域范围

内生效，但是下面有一个问题来了，有一天我傻逼了，在定义plane的函数时，把 var name="third" 中的var忘记写了，那么这个时候，plane中的

name到底是什么值呢？ 是first还是second呢？

代码如下:

var name="first";
function ctrip(){
  var name="second";
  function plane(){
     name="third";
     console.log(name);
  }
  plane();
  console.log(name);
}
ctrip();
console.log(name);

现在就是考验你是否真的懂了作用域链，仔细想想会发现，当代码执行到plane函数中的name=”third“时，发现plane函数中并没有name这个局部变量，恰好代码又在ctrip这个大函数中，所以解析器就会回溯到ctrip函数中寻找name，发现果然有name，这个时候就把ctrip的name修改成了”third“。

又有一天，我喝多了酒又傻逼了一回，在定义plane函数的时候，把name="third" 错写成了 nam="third"; 丢了一个e，你可以说是酒精的问题，

又不是我代码的问题。那么这个时候解析器该怎么处理呢？同样的道理，在回溯时，发现ctrip没有，再回溯到顶层的window下，发现还是没有，

这个时候解析器做了这样的处理，既然整个链中都没有，你又赋值了，我总不能给你报错，那多尴尬呀，就索性给你在window下隐式的定义一个

nam变量，这个时候nam其实就是全局变量了。我们可以在window顶层console一下nam看看。

好了，关于变量的东西也就这么多了，没什么稀奇的，理解了就没什么意思了。

赞 (0)

相关推荐

  • js 作用域和变量详解

    一.说起变量的提升呢,首先我们先看一段简单的代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var v = 'hello world'; alert(v); </script&

  • 深入理解JS中的变量及作用域、undefined与null

    1.Javascript变量作用域 javascript中,变量主要分为局部变量和全局变量两种,对应的作用域也是局部作用域和全局作用域. 1 局部变量和作用域 局部变量一般在函数体内部声明使用: function func(){ var i=12;//局部变量 ...... } 局部变量的作用域在声明这个变量的函数体范围内使用. 局部变量的声明周期从函数被调用执行开始初始化,在函数调用执行完毕之后被销毁. 2.全局变量和作用域 全局变量一般在函数体外面声明: var i=12;//全局变量 fu

  • Angularjs全局变量被作用域监听的正确姿势

    如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch("xxx",function(newVal,oldVal){ //do something }) 从我最近的一个bug来说说为什么要用第一种方式. 逻辑如图,一开始我使用了 $rootScope.$watch 的写法.因为 angularjs 在 $rootSc

  • JavaScript修改作用域外变量的方法

    1.今天在看JavaScript学习指南的时候做的课后习题,也因此详细的对函数的传入参数进行比较深入的研究. 题目如下: 函数如何才能修改其作用域之外的变量?编写一个函数,由1~5的数字组成的数组作为参数,调用该函数后将把其中的数字项替换为相应的字符串表示形式. 需要注意知识点: 在JavaScript中函数参数的传递,对于基于原始值的参数进行值传递(数字,字符串,布尔值),函数中的修改不会影响实际参数值.而传递给函数的参数而言,对象是一个引用,对其的修改的将会反映在主调程序中.<-但是,会有这

  • 简单谈谈javascript中的变量、作用域和内存问题

    [变量] [1]定义:可变的量,相当于给一个不定的数据起了一个外号.变量是存储信息的容器. [2]特性:js中的变量是松散类型的,可以保存任何类型的数据.它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. [3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=.-=等 var a = 2;//是正确的 var a += 2;//是错误的 var a = 2++;//是错误的,++只能用于变量

  • js函数内变量的作用域分析

    本文实例分析了js函数内变量的作用域.分享给大家供大家参考.具体分析如下: 先看一个函数实例: 复制代码 代码如下: <html> <head> </head> <body> <script type="text/javascript"> var a = 5; var c = 3; function t(){  var a = 6;  var b = 10;  document.write(a+'-----'+b);  doc

  • js变量、作用域及内存详解

    js变量、作用域及内存详解

    基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的. (1)值类型:数值.布尔值.null.undefined. (2)引用类型:对象.数组.函数. 如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间.由于这种值的大小不固定(对象有很多属性和方法),因此不能把他们保存到栈内存中.但内存地址大小是固定的,因此可以将内存地址保存在栈内存中. <script type="

  • JavaScript 变量、作用域及内存

    JS变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已; 由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变; 一 变量及作用域 1.基本类型和引用类型 // JS变量包含两种不同的数据类型的值:基本类型值和引用类型值; // 1.基本类型值:保存在栈内存中的简单数据段;即这种值完全保存在内存中的一个位置; // 基本类型值包含:Undefined|Null|Boolean|Number|String; // 这

  • JS中作用域和变量提升(hoisting)的深入理解

    JS中作用域和变量提升(hoisting)的深入理解

    作用域(Scoping) 对于Javascript初学者来说,一个最迷惑的地方就是作用域:事实上,不光是初学者.我就见过一些有经验的javascript程序员,但他们对scope理解不深.javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全局变量和局部变量,全局变量的作用范围是任何文件和函数访问(当然,对于非变量定

  • 一道关于JavaScript变量作用域的面试题

    小编觉得这道题对理解JavaScript 作用域还是很有帮助的,特此又把自己的解题思路梳理了一遍,希望对其它人有所帮助. 首先看下面试题: var arr = [1, 2, 3]; for (var i = 0, j; j = arr[i++];) { console.log(j); } console.log('---------'); console.log(i); console.log('---------'); console.log(j); console.log('--------

随机推荐