资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/关于javascript中的作用域和作用域链

关于javascript中的作用域和作用域链

lcodecorex / 585人阅读

摘要：作用域的类别可以影响到变量的取值，分为词法作用域静态作用域和动态作用域。而，采用的就是词法作用域，或者叫静态作用域。

关于javascript中的作用域和作用域链
我GitHub上的菜鸟仓库地址： 点击跳转查看其他相关文章
文章在我的博客上的地址： 点击跳转

        前面的文章说到， 执行上下文的创建阶段，主要有三个内容：

        1、创建变量对象；2、初始化作用域链；3、确定this的指向。

        在这里，要说一下作用域和作用域链了，先来一个例子：

//全局环境
var a = 10;
function inner(){
    console.log(a);
}
inner();

        在inner函数的执行上下文的执行阶段中，它的VO（变量对象）都没有var a这样的变量声明，所以console的时候，怎样获得a的值呢，就是通过全局环境中的AO（活动对象），因为里面就有a的值（不知道什么是VO和AO，一定要先看一下我前面的文章：关于javascript中的变量对象和活动对象）。

        其实，作用域这个东西，可以理解为自身执行上下文中的活动对象（AO）可以被访问的区域，说的有点拗口，其实看一下我前面的文章（关于javascript中的变量对象和活动对象），就可以知道，其实我们执行函数的时候，用到的变量值，都是从AO上面取到的，如果自己的执行上下文中的AO没有对应要用的值（例如上面例子中的a），那就要往上一层的执行上下文中的AO中找这个值，如果上一层还没有，就要再往上一层的执行上下文中的AO去找，而这个一层一层的链接关系，就是所谓的作用域链。（这里说到的上一层，其实就是执行上下文栈中压着的下一层执行上下文，不理解可以先看我前面的文章：关于javascript中的从堆栈内存到执行上下文）

        说到作用域这个东西，我觉得不少人都被它坑过，举个例子：

//先声明变量jj并赋值为10
var jj = 10;

//再声明一个函数what
function what(){
    console.log(jj);
}

//执行what函数
what();

        相信大家都非常清楚打印结果了，就和上面例子一样，就是10。那如果这样呢：

//先声明变量jj并赋值为10
var jj = 10;

//再声明一个函数what
function what(){
    console.log(jj);
    var jj = 20;
    console.log(jj);
}

//执行what函数
what();

        是不是会说打印结果是10和20呢？那就错了，实际打印结果是undefined和20。为什么呢？不是一开始打印时候前面没有变量jj，然后向上找到等于10，后面就改变它的值，然后输入20吗？

        这样就没有真正理解javascript的词法作用域的概念。作用域的类别可以影响到变量的取值，分为词法作用域（静态作用域）和动态作用域。

        它们的区别是：对于词法作用域，函数的作用域在函数定义的时候就已经确定了，而动态作用域不同，在函数调用的时候才确定的。

        而javascript，采用的就是词法作用域，或者叫静态作用域。

        所以在what函数中声明了一个var jj = 20，就将里面有jj这个变量名的取值，框住了在这个函数里面了，或者可以说，调用what函数的时候，你用var这样的字眼声明了jj这个变量，就会在执行上下文创建时候的变量对象VO中挂上了属性jj=undefined，所以一开始就将jj打印出来，由于还没有赋值，所以打印出undefined了，然后后面赋值了，就打印出了20了。

        如果你想按照你一开始想的那样打印出10和20，可以将what函数里面的var jj = 20改为jj = 20，去掉var，这样就相当于what函数里面没有声明变量jj，而是向上找到jj，并将它打印，然后更改jj的值，再打印，实际上，这种做法会污染全局变量，因为你在what函数里面将jj这个全局变量的值改为20了。

        好了，如果你明白因为用var声明了变量，导致在自身的执行上下文中寻找jj的值而不是向上寻找，但是你不明白为什么var jj 明明在console之后才声明的，为什么会受到它影响呢？这里，就要再说一个概念，叫做变量提升。

        变量提升，就是解释器会将函数声明和变量声明提升到方法体的最顶部，函数声明比变量声明提得更高。

        其实很容易理解变量提升，还是回去看一下我前面的文章（关于javascript中的变量对象和活动对象）就知道了，执行上下文在创建的时候就会创建变量对象，而变量对象的创建顺序为：形参、函数声明、变量声明（用var 声明的），所以在你的代码执行阶段（执行上下文的执行阶段）之前，它已经创建了变量对象了，所以相对其他的执行代码来说，这就是所谓的变量提升。

        说回去最初的执行what函数的地方，其实我这样写也是可以的：

//先声明变量jj并赋值为10
var jj = 10;

//执行what函数
what();

//现在才声明一个函数what
function what(){
    console.log(jj);
}

        为什么呢？因为变量提升，解释器会将声明的what这个函数提到顶部，所以你上面执行what这个函数，实际解释器已经将what函数提升上去了。

        除了函数声明，变量声明也一样。

        回到前面的例子，我在what函数内声明并初始化var jj = 20 可以看成两个步骤，第一个步骤，声明变量var jj ，第二个步骤，初始化变量，jj = 20，所以上面的函数可以写成这样：

function what(){
    console.log(jj);
    var jj ;
    jj = 20;
    console.log(jj);
}

        当然了，这里面声明的jj变量，也会变量提升，所以会变成这样：

function what(){
    var jj ;
    console.log(jj);
    jj = 20;
    console.log(jj);
}

        再结合回到前面一起：

//先声明变量jj并赋值为10
var jj = 10;

//再声明一个函数what
function what(){
    var jj ;
    console.log(jj);
    jj = 20;
    console.log(jj);
}

//执行what函数
what();

        是不是很好地理解了打印结果就是undefined 和 20了，这里要注意的是，初始化变量是不会提升的，所以jj = 20还是留在了原位。

        换个方式说一下变量提升，下面两个函数写法有什么不同的地方：

//写法一
var claim = function(){
    console.log("i am first");
};

//写法二
function claim(){
    console.log("i am first");
}

        举一个例子就很清楚了：

//写法一
var claim = function(){
    console.log("i am first");
};

claim();//打印结果为i am first

var claim = function(){
    console.log("i am second");
};

claim();//打印结果为i am second
//写法二
function claim (){
    console.log("i am first");
};

claim();//打印结果为i am second

function claim(){
    console.log("i am second");
};

claim();//打印结果为i am second

        好了，理解了上面两种打印结果就知道了变量提升了。

        其实作用域前面已经说得很清楚了，就是执行上下文的AO（活动对象）可被访问的范围，而作用域链可以类比原型链，自己如果没有，就一级一级往上找，这个一级一级，就是执行上下文栈中压着的下一个执行上下文（再回顾前面文章：关于javascript中的从堆栈内存到执行上下文），那就很容易理解明白了。

云服务器 GPU云服务器 javascript作用域链 作用域链 js作用域和上下文 python中的作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84320.html

相关文章

  • 深入理解JavaScript作用域和作用域链

    前言 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！ 想阅读更多优质文章请猛戳GitHub博客 作用域(Scope) 1.什么是作用域 作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见...

    baiy 评论0 收藏0

  • 深入理解JavaScript作用域和作用域链

    前言 JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说，作用域的概念并不是很容易理解，本文我会尽我所能用最简单的方式来解释作用域和作用域链，希望大家有所收获！ 想阅读更多优质文章请猛戳GitHub博客 作用域(Scope) 1.什么是作用域 作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见...

    ytwman 评论0 收藏0

  • 深入javascript——作用域和闭包

    摘要：注意由于闭包会额外的附带函数的作用域内部匿名函数携带外部函数的作用域，因此，闭包会比其它函数多占用些内存空间，过度的使用可能会导致内存占用的增加。 作用域和作用域链是javascript中非常重要的特性，对于他们的理解直接关系到对于整个javascript体系的理解，而闭包又是对作用域的延伸，也是在实际开发中经常使用的一个特性，实际上，不仅仅是javascript，在很多语言中都...

    oogh 评论0 收藏0

  • javascript中关于作用域和闭包

    摘要：在代码执行时，对应的作用域链常常是保持静态的。当语句执行完毕后，会把作用域链恢复到原始状态。在全局作用域中创建的函数，其作用域链会自动成为全局作用域中的一员。 列表项目 前言 学习了javascript已经很久了，关于这个语言中的这两个特性也是早已耳熟能详，但是在实际的使用的过程中或者是遇到相关的问题的时候，还是不能很好的解决。因此我觉得很有必要深入的学习并且记录这个问题，以便在今后的...

    zacklee 评论0 收藏0

  • Javascript 变量、作用域和内存问题

    摘要：保存在堆内存中。因此改变一方，另一方也会发生相应的改变。作用域链当代码在一个环境中执行时，会创建变量对象的一个作用域链，以保证对执行环境有权访问的所有变量和函数的有序访问。 基本类型和引用类型的值 基本类型值：简单的数据段 ，五种基本类型（Number Boolean String Null Undefined）的值都是基本类型值，基本类型的值在内存中大小固定，因此保存在栈内存中。引用...

    JohnLui 评论0 收藏0

发表评论

登陆后可评论

0条评论

lcodecorex

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<