通过函数作用域和块级作用域看javascript的作用域链


Posted in Javascript onAugust 05, 2018

在ES6之前,javascript只有全局作用域和函数作用域。所谓作用域就是一个变量定义并能够被访问到的范围。也就是说如果一个变量定义在全局(window)上,那么在任何地方都能访问到这个变量,如果这个变量定义在函数内部,那么就只能在函数内部访问到这个变量。

全局作用域只要页面没关闭就会一直存在,而函数作用域只有在函数执行的时候才存在,执行完就销毁。且每次执行函数都会创建一个新的作用域。

那么什么是作用域链呢?
在了解作用域链之前,我们先了解一个执行期上下文的概念。

执行期上下文:当函数执行时,会创建一个称为执行期上下文的内部对象(即AO或GO),一个执行期上下文定义了一个函数的执行环境,函数每次执行时对应的执行期上下文都是独一无二的,所以每次调用一个函数都会创建一个新的执行期上下文,当函数执行完毕,所产生的执行期上下文被销毁。

作用域链就是函数中[[scope]]属性所存储的执行期上下文对象的集合,这个集合呈链式链接,我们把这种链式链接叫做作用域链。

作用域链更像是一种包含的关系。比如说函数A内部定义了一个函数B,所以B的定义是依赖于A的,也就是说B在A的内部,那么B中就可以访问A的中的变量和方法。这种一层一层向上依赖的关系就构成了作用域链。

为了更好理解,我们直接看例子。

var name = 'xiaoyu';
function fn1() {};
function fn2() {
 var num = 10;
 function fn3() {
  var num1 = 10;
  console.log(num);
 };
 return fn3;
}
var fn4 = fn2();

通过函数作用域和块级作用域看javascript的作用域链

在上个例子我们知道,fn2执行的时候返回fn3,产生了闭包。但是一个函数执行然后返回另一个函数都会产生闭包嘛?我们来看一下。

var name = 'xiaoyu';
function fn1() {};
function fn2() {
 var num = 10;
 function fn3() {//fn3函数没有依赖fn2函数内的变量
  var num1 = 10;
  console.log(num1);
 };
 return fn3;
}
var fn4 = fn2();

通过函数作用域和块级作用域看javascript的作用域链

了解了作用域链之后,我们来看一个小例子,巩固一下。

var age = 10;
var obj = {
 age: 12,
 test: function() {
  console.log(age);
  console.log(obj.age);
  console.log(this.age);
 }
}
obj.test();

console.log(this.age)打印出12不难理解,但是为什么console.log(age)不也应该打印出12嘛。

我们说test执行时首先会在自己的作用域内查看有没有age变量,然后再沿着作用域链往上到全局作用域查找age变量,全局作用域下有age变量和data变量。所以console.log(age)打印出的10,如果要打印出12则需要访问obj.age。

ES6的块级作用域

在ES6之后,通过let和const引入了块级作用域。即通过let和const声明的变量只在声明所在的块级作用域内有效,并且let声明的变量虽然属于全局变量,但不再属于全局对象window。

我们通过一段代码来看一下引入块级作用域后,函数的作用域链的变化。

var age = 10;
let obj = {
 age: 12,
 test: function() {
   console.log(age);
   console.log(obj.age);
   console.log(this.age);
 }
}
obj.test();

通过函数作用域和块级作用域看javascript的作用域链

Javascript 相关文章推荐
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
JS FormData对象使用方法实例详解
Feb 12 Javascript
vue实现简单的MVVM框架
Aug 05 #Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 #Javascript
详解Require.js与Sea.js的区别
Aug 05 #Javascript
vue中关闭eslint的方法分析
Aug 04 #Javascript
详解Vue取消eslint语法限制
Aug 04 #Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 #Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 #Javascript
You might like
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python实现感知器
2017/12/19 Python
Python使用wxPython实现计算器
2018/01/30 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
数据管理员的自我评价分享
2013/11/15 职场文书
简单的辞职信范文
2014/01/18 职场文书
家长会主持词
2014/03/26 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书