您好,登录后才能下订单哦!
本篇文章给大家分享的是有关由JavaScript的with 引发的探索是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
某天吃饭的时候突然想到,都说 with
会有问题,那么是什么问题,是怎样导致的呢?知其然不知其所以然,在好奇心的驱使下,从 with
出发,一路追溯到 VO、AO。那么先来复习一下 with 是干嘛的吧。
js 的 with
是为对象访问提供命名空间式的访问方式,with 创建一个对象的命名空间,在这个命名空间内你可以直接访问对象的属性,而不需要通过对象来访问:
const o = { a: 1, b: 2 }; with (o) { console.log(a); // 1 b = 3; // o: { a: 1, b: 3 } }
看起来挺方便的哈?
const o = { a: 1, b: 2 }; const p = { a: 3 }; with (o) { console.log(a); // 1 with (p) { console.log(a); // 3 b = 4; // o: { a: 1, b: 4 } c = 5; // window.c = 5 } }
嗯,他还有作用域链的性质。但是,如果给不存在的属性赋值,将会沿着作用域链给该变量赋值,在没有找到变量时,非严格模式下将会自动在全局创建一个变量。这就导致了数据泄露。
那么导致数据泄露的原因是什么呢?这需要了解 LHS 查询,这个待会再说。
那来看看 js 是怎么查询的:当 with 对象 o 的时候,with 声明的作用域是 o,从这里对 c 进行 LHS 查询。o 的作用域和全局作用域都没有找到 c,在非严格模式下,失败的 LHS 会自动隐式的在全局创建一个标识符 c,如果是严格模式,则会抛出 ReferenceError
。
使用 with:
function f () { const o = { a: 1 } console.time(); with(o) { for (let i = 0; i < 100000; i++) { a = 2; } } console.timeEnd(); }
正常情况:
function f () { const o = { a: 1 } console.time(); for (let i = 0; i < 100000; i++) { o.a = 2; } console.timeEnd(); }
将近 10 倍的差距。
原因是什么呢?
js 预编译阶段会进行的优化,由于 with 创建新的词法作用域,导致 o 的 a 属性和 o 分离开位于两个不同的作用域,不能快速找到标识符,引擎将不会做任何优化。
这就好比你去某家店,引擎给了你一个牛逼的老大,老板一眼就知道该怎么做;套上 with 之后,老板不知道你的老大是谁,还要花时间去找,时间就这样浪费了。
LHS:赋值操作的目标是谁
RHS:谁是赋值操作的源头
所以我们来看这段代码:
var a = 1;
在执行的时候,这段代码会被拆成两部分
var a; a = 1;
当我们使用 a
时
console.log(a);
对 a 进行了 RHS 查询,以获得 a 的值,并隐式赋值给console.log
函数的形参,赋值对象的查找也是 LHS 查询。
当然,更直白的 LHS 也如上文写到的 a = 1
。
在变量还没有声明(在任何作用域中都无法找到该变量)情况下,这两种查询行为是不一样的。
LHS 和 RHS 查询都会在当前执行作用域中开始,沿着作用域链向上查找,直到全局作用域。
而不成功的 RHS 会抛出 ReferenceError
,不成功的 LHS 会自动隐式地创建一个全局变量(非严格模式),并作为 LHS 的查询结果(严格模式也会抛出 ReferenceError
)。
那么,复习一下作用域链的查找吧。
在 js 中有三种代码运行环境:
全局执行环境
函数执行环境
Eval 执行环境
js 代码执行的时候,为了区分运行环境,会进入不同的执行上下文(Execution context
,EC),这些执行上下文会构成一个执行上下文栈(Execution context stack
,ECS
)。
对于每个 EC 都有一个变量对象(Variable object
,VO),作用域链(Scope chain
)和 this 三个主要属性。
变量对象(Variable object
)是与 EC 相关的作用域,存储了在 EC 中定义的变量和函数声明。VO 中一般会包含以下信息:
变量
函数声明式
函数的形参
而函数表达式和没有用 var
、let
、const
声明的变量(全局变量,存在于全局 EC 的 VO)不存在于 VO 中。对于全局 VO,有 VO === this === global。
在函数 EC 中,VO 是不能直接访问的,此时由激活对象(Activation Object
,AO
)来替代 VO 的角色。AO 是在进入函数 EC 时被创建的,它通过函数的 arguments
进行初始化。这时,VO === AO。
如:
function foo(b) { const a = 1; } foo(1); // AO:{ arguments: {...}, a: 1, b: 1 }
了解了 EC、AO、VO,再来看作用域链
var x = 10; function foo() { var y = 20; function bar() { var z = 30; console.log(x + y + z); }; bar() }; foo();
橙色箭头指向 VO/AO
蓝色箭头们则是作用域链(VO/AO + All Parent VO/AOs)
理解了查找过程,很容易想到 js 中的原型链,而作用域链和原型链则可以组合成一个二维查找:先通过作用域链查找到某个对象,再查找这个对象上的属性。
const foo = {} function bar() { Object.prototype.a = 'Set foo.a from prototype'; returnfunction () { console.log(foo.a); } } bar()(); // Set foo.a from prototype
以上就是由JavaScript的with 引发的探索是怎样的,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。