JavaScript中with语句的理解
with语句的作用是暂时改变作用域链、减少的重复输入。
其语法结构为:
- with(object){
- //statements
- }
举一个实际例子吧:
- with(document.forms[0]){
- name.value = "lee king";
- address.value = "Peking";
- zipcode.value = "10000";
- }
与之对应的传统的写法是:
- document.forms[0].name.value = "lee king";
- document.forms[0].address.value = "Peking";
- document.forms[0].zipcode.value = "10000";
可以看出with语句的简洁明了,不过在代码的世界里是很难找到真正的完美。
js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化。为了兼顾速度与代码量可以找到一个比较折衷的方案:
- var form = document.forms[0];
- form.name.value = "lee king";
- form.address.value = "Peking";
- form.zipcode.value = "10000";
所以在以后的高效代码开发中我们应该尽可能的避免使用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语句的理解的更多相关文章
- 深入浅析JavaScript中with语句的理解
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变 ...
- JavaScript中if语句优化和部分语法糖小技巧推荐
前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...
- javascript中关于继承的理解
首先,你要理解在javascript中,每当一个新函数创建时,都会生成一个prototype属性,我们管它叫做原型对象.看一个例子: function foo(){ this.name='qiangq ...
- Javascript中闭包的个人理解
Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...
- javascript中concat方法深入理解
最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...
- JavaScript - javascript 中的 "||" 与 "&&" 的理解与灵活运
你肯定见到过这样的代码:a = a||"xxx". 它其实就等价于下面三种形式的代码: a = a || "xxx"; 与: if (!a) { a = &qu ...
- 第一篇 对Javascript中原型的深入理解
理解原型对象 在Javascript中不管什么时候,仅仅要创建一个新的函数,就会依据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象(这个对象的用途是包括能够有特定 ...
- 关于JavaScript中prototype机制的理解
最近几天一直在研究JavaScript中原型的机制,从开始的似懂非懂,到今天终于有所领悟.不敢说彻底理解,但是起码算知道怎么回事了. 为什么一开始似懂非懂 开始了解一遍原型机制后,感觉知其然但不知其所 ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
随机推荐
- Windows Azure HandBook (2) Azure China提供的服务
<Windows Azure Platform 系列文章目录> 对于传统的自建数据中心,从底层的Network,Storage,Servers,Virtualization,中间层的OS, ...
- PetaPoco - 轻量级高性能的ORM框架(支持.NET Core)
我们都知道ORM全称叫做Object Relationship Mapper,也就是可以用object来map我们的db. 而且市面上的orm框架有很多,有重量级的Entity Framework,有 ...
- Ajax PHP项目实战
这两天在实验楼学习ajax,后台是用php写的,下面我将三个实战项目分享出来,也方便我以后随时查看. 第一个项目我写的注释比较详细,第二个和第三个注释就写的比较少了,因为用的方法都差不多:这三个项目都 ...
- 【转】 依赖注入框架Autofac的简单使用
Autofac是一款IOC框架,比较于其他的IOC框架,如Spring.NET,Unity,Castle等等所包含的,它很轻量级性能上也是很高的.于是,今天抽空研究了下它.下载地址:http://co ...
- Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件
在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退键退出的功能,用户在MainPage页面第一次点击后退键时,弹出一个对话框"是否退出?" ...
- Ext.NET 4.1 系统框架的搭建(后台) 附源码
Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5 VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...
- 【处理手记】U盘读不出+卷标丢失+像读卡器+大小0+无媒体
Update:201307180945 今天这鸟问题又找上我了,照之前的方法做后没解决,我又做了些尝试,整个流程如下: 1.插上U盘,发现问题 2.以devmgr_show_nonpresent_de ...
- Oracle--(Hierarchical Queries)层级查询
内容来自: Oracle® Database SQL Language Reference 11g Release 2 (11.2) E41084-03. empolyees表来自hr方案,wareh ...
- ASP.NET将文件写到另一服务器
有时我们需要将来自于客户端的文件上传到WEB服务器端,并在服务端将文件存储到第三方文件服务器中存储. 实现如下: 1.在文件服务器B上建立一共享文件夹,同时在该服务器上创建一用户,如DocShareU ...
- Quartz中的时间表达式介绍和常用表达式
Quartz.NET是一个开源的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活性而不 ...