深入浅析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语句的理解，希望对大家有所帮助，如果大家想了解更多资讯敬请关注我们网站！

赞 (0)

相关推荐

  • javascript中with()方法的语法格式及使用

    内容导读: 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象,在 With 语句块中,凡是 JavaScript 不识别的属性和方法都和该语句块指定的对象有关.With 语句的语法格式如下所示: With Object { Statements } 对象指明了当语句组中对象缺省时的参考对象,这里我们用较为熟悉的 Document 对象对 With 语句举例.例如 当使用与 Document 对象有关的 write( )或 writeln( )方法时,往往使用如下形式: docu

  • 关于JavaScript的with 语句的使用方法

    用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如: 复制代码 代码如下: apple.banana.candy.dog.egg.fog.god.huh.index = 0; doSomething(apple.banana.candy.dog.egg.fog.god.huh.index); 利用 with 语句, 可以写

  • javascript之with的使用(阿里云、淘宝使用代码分析)

    javascript之with的使用(阿里云、淘宝使用代码分析)

    记得还在懵懂学习JavaScript基础之时,坊间便有传言"with语句是低效率语句,若非必要,请不要使用该语句",同时, ECMAScript 5 的strict mode下是禁止使用with语句的,所以一直以来我对with语句一直没啥好感. 今天在知乎有个话题大概说的是"你觉得什么东西相当有B格"之类的,然后就有人贴了这段代码: with(document)with(body)with(insertBefore(createElement("scrip

  • 在js中使用"with"语句中跨frame的变量引用问题

    在脚本编程时使用with语句,可以大大的缩减使用多级对象引用代码行的长度,这是JScript提供给我们的一个Syntax Sugar.当然不使用with,使用临时变量也可以达到同样的效果.不过创建变量时起名确实不是一件很遐意的事,就连MASM高版本中也提供了一个@@(以及@F和@B)来处理临时标号的问题,看来大家都是比较懒得啦. 我也挺喜欢用with语句的,确实可以省不少的事情,而且可以让代码变得也清晰些,特别是在处理跨frame的变量引用时,更加显得方便.这不今天就因为贪图方便又撞到枪口上了,

  • javascript下with 的简化代码写法

    with (object) statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. 说明 with 语句通常用来缩短特定情形下必须写的代码量.在下面的例子中,请注意 Math 的重复使用: x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E) 当使用 with 语句时,代码变得更短且更易读: 复制代码 代码如下: with (M

  • JavaScript的strict模式与with关键字介绍

    2009年12月,ECMAScript发布了ECMAScript 5,这距离上一个版本的ECMAScript 3标准发布已经整整十年了,其间JavaScript虽然大行于web编程,ECMAScript 4却最终因为利益相关的各大厂商和组织在此语言的复杂性(即是否增加大量特性以扩展ECMAScript的功能)上的分歧而夭折,使得ECMAScript新标准的制订大大落后于编程的实践.ECMAScript 5在目标上没有那么雄心勃勃,除去新增了对JSON的支持和反射的更全面的控制,一项重要改进就是引

  • js的with语句使用方法

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object instance)  {          //代码块  }         有时候,我在一个程序代码中,多次需要使用某对象的属性或方法,照以前的写法,都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法,着实有点麻烦,学习了with语句后,可以通过类似如下的方式来实现:  w

  • 理解javascript中的with关键字

    说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字,认为不要去管它用它就可以了.但是有时候,我们在看一些代码或者面试题的时候,其中会有with关键字的相关问题,很多坑是你没接触过的,所以还是有必要说说with这一个关键字. 一.基本说明 在js高级程序设计中是这样描述with关键字的:with语句的作用是将代码的作用域设置到一个特定的作用域中,基本

  • javascript简单事件处理和with用法介绍

    这一期介绍一些简单的事件处理: 1.鼠标点击 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Gene

  • JavaScript学习小结之被嫌弃的eval函数和with语句实例详解

    前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过正.那关于eval和with到底是什么情况呢?本文将详细介绍eval()函数和with语句 eval 定义 eval()是一个全局函数,javascript通过eval()来解释运行由javascript源代码组成的字符串 var result = eval('3+2'); console.log(result,typeof result)

  • javaScript中with函数用法实例分析

    本文实例讲述了javaScript中with函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 with 函数 ,即所谓的with 语句,可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性,要给对象创建新的属性,必须明确地引用该对象. with 函数,为语句设定默认对象. with (object)   statements 参数: object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. 说明: with

  • JavaScript严格模式禁用With语句的原因

    看了很多遍JavaScript严格模式,其中有说"禁用With语句",以前看到这都是骑马观花,一带而过,因为平时就很少用到这个语句,禁不禁用对自己关系都不是很大.今天禁不住想知道为何"严格模式"就容不下with语句呢? EcmaScript规范上说"with 语句用于设置代码在特定对象中的作用域",可以看出,With语句改变了作用域链. function Person(name,age,sex){ this.name = name; this.a

  • Javascript中With语句用法实例

    本文实例讲述了Javascript中With语句用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>With语句(类似于VB中的)</title>

  • js批量设置样式的三种方法不推荐使用with

    一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{

随机推荐