通过JS运行机制的角度说说作用域


Posted in Javascript onMarch 12, 2019

前言

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围。JS中的作用域、闭包、this机制和原型往往是最难理解的概念之一。笔者将通过几篇文章和大家谈谈自己的理解,希望对大家的学习有一些帮助。如果有什么理解偏差的地方,希望大家可以评论指出,相互学习。

有过一定编程经验的同学,一定不会对作用域感到陌生,在C/C++/Java中等语言中,作用域从来没有JavaScript中的作用域那样令人困惑以致于成为一个大多数JS开发者都难以跨过的门槛。

作用域形成机制

JS中存在的三种作用域类型:全局作用域,函数作用域和ES6中新加入的块级作用域。

var a = 1;

function foo() {
 var b = 2;
 console.log(a);		// 1
 console.log(b);		// 2
 console.log(c);		// ReferenceError
}

function foo1() {
 var c = 3;
 console.log(a);		// 1
 console.log(b);		// ReferenceError
 console.log(c);		// 3
}

console.log(a);			// 1
console.log(b); 		// ReferenceError
console.log(c);			// ReferenceError
foo();
foo1();

从上面的例子可以看到,每个函数内部形成了属于自己的作用域,函数内部声明的变量仅仅在定义的函数内部才可以访问。全局作用域中可以访问到的有a,foo,foo作用域中可以访问到的有b,foo,a,foo1的作用域中可以访问到的有c,foo,a。因为foo的作用域嵌套在全局作用域之中,当console.log(a);执行的时候,JS在foo的作用域查找不到a,就会到它的上层(这里是foo的上层直接就是全局作用域)查找,发现这里声明了一个a,将它的值打印了出来。这种从里到外的查找就是根据作用域链查找。foo1和foo的作用域没有嵌套关系,所以相互隔离。

如果函数中使用了未声明的变量怎么办?

function foo() {
	a = 2;
}

foo();
console.log(a);		// 2

JS引擎在foo中查找不到a的声明,便会到它的上层(这里是全局作用域中)查找,这个时候还是没有查找到a的声明,在非严格模式下,JS引擎会在全局中自动声明一个a,这个时候,未经声明的变量a实际上泄漏到了全局作用域中。

只有使用未声明的变量才会出现变量泄漏的问题么,其实,不仅仅这种写法会出现,更常见的也会出现在for循环和if代码块中也会出现。

for(var i=1;i<10;i++) {
 console.log(i);
}

console.log(i);		// 10,	这里的i泄漏到了全局作用域中

if(true) {
 var a = 2;
}

console.log(a);		// 2, 这里的a也泄漏到了全局变量之中

如果你学习过C语言系列的语法,往往很容易感到困惑,if和for居然没有作用域,这真是太奇怪了。这一切的问题的根源,都是由于ES6之前没有块级作用域导致的。所以可想而知,if包裹的代码块,同样里面的声明也是暴露出来的~

一切问题的解决直到ES6中引入了let和const得以完美的解决。使用let和const,将可以使用块级作用域,使得声明变量泄漏的问题得以解决。

for(let i=1;i<10;i++) {
 console.log(i);
}

console.log(i);		// ReferenceError

if(true) {
 let a = 2;
}

console.log(a);		// ReferenceError

声明提升机制

对于在JS中声明的不论是变量还是函数,基本上都会存在着变量声明提升的行为,将变量的声明提升到所在作用域的顶端。ES6中的let和const不会,在未声明之前都不可以使用。

看看下面的代码

console.log(a);				// undefined
console.log(b);				// undefined
console.log(foo);			// Function
console.log(foo2);		// ReferenceError

function foo () {
 console.log('声明提升了哈');
}

var a = 1;

var b = function foo2() {
 console.log('不同的函数声明方式提升的结果也不一样哦');
};

JS 引擎解释这段代码之前首先对代码中所有的变量进行了声明的提升,函数声明的提升的优先级是高于普通变量的,函数声明会整个提升到所在作用域的顶端(但是以函数表达式方式声明的函数不会),代码实际上是下面这个样子:

function foo () {
 console.log('声明提升了哈');
}
var a;
var b;
var foo2;

console.log(a);
console.log(b);
console.log(foo);
console.log(foo2);

b = function foo2 () {
 console.log('不同的函数声明方式提升的结果也不一样哦');
}

静态作用域机制(词法作用域)

关于JS中的作用域,需要明确的一点就是,JS中只存在静态作用域(词法作用域)。静态作用域是什么意思呢?意思就是它的作用域在你写下代码的时候就已经确定了,和函数的调用顺序无关,了解这一点。就可以对一些常见的现象进行解释。

var a = 2;
function foo() {
 console.log(a);
}

var obj = {
 a: 3,
 foo: foo
}

obj.foo();		// 2

foo中的a在代码写完时就确认了,指向了全局作用域中的a,一旦确定就无法更改了。同理,下面的代码

function foo() {
 console.log(b);			// ReferenceError
}

function foo1 () {
 var b = 1;
 foo();
}

foo1();

这里,JS引擎在全局作用域中查找不到b,所以会抛出一个异常。所以可以明确的道理是,foo的作用域和foo1的作用域仍然是相互独立的,不会因为调用时候的顺序而更改作用域的嵌套顺序,静态作用域在代码书写时就已经确定无法更改了,明白这一点在分析JS代码的时候尤为重要。

坑外话

变量的遮蔽效应

在函数中定义的变量会遮蔽上层作用域中同名的变量,两个变量互不影响。

var a = 1;
function foo() {
 var a = 2;
 console.log(a);	// 2
}
console.log(a);		// 1

Try-Catch 中的块级作用域

try-catch的catch中会创建一个块级作用域,该作用域内变量的表现同样遵守变量的声明提升规则。

try {
 throw undefined;
}catch(e) {
 a = 1;
 console.log(e);		// undefined
}

console.log(a);			// 1,	变量提升规则
console.log(e);			// ReferenceError,catch的块作用域中定义的变量

隐式声明

以参数形式传入的变量在函数内部实际上存在的隐式的声明,使用时不算作未声明的变量。

function foo(a) {
 a = 1;
 console.log(a);
}

foo();						// 1
console.log(a);		// ReferenceError

本来想一篇文章写完作用域和闭包的,想例子实在是累,就拆作两篇吧,逃~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用jQuery实现可以编辑的表格
May 26 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 #Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 #Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 #Javascript
javascript中数组的常用算法深入分析
Mar 12 #Javascript
详解javascript 变量提升(Hoisting)
Mar 12 #Javascript
NestJs 静态目录配置详解
Mar 12 #Javascript
You might like
用文本文件制作留言板提示(上)
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jquery中.add()的使用分析
2013/04/26 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python自动化生成IOS的图标
2018/11/13 Python
python实现对输入的密文加密
2019/03/20 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
三八妇女节活动主持词
2014/03/17 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
筑梦中国心得体会
2016/01/18 职场文书
初一语文教学反思
2016/03/03 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js