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 ...
随机推荐
- php分享(三十六)mysql中关联表更新
一:关联不同的表更新 1: 通过where关联更新 update student s, city c set s.province_name = c.province_name, s.city_nam ...
- nginx反向代理docker registry报”blob upload unknown"解决办法
问题症状:keepalived+nginx反向代理后端docker registry群集时,使用docker客户机向registry push镜像时出现 "blob upload unkno ...
- Tomcat7.0启动报错:java.lang.illegalargumentexception:taglib definition not consisten with specification version
Tomcat7.0启动报错:java.lang.illegalargumentexception:taglib definition not consisten with specification ...
- Asp.Net工作原理
1. ASP.NET页面的的一般处理过程: 客户请求WEB页面 WEB服务寻找指令文件(.ASPX) ASP.NET代码被发送给CLR进行编译 HTML流返回给浏览器和指令 浏览器处理HTML并显示页 ...
- [java] jsoup使用简介-汇率换算器实现-插曲2
[java] jsoup使用简介-汇率换算器实现-插曲2 // */ // ]]> [java] jsoup使用简介-汇率换算器实现-插曲2 Table of Contents 1 系列文章 ...
- Theano入门神经网络(二) 实现一个XOR门
与非门的图片如下 示意图 详细解释: 1 定义变量的代码,包括了输入.权值.输出等.其中激活函数采用的是sigmod函数 # -*- coding: utf-8 -*- __author__ = 'A ...
- Struts2 源码分析——前言
笔者简言 笔者在博园里面注册是在二年前.可是那个时候我不知道要写些什么,也怕写出来被别人骂误人子弟.而现在却动笔了是因为前一段时间内我去参加一些大公司的面试,让笔者内心深处留下很多问号.最近三年来我一 ...
- 单例模式ARC和非ARC
ARC环境下的单例模式: static id _instance = nil; + (id)allocWithZone:(struct _NSZone *)zone { if (_instance = ...
- 歌词文件解析(二):LRC格式文件的绘制
通过对LRC文件的解析,可以轻松实现歌词可视化. 代码实现 函数名: paintLyrics(ByVal pBox As PictureBox, ByVal CurrentPosition As In ...
- 8.Fluent API in Code-First【Code-First系列】
在前面的章节中,我们已经看到了各种不同的数据注解特性.现在我们来学习一下Fluent API. Fluent API是另外一种配置领域类的方式,它提供了更多的配置相比数据注解特性. Mappings[ ...