Javascript中的作用域和上下文深入理解
概述
Javascript中的作用域和上下文的实现是Javascript语言独有的特性，从某种程度上来说，Javascript语言是十分灵活的。Javascript中的函数可以采用各种各样的上下文，作用域也可以被封装和保存。正是由于这些特性，Javascript中也提供了很多很有用的设计模式。然而，作用域和上下文也是Javascript程序员在开发中经常迷惑的地方。
下面会向大家介绍Javascript中作用域和上下文的概念，以及它们的不同。
作用域 VS 上下文
首先要说明的很重要的一点是作用域和上下文并不是同一个概念，它们指代的并不是同一个东西。作为一个前端的菜逼，经常会看到一些文章把这两个概念弄混，结果有些东西越看越不明白。这两个概念貌似被混淆了很长一段时间了。因此，查了很多资料，简单说明下这两个概念。:stuck_out_tongue_closed_eyes:
在Javascript中，当一个函数被调用时都会有一个作用域和上下文和这个函数绑定在一起。从根本上来说，作用域是基于函数的而上下文是基于对象的。换句话说，作用域适用于函数被调用时函数中变量的访问权限。上下文通常是指“this”关键字的值，“this”是拥有当前执行代码的对象的引用。
变量作用域
变量可以被定义在局域或全局作用域中，分别称为局部变量和全局变量。全局变量是指在函数体外声明的变量，在程序的任何地方都可以访问全局变量。局部变量是指在函数体内定义的变量，它仅可以在函数体内或者嵌套的函数内被访问，并且不能在函数外部被访问。
Javascript目前并不支持块级作用域(在if、switch、for等语句中定义的变量)。这意味着在块内定义的变量，在块外也可以访问。但是，在ES6中，我们可以使用“let”关键字定义块级作用域。
关于作用域的内容，大家可以查下别的资料，这部分内容相对简单些。
“this”上下文
上下文(context)通常取决于函数被调用的方式。当函数作为对象的方法被调用时，“this”指代的是调用该函数的对象。
var obj={
foo:function (){
console.log(this === obj);
}
};
obj.foo(); //输出true
同样，当我们使用“new”关键字创建新对象时，this引用的是新创建的对象。
function foo(){
console.log(this);
}
foo(); //输出window
var obj=new foo(); //输出 foo {}
有一点需要注意的是，当全局作用域中的函数被被调用时，this引用的是全局对象，在浏览器环境中指的就是window。但是，如果在严格模式下运行代码时，“this”被设置为“undefined”
执行上下文(Execution Context)
Javascript是单线程的语言，这也就是说Javascript在浏览器中运行时，一次只能做一件事情，其他的事情将被方法队列中，等待被处理。
1.当Javascript代码文件被浏览器载入后，默认最新进入的是一个全局的执行上下文。当在全局上下文中调用一个函数时，程序留就进入该被调用函数内，此时Javascript引擎就会为该函数创建一个新的执行上下文，并且将其压入到执行上下文堆栈的顶部。浏览器总是执行当前在堆栈顶部的上下文，一旦执行完毕，该上下文就会从堆栈顶部被弹出，然后，进入其下的上下文执行代码。这样，堆栈中的上下文就会被依次执行并且弹出堆栈，直到回到全局的上下文。
2.一个执行上下文可以被分为两个阶段：创建阶段和执行阶段。在创建阶段，javascript解释器首先会创建一个变量对象(也成为“活动对象”，activation object)。活动对象由变量，函数声明和参数组成。在这个阶段，函数的作用域链被初始化，this引用的对象也被确定。接下来就是执行阶段，在这个阶段，代码被解释并执行。
在Javascript代码中，可以有任意多个函数上下文，我们已经知道，当函数被调用时，Javascript解释器就会创建一个新的上下文，同时会创建一个私有的作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问。
3.通过上面的解释，我们对函数的“执行上下文”有了一个基本的概念，但是这里也是大家最容易迷惑的一个地方。Javascript中的“执行上下文”主要是指作用域，而不是上面第四小节中指的“this上下文”。类似的容易混淆的概念在Javascript中还有很多，但是我们只要弄清楚了每个概念所指代的具体对象，就不会再迷惑，因此，这里也希望大家能够真正的区分开“执行上下文”和“this上下文”。
简单的一句话概括来说，执行上下文是与作用域相关的概念，虽然这样说可能不太严谨。
作用域链
对每一个执行上下文来说，都有一个作用域连跟它绑定在一起。作用域链包含了执行上下文堆栈中的执行上下文活动对象(activation object，听起来有点绕口)。作用域链决定了变量的访问和标识符的解析。
代码示例：
function first(){
second();
function second(){
third();
function third(){
fourth();
function fourth(){
//代码
}
}
}
}
first();
执行上面的代码，嵌套的函数都会被执行。就上面的代码来说，也会形成一个作用域链，作用域链从顶部到底部的顺序为：fourth, third, second, first, global。函数fourth可以访问全局作用域中的变量，并且可以访问函数third, second, first中定义的任何变量。
有一点需要注意的是，在函数体内，局部变量的优先级高于同名的全局变量。如果在函数内声明的局部变量或函数参数中带有的变量和全局变量重名，那么全局变量就被局部变量所覆盖。
简单来说，每次我们尝试访问一个变量时，程序都会在当前函数作用域内查找变量，如果找不到就沿着作用域链到该函数的上层去查找，直到找到该变量为止，如果找不到则返回undefined。
总结
这篇文章介绍了javascript中上下文和作用域的相关概念，javascript中还有几个比较重要的概念，如闭包等，这些在以后自己弄明白了会写成文章～～
相关文章
下面小编就为大家带来一篇JS字符串false转boolean的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
js学习笔记之class类、super和extends关键词
es6提供了一个新语法就是class,下面这篇文章主要给大家介绍了关于js学习笔记之class类、super和extends关键词的相关资料,需要的朋友可以参考下2021-08-08
BMI指数计算器相信大家都用过，那用JavaScript怎么实现呢？其实很简单，这篇文章给出了实例代码，有需要的可以参考学习。2016-08-08
微信小程序用户授权获取手机号（getPhoneNumber）
这篇文章主要给大家介绍了关于微信小程序用户授权获取手机号的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
Canvas是HTML5新增元素,用于绘制图形、动画等视觉效果,简单添加Canvas元素和JavaScript即可绘制图形和文本,包括线条、矩形、圆形等,Canvas优势在于高性能和兼容性,适用于复杂交互效果,需要的朋友可以参考下2024-11-11
本篇文章主要介绍了bootstrap Table插件使用demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
利用JavaScript在网页实现八数码启发式A*算法动画效果
这篇文章主要介绍了利用JavaScript在网页实现八数码启发式A*算法动画效果,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JS实现的走迷宫小游戏,涉及javascript键盘事件响应及页面元素动态变换相关操作技巧,需要的朋友可以参考下2017-07-07
这篇文章主要为大家详细介绍了微信小程序实现购物车页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论