深入浅析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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
基于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学习的路线图
2013/07/10 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python OpenCV实现视频分帧
2019/06/01 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python datetime中strptime用法详解
2019/08/29 Python
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
JVM之方法返回地址详解
2022/02/28 Java/Android