你必须知道的Javascript知识点之"深入理解作用域链"的介绍_javascript技巧

示例代码:

复制代码 代码如下:

var xxxVar1 = 1;
 var outer = function(){
    var xxxVar2 = 2;

    var results = [];

    for(var i = 0; i< 3; i++)
    {
       var inner = function(){
          var xxxVar3 = 3;
          return xxxVar3 + xxxVar2 +xxxVar1 + i;
       }
       results .push(inner);
    }

    return results;
 }

 var xxxVar1 = 100;
 var xxxVar2 = 200;
 var xxxVar3 = 300;
 var results = outer();
 results[0]();
 results[1]();
 results[2]();

执行结果

发生了什么事情很多人都可能知道上例的执行结果,但是不是所有人都明白为什么会是这样的结果,包括我自己。名词解释活动对象:一次函数调用开始的时候,javascript解释器会收集函数体中的所有局部变量(以var形式声明的变量),将这些局部变量存储到一个称为“活动对象”的对象里,所有变量都初始为undefined。
代码示例

复制代码 代码如下:

var fun = function(){
    alert(name);
    var name = '段光伟';
 }

当执行这个函数时候时(fun()),函数体还没执行到,当前的活动对象为[{ name: undefined }],因此fun()执行的结果为:

函数的[scope]属性:每个函数在定义的时候(生成函数实例的时候)都会分配一个[scope]属性,这个属性指向的当前的“作用域链”。这个属性开发人员是访问不到的,只有javascript能访问。
作用域链:当函数调用时,javascript引擎会维护一个这次调用的作用域链,这个作用域链条是函数的[scope]指向的作用域链加上函数调用时的活动对象,形式如[ 活动对象, 函数定义时的作用域链条]。
代码示例

复制代码 代码如下:

var a = 1;
 //步骤1:[ { a: 1, outer: undefined } ]

 var outer = function(){
    //步骤3:[ { b: undefined, inner: undefined } ,{ a: 1, outer: function } ]
    var b = 2;
    var inner = function(){
       //步骤5:[ {}, { b: 2, inner: function } ,{ a: 1, outer: function } ]
       return a + b;
    }

    //步骤4:[ { b: 2, inner: function } ,{ a: 1, outer: function } ]
    return inner();
 }

 //步骤2:[ { a: 1, outer: function } ]
 outer();

作用域链规则规则1

javascript一般运行在一定的宿主中,每个宿主都会提供一个“全局对象”,或者叫“全局活动对象”,这个全局对象是所有作用域链的根节点。

规则2

 “取值操作”(如:alert(xxxVar))的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,返回第一个找到的值,如果找不到就抛出异常(ReferenceError: xxxVar is not defined)。

规则3

 “赋值操作”(如:xxxVar = '段光伟')的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,覆盖第一个找到的值,如果找不到就将“xxxVar”添加到全局对象中。

备注“闭包”这个概念就是通过“作用域链”实现的,而C#是通过编译器实现的,.NET并不支持。

时间: 2024-08-29 04:20:21

你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍_javascript技巧的相关文章

你必须知道的Javascript知识点之&amp;quot;单线程事件驱动&amp;quot;的使用_javascript技巧

复制代码 代码如下:  var intervalBody = function(){     console.log('interval'); }  var startInterval = function(){     setInterval(intervalBody,1000); }  var timeoutBody = function(){     console.log('timeout'); }  var startTimeout = function(){     setTimeo

你必须知道的Javascript知识点之&amp;quot;this指针&amp;quot;的应用_javascript技巧

很多人都知道this指针,这篇文章的主要目的是为了培训我们公司的新人.默认的this指针指向规则1this指针默认指向方法调用时为其指定的对象,如:obj.fun(),fun方法体中的this指针指向obj. 复制代码 代码如下: var user = { name: '段光伟' };user.getName = function(){ return this.name; };user.getName();  //返回'段光伟' 复制代码 代码如下: var user = { name: '段光

关于Javascript作用域链的八点总结_javascript技巧

1. JavaScript函数的作用域链分为定义时作用域链和运行时作用域链: 2.函数被定义的时候,它有一个属性[[scope]]标明它的定义作用域链,定义时作用域链[[scope]]遵守这样的规则:一个函数的定义时作用域链[[scope]]总是它所在的外部函数的执行时作用域链: 3.全局函数的定义作用域链只包含window的属性: 4.一个函数的执行时作用域链总是在定义时作用域链的头部压入当前活动对象(它包含this,arguments,参数,局部变量): 5.函数执行时,变量寻址总是从作用域

从零开始学习jQuery(剧场版) 你必须知道的javascript

一.摘要 本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节.适合希望巩固javascript理论知识和基础知识的开发人员阅读. 二.前言 最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟.其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获. 三.Javasc

你必须知道的JavaScript 中字符串连接的性能的一些问题_基础知识

而JavaScript的核心是ECMAScript .与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变. 请考虑下面的代码: 复制代码 代码如下: var str = "hello ";str += "world";实际上,这段代码在幕后执行的步骤如下: 1.创建存储 "hello " 的字符串.2.创建存储 "world" 的字符串.3.创建存储连接结果的字符串.4.把 str 的当前内容复制到结

你必须知道的JavaScript 变量命名规则详解_基础知识

变量命名还应遵守以下某条著名的命名规则: 著名的变量命名规则Camel 标记法首字母是小写的,接下来的字母都以大写字符开头.例如: 复制代码 代码如下: var testValue = 0, secondValue = "hi";Pascal 标记法 首字母是大写的,接下来的字母都以大写字符开头.例如: 复制代码 代码如下: var TestValue = 0, SecondValue = "hi";匈牙利类型标记法 在以 Pascal 标记法命名的变量前附加一个小

在JavaScript中判断整型的N种方法示例介绍_javascript技巧

整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查 你可以使用余数运算(%),将一个数字按1求余,看看余数

JavaScript中的object转换成number或string规则介绍_javascript技巧

在JavaScript程序编写过程中,根据不同的上下文,JS会自动将object转换成number或者string后再处理.这种自动转换的规则如下: object自动转换成string的规则: 1.如果object所属类覆写了toString()方法,则调用该方法.如果toString()调用的返回结果为Primitive(string.number.boolean.undefined.null),则将该Primitive值转换成string后返回. 2.如果object所属类没有覆写toStr

JavaScript中遍历对象的property的3种方法介绍_javascript技巧

在JavaScript中,可以用三种方法来遍历对象的property: 1.for/in.可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property,只有enumerable的property才会被遍历到. 2.Object.keys().可以将对象作为参数传入Object.keys(),Object.keys()语句将返回由所有property名称字符串所组成的数组.Object.keys()语句仅返回对象自身的(Own Prope