深入浅析JavaScript中with语句的理解
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;
}
在函数创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图：
当函数被执行时，会创建一个活动对象，该对象包含了函数所有局部变量、命名参数以及this，然后该对象会被推入作用域链的前端，当函数执行完毕，该对象也随之销毁。
可以看到，全局变量会被活动对象推到作用域链的最后端，这也就是为什么全局变量访问速度慢的原因！
with
一般情况下，作用域链只会被with和catch语句影响。当使创建用with的时候，函数会创建一个新的活动对象，推到最前端，该对象就是with的对象。这就意味着所有的局部变量都处于第二个作用域链对象中去了，这也就是为什么要避免使用with的原因。
以上所述是小编给大家介绍的JavaScript中with语句的理解，希望对大家有所帮助，如果大家想了解更多资讯敬请关注脚本之家网站！
相关文章
前端开发常见问题之一： 资源异常、js异常,页面出了问题常见的想法是：如何看到错误信息,资源脚本是否正常,像js、css、图片这些资源文件经常受网络等原因,导致资源加载异常,这些会直接影响我们的页面,本文给大家介绍前端监控页面异常的常用方法,需要的朋友可以参考下2025-04-04
事件（Event）知识整理,本文由网上资料整理而来,需要的朋友可以参考下2012-10-10
今天看到 司徒一篇blog， javascript深拷贝，其中涉及到一种判断类型的方法，特分析如下2010-03-03
Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似，用来给事件处理程序传递状态信息，从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性，并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中，从而适应所有的浏览器。2008-09-09
这篇文章主要介绍了js动态添加带圆圈序号列表的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
JavaScript中SetInterval与setTimeout的用法详解
在写H5游戏时经常需要使用定时刷新页面实现动画效果，比较常用即setTimeout()以及setInterval()，但是大家对SetInterval与setTimeout的用法了解吗，下面通过本文给大家详解js中SetInterval与setTimeout的用法，需要的朋友参考下2015-11-11
这篇文章主要介绍了JavaScript UTC时间转换方法，介绍了本地时间到UTC时间的转换、UTC日期到本地日期的转换，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家介绍了JavaScript设计模式中的单例模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了纯JavaScript实现实时反馈系统时间的相关资料,需要的朋友可以参考下2017-10-10
本文主要对JavaScript中promise的使用进行详细介绍。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
最新评论