深入浅析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实现自定义风格的滑动条实现代码
Apr 26 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 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错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Python编写单元测试代码实例
2020/09/10 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
晚宴邀请函范文
2014/01/15 职场文书
大学社团活动策划书
2014/01/26 职场文书
综合实践教学反思
2014/01/31 职场文书
个人简历自我评价
2014/02/02 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
家长学校教学计划
2015/01/19 职场文书
好好学习保证书
2015/02/26 职场文书
先进个人自荐书
2015/03/06 职场文书
商务信函英语问候语
2015/11/10 职场文书
诚信高考倡议书
2019/06/24 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Python如何将list中的string转换为int
2022/07/15 Ruby