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 相关文章推荐
JavaScript 图像动画的小demo
May 23 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
深入详解JS函数的柯里化
Jun 09 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 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
2017/09/22 jQuery
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
英文导游欢迎词
2014/01/11 职场文书
执行总经理岗位职责
2014/02/03 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
爱国主义演讲稿
2014/05/07 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书