深入浅析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 10 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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开发框架laravel安装与配置教程
2015/03/13 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
生日宴会策划方案
2014/06/03 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
公司庆典欢迎词
2015/01/26 职场文书
明星邀请函
2015/02/02 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL