javascript基础进阶_深入剖析执行环境及作用域链


Posted in Javascript onSeptember 05, 2017

执行环境

执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象。

变量对象

环境中定义的所有变量和函数都保存在这个对象中。

全局执行环境

全局执行环境是最外围的一个执行环境。在web浏览器中,全局执行环境被认为是Window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的。

每个函数都有自己的执行环境。

作用域链

当代码在一个环境中执行,会创建变量对象的一个作用域链。

用途:保证对执行环境有权访问的所有变量和函数有序访问。

特点:作用域链的前端始终是当前执行的代码所在的环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象。活动对象最开始只包含arguments对象。作用域的下一个变量对象来自包含环境,而再下个来自下一个包含环境。

var color ="blue";
function changeColor() {
 
 var anotherColor ="red";
 
 function swapColors() {
  var tempColor = anotherColor;
  anotherColor = color;
  color = tempColor;
 }

 swapColors();
}

changeColor();

如图表示执行环境,内部环境可以通过作用域链访问外部环境,但是外部环境不能访问内部环境中的变量和函数。每个环境都可以向上搜索作用域链,以查询变量和函数;但是不能向下搜索。

javascript基础进阶_深入剖析执行环境及作用域链

没有块级作用域 声明变量

使用var声明的变量会自动添加到最接近的环境中。如果省略var关键字,即会添加到全局环境中。

function add(num1,num2) {

 var sum = num1+num2;

 return sum;

}

var result= add(10,10)

console.log(sum)

javascript基础进阶_深入剖析执行环境及作用域链

sum is not defined

function add(num1,num2) {

 sum = num1+num2;

 return sum;

}

var result= add(10,10)

console.log(sum)

javascript基础进阶_深入剖析执行环境及作用域链

查询标识符

搜索过程从作用域链的前端开始,向上逐级查询与给定名字匹配的标识符,找到即终止搜索。即如果局部环境中存在着同名标识符,就不会使用位于父环境中的标志符。

var color ="red";

function getColor() {



 return color;

}



console.log(getColor())

javascript基础进阶_深入剖析执行环境及作用域链

var color ="red";

function getColor() {

 var color="green";

 return color;

}



console.log(getColor())

javascript基础进阶_深入剖析执行环境及作用域链

参考:《javascript高级程序设计(第三版)》

以上这篇javascript基础进阶_深入剖析执行环境及作用域链就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 #Javascript
对于Javascript 执行上下文的全面了解
Sep 05 #Javascript
JS一个简单的注册页面实例
Sep 05 #Javascript
基于react组件之间的参数传递(详解)
Sep 05 #Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 #Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 #Javascript
JS沙箱模式实例分析
Sep 04 #Javascript
You might like
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python中为什么要用self探讨
2015/04/14 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python实现句子翻译功能
2017/11/14 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python flask框架post接口调用示例
2019/07/03 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
思想专业自荐信范文
2013/12/25 职场文书
学校元旦晚会方案
2014/02/19 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
培训简讯范文
2015/07/20 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Java基于字符界面的简易收银台
2021/06/26 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript