js 欺骗词法作用域

如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”(也可以说欺骗)词法作用域呢?
    JavaScript 中有两种机制来实现这个目的。社区普遍认为在代码中使用这两种机制并不是什么好注意。但是关于它们的争论通常会忽略掉最重要的点:欺骗词法作用域会导致性能下降。
在详细解释性能问题之前,先来看看这两种机制分别是什么原理

1.eval

JavaScript 中的 eval(..) 函数可以接受一个字符串为参数,并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。换句话说,可以在你写的代码中用程序生成代码并运行,就好像代码是写在那个位置的一样。根据这个原理来理解 eval(..),它是如何通过代码欺骗和假装成书写时(也就是词法期)代码就在那,来实现修改词法作用域环境的,这个原理就变得清晰易懂了。在执行 eval(..) 之后的代码时,引擎并不“知道”或“在意”前面的代码是以动态形式插入进来,并对词法作用域的环境进行修改的。引擎只会如往常地进行词法作用域查找。
考虑以下代码:

function foo(str, a) {
eval( str ); // 欺骗!
console.log( a, b );
}
var b = 2;
foo( "var b = 3;", 1 ); // 1, 3

eval(..) 调用中的 "var b = 3;" 这段代码会被当作本来就在那里一样来处理。由于那段代码声明了一个新的变量 b,因此它对已经存在的 foo(..) 的词法作用域进行了修改。事实上,和前面提到的原理一样,这段代码实际上在 foo(..) 内部创建了一个变量 b,并遮蔽了外部(全局)作用域中的同名变量。当 console.log(..) 被执行时,会在 foo(..) 的内部同时找到 a 和 b,但是永远也无法找到外部的 b。因此会输出“1, 3”而不是正常情况下会输出的“1, 2”。

在这个例子中,为了展示的方便和简洁,我们传递进去的“代码”字符串是固定不变的。而在实际情况中,可以非常容易地根据程序逻辑动态地将字符拼接在一起之后再传递进去。eval(..) 通常被用来执行动态创建的代码,因为像例子中这样动态地执行一段固定字符所组成的代码,并没有比直接将代码写在那里更有好处。默认情况下,如果 eval(..) 中所执行的代码包含有一个或多个声明(无论是变量还是函数),就会对 eval(..) 所处的词法作用域进行修改。技术上,通过一些技巧(已经超出我们的讨论范围)可以间接调用 eval(..) 来使其运行在全局作用域中,并对全局作用域进行修改。但无论何种情况,eval(..) 都可以在运行期修改书写期的词法作用域。在严格模式的程序中,eval(..) 在运行时有其自己的词法作用域,意味着其中的声明无法修改所在的作用域。

function foo(str) {
"use strict";
eval( str );
console.log( a ); // ReferenceError: a is not defined
}
foo( "var a = 2" );

JavaScript 中 还 有 其 他 一 些 功 能 效 果 和 eval(..) 很 相 似。setTimeout(..) 和setInterval(..) 的第一个参数可以是字符串,字符串的内容可以被解释为一段动态生成的函数代码。这些功能已经过时且并不被提倡。不要使用它们!new Function(..) 函数的行为也很类似,最后一个参数可以接受代码字符串,并将其转化为动态生成的函数(前面的参数是这个新生成的函数的形参)。这种构建函数的语法比eval(..) 略微安全一些,但也要尽量避免使用。在程序中动态生成代码的使用场景非常罕见,因为它所带来的好处无法抵消性能上的损失。

2.with

JavaScript 中另一个难以掌握(并且现在也不推荐使用)的用来欺骗词法作用域的功能是with 关键字。可以有很多方法来解释 with,在这里我选择从这个角度来解释它:它如何同被它所影响的词法作用域进行交互。with 通常被当作重复引用同一个对象中的多个属性的快捷方式,可以不需要重复引用对象,例如:

var obj = {
a: 1,
b: 2,
c: 3
};
// 单调乏味的重复 "obj"
obj.a = 2;
obj.b = 3;
obj.c = 4;
// 简单的快捷方式
with (obj) {
a = 3;
b = 4;
c = 5;
}

但实际上这不仅仅是为了方便地访问对象属性。考虑如下代码:

function foo(obj) {
with (obj) {
a = 2;
}
}
var o1 = {
a: 3
};
var o2 = {
b: 3
};
foo( o1 );
console.log( o1.a ); // 2
foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2——不好,a 被泄漏到全局作用域上了!

这个例子中创建了 o1 和 o2 两个对象。其中一个具有 a 属性,另外一个没有。foo(..) 函数接受一个 obj 参数,该参数是一个对象引用,并对这个对象引用执行了 with(obj) {..}。在 with 块内部,我们写的代码看起来只是对变量 a 进行简单的词法引用,实际上就是一个LHS 引用(查看第 1 章),并将 2 赋值给它。当我们将 o1 传递进去,a=2 赋值操作找到了 o1.a 并将 2 赋值给它,这在后面的 console.log(o1.a) 中可以体现。而当 o2 传递进去,o2 并没有 a 属性,因此不会创建这个属性,o2.a 保持 undefined。但是可以注意到一个奇怪的副作用,实际上 a = 2 赋值操作创建了一个全局的变量 a。这是怎么回事?with 可以将一个没有或有多个属性的对象处理为一个完全隔离的词法作用域,因此这个对象的属性也会被处理为定义在这个作用域中的词法标识符。尽管 with 块可以将一个对象处理为词法作用域,但是这个块内部正常的 var声明并不会被限制在这个块的作用域中,而是被添加到 with 所处的函数作用域中。eval(..) 函数如果接受了含有一个或多个声明的代码,就会修改其所处的词法作用域,而with 声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域。可以这样理解,当我们传递 o1 给 with 时,with 所声明的作用域是 o1,而这个作用域中含有一个同 o1.a 属性相符的标识符。但当我们将 o2 作为作用域时,其中并没有 a 标识符,因此进行了正常的 LHS 标识符查找。o2 的作用域、foo(..) 的作用域和全局作用域中都没有找到标识符 a,因此当 a=2 执行时,自动创建了一个全局变量(因为是非严格模式)。with 这种将对象及其属性放进一个作用域并同时分配标识符的行为很让人费解。但为了说明我们所看到的现象,这是我能给出的最直白的解释了。另外一个不推荐使用 eval(..) 和 with 的原因是会被严格模式所影响(限制)。with 被完全禁止,而在保留核心功能的前提下,间接或非安全地使用eval(..) 也被禁止。

***性能
     eval(..) 和 with 会在运行时修改或创建新的作用域,以此来欺骗其他在书写时定义的词法作用域。你可能会问,那又怎样呢?如果它们能实现更复杂的功能,并且代码更具有扩展性,难道不是非常好的功能吗?答案是否定的。JavaScript 引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析,并预先确定所有变量和函数的定义位置,才能在执行过程中快速找到标识符。

但如果引擎在代码中发现了 eval(..) 或 with,它只能简单地假设关于标识符位置的判断都是无效的,因为无法在词法分析阶段明确知道 eval(..) 会接收到什么代码,这些代码会如何对作用域进行修改,也无法知道传递给 with 用来创建新词法作用域的对象的内容到底是什么。最悲观的情况是如果出现了 eval(..) 或 with,所有的优化可能都是无意义的,因此最简单的做法就是完全不做任何优化。如果代码中大量使用 eval(..) 或 with,那么运行起来一定会变得非常慢。无论引擎多聪明,试图将这些悲观情况的副作用限制在最小范围内,也无法避免如果没有这些优化,代码会运行得更慢这个事实。

时间: 2024-10-08 23:12:13

js 欺骗词法作用域的相关文章

你不知道的JS系列 ( 7 ) - 欺骗词法作用域

如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”词法作用域呢?有些人喜欢特殊的办法来解决遇到的问题.我们规定词法作用域是代码写在哪里决定的,一旦决定了无法更改,因为一些问题,我们不得不更改作用域,尽管这是不被推荐的,那是什么办法,JavaScript 中有两种机制来实现这个目的 eval function foo(str, a) { eval(str); console.log(a, b) } var b = 2; foo("var b = 3", 1)

JS的词法作用域

词法作用域定义实现的规则: 1 函数作用域实在定义的时候决定的,而不是在执行时候决定 2 为了实现这种词法作用域,函数内部不仅包含函数代码逻辑,还必须引用当前的作用域链. 3 函数对象可以通过作用域链相互关联起来,函数内部的变量都可以保存在函数作用域内. 变量作用域:变量的作用域是程序源代码中定义这个变量的区域. 1在函数内部,局部变量的优先级要高于同名的全局变量. 2 JS是函数作用域 3 函数作用域:变量在声明它的函数体内以及该函数内部嵌套的函数体内都有定义. 4 JS的函数作用域指的是:在

js 中采用词法作用域

所谓的 词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域. 在 js 中词法作用域规则: 1.函数允许访问函数外的数据. 2.整个代码结构中只有函数可以限定作用域. 3.作用规则首先使用提升规则分析. 4.如果当前作用规则中有名字了, 就不考虑外面的名字. 在编译语言中,**通常** 代码在被引擎执行之前会经历三个步骤: 1. 词法分析(tokenzing/lexing)2. 解析/语法分析(pars

利用eval()来“欺骗”JavaScript词法作用域

我们知道,所谓"词法作用域"就是按照代码书写时的样子内部函数可以访问函数外部的变量,如果函数外存在函数内所具有的同名变量,则函数内部要获取该同名变量的值会屏蔽掉函数外的同名变量(本来就是两个不同的变量,只是同名而已.另外注意,在同一个作用域是同一个变量,所以不要重复声明,否则第二个声明会被忽略). 利用eval()可以"欺骗"词法作用域: function foo(str){ eval(str); console.log(a); } var a=100; foo(&

你不知道的Javascript(上卷)读书笔记之二 ---- 词法作用域

在前一篇文章中,我们把作用域定义为"管理.维护变量的一套规则",接下来是时候来深入讨论一下Js的作用域问题了,首先我们要知道作用域一般有两种主要的工作类型,一种是词法作用域,一种是动态作用域, Javascript采用的是词法作用域, 关于动态作用域的有兴趣的可以自行Google. 1.词法阶段 首先我们要理解"词法阶段"这个词语,我们已经了解到Js存在一个编译阶段,编译阶段的第一步就是分词/词法分析,我们可以简称为"词法阶段" 简单来说,词法作

JavaScript词法作用域(你不知道的JavaScript)

JavaScript并不是传统的块级作用域,而是函数作用域! 一.作用域 1. JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤: 第一步(编译阶段):var a 在其作用域中声明新变量.这会在最开始的阶段,也就是代码执行前进行. 第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值. 2. LHS & RHS(当前作用域->上级作用域->...->全局作用域) LHS(左侧):试图找到

js词法作用域

词法作用域就是说在词法分析的时候就已经形成了的作用域.这个时候已经定死了.如果一个函数在全局里面声明了,她的父级作用域就是全局作用域.一个函数的作用域只有可能存在于一个父级作用域里面.不会同时存在两个父级作用域. var a = 2; function foo() { console.log( a ); console.log(this.a); console.log(this); } function bar() { var a = 3; foo(); } bar(); //2. 2. win

区分词法作用域(js)与动态作用域(精!)

在js学习中,词法作用域是必须要掌握的! 在这里,我将总结一下<你不知道的JS>一书中词法作用域的重点并分享给大家! 首先带来一段代码示例: function foo(){ console.log(a);//2 } function bar(){ var a = 3; foo(); } var a = 2; bar(); js词法作用域输出结果:"2"; 动态作用域输出结果:"3" 下面我将对两种作用域的输出结果进行分析: #在对结果分析之前首先我们要了

js 词法分析,词法作用域

先来看个常见的面试题如下: var a = 10; function test(){ alert(a); //undefined var a = 20; alert(a); //20 } test(); 疑问:为什么呢?test()执行时,虽然a=20没有赋值,但是父级作用域里是有a=10的,不应该是undefined呀,js是按顺序执行的,此时的var num = 20;根本没有执行,所以应该是10!!你是不是也是这么认为的,就和我当初一样??? 分析:众所周知,js代码是自上而下执行的,Ja