深入浅析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代码
Dec 15 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 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
Cannot modify header information错误解决方法
2008/10/08 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php对称加密算法示例
2014/05/07 PHP
PHP实现验证码校验功能
2017/11/16 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
javascript trie前缀树的示例
2018/01/29 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python对象及面向对象技术详解
2016/07/19 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
2014年元旦促销活动方案
2014/02/22 职场文书
营销与策划实训报告
2014/11/05 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
小学生节水倡议书
2015/04/29 职场文书
初中同学会致辞
2015/08/01 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang