深入浅析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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
Vue父子之间值传递的实例教程
Jul 02 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python3.7 的新特性详解
2019/07/25 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
大专生自荐信
2013/10/04 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
医院合作协议书
2014/08/19 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Java使用jmeter进行压力测试
2021/07/09 Java/Android