深入浅析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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
JS随机密码生成算法
Sep 23 Javascript
Javascript实现秒表计时游戏
May 27 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
风格模板初级不完全修改教程
2006/10/09 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
动态创建类实例代码
2009/10/07 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python字典的常用方法总结
2019/07/31 Python
Python循环实现n的全排列功能
2019/09/16 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
python脚本定时发送邮件
2020/12/22 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
总结表彰大会主持词
2014/03/26 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
教师考核评语大全
2014/12/31 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
学生犯错保证书
2015/05/09 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python