当前位置: 首页 > 编程笔记 >

深入浅析JavaScript中with语句的理解

窦志新
2023-03-14
本文向大家介绍深入浅析JavaScript中with语句的理解,包括了深入浅析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语句的理解,希望对大家有所帮助,如果大家想了解更多资讯敬请关注小牛知识库网站!

 类似资料:
  • 本文向大家介绍深入浅析JavaScript中的3DES,包括了深入浅析JavaScript中的3DES的使用技巧和注意事项,需要的朋友参考一下 3DES简介: 3DES(或称为Triple DES)是三重数据加密算法(TDEA,Triple Data Encryption Algorithm)块密码的通称。它相当于是对每个数据块应用三次DES加密算法。由于计算机运算能力的增强,原版DES密码的密钥

  • 本文向大家介绍理解Python中的With语句,包括了理解Python中的With语句的使用技巧和注意事项,需要的朋友参考一下 With语句是什么? 有一些任务,可能事先需要设置,事后做清理工作。对于这种场景,Python的with语句提供了一种非常方便的处理方式。一个很好的例子是文件处理,你需要获取一个文件句柄,从文件中读取数据,然后关闭文件句柄。 如果不用with语句,代码如下: 这里有两个问

  • 本文向大家介绍深入浅析react native es6语法,包括了深入浅析react native es6语法的使用技巧和注意事项,需要的朋友参考一下 react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率 解构赋值 这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。 上面的代码等价于: 再

  • 本文向大家介绍深入浅析centos7中的systemd,包括了深入浅析centos7中的systemd的使用技巧和注意事项,需要的朋友参考一下 系统启动流程 systemd  Unit 类型 服务管理 `centos7几乎一切服务都是由systemctl来管理service unit,centos7之前的service同时仍然兼容。 运行级别 CentOS7 引导启动顺序 service unit

  • 本文向大家介绍深入浅出分析javaScript中this用法,包括了深入浅出分析javaScript中this用法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别人写

  • 本文向大家介绍浅谈JavaScript异常处理语句,包括了浅谈JavaScript异常处理语句的使用技巧和注意事项,需要的朋友参考一下 程序运行过程中难免会出错,出错后的运行结果往往是不正确的,因此运行时出错的程序通常被强制中止。运行时的错误统称为异常,为了能在错误发生时得到一个处理的机会,JavaScript提供了异常处理语句。包含try-catch、try-catch-finally和thro