深入浅析JavaScript中with语句的理解


Posted in Javascript onMay 12, 2016

JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象.

with语句的作用是暂时改变作用域链、减少的重复输入。

其语法结构为:

with(object){ 
//statements 
}

举一个实际例子吧:

with(document.forms[]){ 
name.value = "lee king"; 
address.value = "Peking"; 
zipcode.value = ""; 
}

与之对应的传统的写法是:

document.forms[].name.value = "lee king"; 
document.forms[].address.value = "Peking"; 
document.forms[].zipcode.value = "";

可以看出with语句的简洁明了,不过在代码的世界里是很难找到真正的完美。

js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化。为了兼顾速度与代码量可以找到一个比较折衷的方案:

var form = document.forms[]; 
form.name.value = "lee king"; 
form.address.value = "Peking"; 
form.zipcode.value = "";

所以在以后的高效代码开发中我们应该尽可能的避免使用with语句。

经过测试:

var a = 123;
var b = {a : 321};
with(b){
console.log(a); // 321
}
var a = 123;
var b = {}; 这里去掉b中的a属性
with(b){
console.log(a); // 123
}从作用域链来分析

在javascript中,函数也是对象,实际上,javascript中的一切都是对象。函数内部有一个只给javascript引擎访问的内部属性是[[scope]],该属性包含了函数创建时的作用域中对象的集合,这个集合就叫做作用域链。

比如下面代码:

function add(num1,num2) { 
var sum = num1 + num2; 
return sum; 
}

在函数创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图:

深入浅析JavaScript中with语句的理解

当函数被执行时,会创建一个活动对象,该对象包含了函数所有局部变量、命名参数以及this,然后该对象会被推入作用域链的前端,当函数执行完毕,该对象也随之销毁。

可以看到,全局变量会被活动对象推到作用域链的最后端,这也就是为什么全局变量访问速度慢的原因!

with

一般情况下,作用域链只会被with和catch语句影响。当使创建用with的时候,函数会创建一个新的活动对象,推到最前端,该对象就是with的对象。这就意味着所有的局部变量都处于第二个作用域链对象中去了,这也就是为什么要避免使用with的原因。

以上所述是小编给大家介绍的JavaScript中with语句的理解,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站!

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
three.js 入门案例详解
Jan 23 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 #Javascript
使用bootstrap3开发响应式网站
May 12 #Javascript
You might like
php 伪静态之IIS篇
2014/06/02 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
商务专员岗位职责
2013/11/23 职场文书
高一学生评语大全
2014/04/25 职场文书
研发工程师岗位职责
2014/04/28 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
素质拓展训练感想
2015/08/07 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
SQL Server中的游标介绍
2022/05/20 SQL Server