JavaScript 中 "with" 语句的相关内容整理

KoreyLee 发布于2019-08-19 17:39 / 1890人阅读

摘要：语法利弊使用得当可规避重复而冗长的对象引用以减小代码量。使用语句，在某些语义不明的情况下会降低代码可读性。在标准中，是对象原型的新属性。使用利用了语句延长作用域链的特性，最基本的使用方法。目前多使用临时变量方案替代语句以简化代码。

语法

with (expression)
  statement

利弊

使用得当可规避重复而冗长的对象引用以减小代码量。

var a, x, y;
var r = 10;

with (Math) {
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}

在 with 语句中查询变量、更改变量似乎十分方便，这很容易给人一种可以轻松操纵对象的错觉，直到你试图添加一个新的变量，啊哦。

var o = {
  x : 10
}

with (o) {
  x = 5;
  y = 7;
}

console.log(o.x);        // 5
console.log(o.y);        // undefined
console.log(window.y);   // 7

with 语句将指定对象的执行环境提升到作用域链的最前端，因此语句中若包含非指定对象执行环境中的变量，会降低查询性能。

JavaScript引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。
但如果引擎在代码中发现了with，它只能简单地假设关于标识符位置的判断都是无效的，因为无法知道传递给with用来创建新词法作用域的对象的内容到底是什么。
最悲观的情况是如果出现了with，所有的优化可能都是无意义的，因此最简单的做法就是完全不做任何优化。
如果代码中大量使用with，那么运行起来一定会变得非常慢。无论引擎多聪明，试图将这些悲观情况的副作用限制在最小范围内，也无法避免如果没有这些优化，代码会运行得更慢这个事实。

使用 with 语句，在某些语义不明的情况下会降低代码可读性。

function fn1(x, o) {
  with (o) 
    print(x);
}

变量在 with 语句中的各种可能，总之是，读者读来不易，编译器也觉得挺烦的。

但不排除在某些情况下它也可以提高代码的可读性，譬如说遇到了这样普遍使用某一符号在阅读上易造成干扰的框架：

_.People().sort(_.score(_.isa(_.Parent)),"Surname","Forename");

这时使用 with 语句，会感觉世界都明朗了起来：

with (_) {
    ...
    People().sort(score(isa(Parent)),"Surname","Forename");
    ...
}

with 语句无法向前兼容。

function fn2(arr, values) {
  with (arr)
    console.log(values);
}

在 ECMAScript 6 标准中，values 是 Array 对象原型的新属性。则调用 fn2([1,2,3], obj) 时，with 语句中变量 values 的指向会出现与在 ECMAScript 5 环境下不同的情况：前者指向 arr.values，后者指向传入的第二个参数 obj。

使用

利用了 with 语句延长作用域链的特性，最基本的使用方法。

var x = 20;
var o = {
  x : 10
}

with (o) {
  x = 5;
}
console.log(x);      // 20
console.log(o.x);    // 5

with 语句可以嵌套使用。

var box = {
  weight: 10,
  size: {
    width: 5,
    height: 7
  }
}

with(box) {
  with(size) {
    console.log(width * height / weight);    
  }
}

目前多使用临时变量方案替代 with 语句以简化代码。

var s = elem.style;
s.position = "absolute";
s.top = "10px";
s.left = "0";

参考

MDN > JavaScript > Statements and declarations > with

JavaScript Tutorial > The "with" operator

with Statement Considered Harmful

"with" keyword in javascript

with: The World"s Most Misunderstood Statement

with: Some Good Example

JavaScript高级程序设计-第3版

你不知道的JavaScript-上卷

云服务器 GPU云服务器 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78734.html

python上下面管理工具适用场景及错误处理

　　本文主要是给大家介绍了python上下面管理工具适用场景及错误处理实例详细说明，感兴趣的小伙伴可以参考去了解一下，希望可以有一定的帮助，祝愿大家多多的发展，尽早涨薪　　前言　　应用前后文管理工具，能让编码更为雅致简约。自然，前后文的管理工具的功效不仅于此，它内部进行体制，能够很好地解决编码出现异常，提高编码的复用性　　1、先看一下最典型的例子，with句子　　#创建一个文件载入字符串数组Pyt...

89542767 2023-01-05 21:56 评论0 收藏0
前端面试资源整理（一）

摘要：是上一次加载资源时，服务器返回的，是对该资源的一种唯一标识，只要资源有变化，就会重新生成。同源限制如果非同源以下三种行为将受到限制和无法读取。Js相关执行环节和作用域执行环节定义了函数或者变量可以访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，在环境中定义的所有变量和函数都保存在这个变量中，并且是我们无法访问。每个函数都有自己的执行环境，当执行流进入一个函数的时...

jzzlee 2019-08-22 15:32 评论0 收藏0
前端面试资源整理（一）

摘要：是上一次加载资源时，服务器返回的，是对该资源的一种唯一标识，只要资源有变化，就会重新生成。同源限制如果非同源以下三种行为将受到限制和无法读取。Js相关执行环节和作用域执行环节定义了函数或者变量可以访问的其它数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象，在环境中定义的所有变量和函数都保存在这个变量中，并且是我们无法访问。每个函数都有自己的执行环境，当执行流进入一个函数的时...

phoenixsky 2019-08-30 14:11 评论0 收藏0
详细解说JavaScript内存管理和GC算法

　　JavaScript在创建变量（数组、字符串、对象等）是自动进行了分配内存,而且当它没有被使用的状态下，会自动的释放分配的内容；其实这样基层语言，如C语言，他们提供了内存管理的接口，比如malloc()用于分配所需的内存空间、free()释放之前所分配的内存空间。　　释放内存的过程称为垃圾回收，例如avaScript这类高级语言可以提供了内存自动分配和自动回收，其实这个自动储存不会占用太多空间...

3403771864 2022-10-13 21:57 评论0 收藏0