JavaScript执行环境及作用域链实例分析


Posted in Javascript onAugust 01, 2018

本文实例讲述了JavaScript执行环境及作用域链。分享给大家供大家参考,具体如下:

1、执行环境:

每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。

执行环境包括全局执行环境和函数执行环境。

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

函数执行环境是指函数的执行环境,当执行流进入一个函数时,函数的环境会被推入一个环境栈中,在函数执行之后,栈将其环境弹出,将控制权返回到之前的执行环境。

2、作用域链:

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

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

作用域链的前端,始终是当前执行的代码所在环境的变量对象,若此环境是函数,则将其活动对象作为变量对象。活动对象最开始时只包含一个变量,即arguments对象(该对象在全局环境中是不存在的),作用域链的下一个对象来自包含环境,再下一个变量则来自下一个包含环境,这样一直延续到全局执行环境。全局执行环境的变量对象始终是作用域链的最后一个对象。

每个环境都可以向上搜索作用域链,以查询变量和函数名,终点就是搜索到全局执行环境,但是任何环境不能通过向下搜索作用域链而进入另一个执行环境。内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境的任何变量和函数。

3、延长作用域链:

虽然执行环境只有两种:全局执行环境和函数执行环境,但是可以有方法延长作用域链,因为有些语句可以在作用域链的前端临时增加一个变量对象,该变量对象会在代码执行后被移除。

当执行流进入下列语句时,作用域链会延长:

(1)try-catch语句的catch块:catch语句会创建一个新的变量对象,其中包含的是被抛出的错误对象的声明,该变量对象只在catch块内部有效,在catch块外部无法访问到。

(2)with语句:with语句会将指定的对象添加到作用域链中。

eg1:

function setUrl(){
  var parameter="?name=Alice";
  var url = href + parameter;
  return url;
}
var result = setUrl();
alert(result);//报错:href is no defined

eg2:

function setUrl(){
  var parameter="?name=Alice";
 with(location) {
 var url = href + parameter;
 }
  return url;
}
var result = setUrl();
alert(result);//http://localhost/text.html?name=Alice

with语句接收的是location对象,因此其变量对象中包含了location对象的所有属性和方法,location对象被添加到了作用域链的前端。

eg3:

var obj = {href : "http://www.baidu.com"};
var href = "http://www.sina.cn";
function setUrl(){
  var parameter="?name=Alice";
 with(obj) {
 href = "http://www.google.cn";
 var url = href + parameter;
 }
  return url;
}
var result = setUrl();
alert(result);//http://www.google.cn?name=Alice
alert(href);//http://www.sina.cn

with语句中并没有更改变量href的值,而是更改了obj对象的 href 属性。

也就是说,with中首先查找的是相关对象的属性,如果没有,才改变变量的值。

eg4:

var obj = {};
var href = "http://www.sina.cn";
function setUrl(){
  var parameter="?name=Alice";
 with(obj) {
 href = "http://www.google.cn";
 var url = href + parameter;
 }
  return url;
}
var result = setUrl();
alert(result);//http://www.google.cn?name=Alice
alert(href);//http://www.google.cn

去掉obj对象的 href 属性后,才更改变量href的值。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
js数组操作学习总结
Nov 04 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
js实现文本框选中的方法
May 26 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 #Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 #Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 #Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 #Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 #Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 #Javascript
Node.js log4js日志管理详解
Jul 31 #Javascript
You might like
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
mailto的使用技巧分享
2012/12/21 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python实现粒子群算法的示例
2021/02/14 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
竞选班长演讲稿
2013/12/30 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
简历自荐信范文
2015/03/09 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python