深入浅析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中if语句的几种优化代码写法
Mar 12 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 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桌面中心(三) 修改数据库
2007/03/11 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
python网页请求urllib2模块简单封装代码
2014/02/07 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python实现学校管理系统
2018/01/11 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python迭代器常见用法实例分析
2019/11/22 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
优秀团干部个人事迹
2014/05/29 职场文书
校庆标语集锦
2014/06/25 职场文书
暑期学习心得体会
2014/09/02 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
创业计划书之酒厂
2019/10/14 职场文书