`
hax
  • 浏览: 962576 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

如何将let结构(block scope)转换到当前的JavaScript代码

    博客分类:
  • JS
阅读更多
本文是对如何将let结构转换到ES3代码的补充。

首先,原文所说的将let转换为with的方法有几个缺陷需要说明:

1. with虽然可附加一个新的scope,但是由于引入的是一个JS对象,所以Object.prototype上的属性也被引入了该scope。比方说你无法在with里访问外部的toString()方法,因为你访问到的实际上变成了Object.prototype.toString。

再来一个例子:

function login() {
	var user = getUserNameFromCookie()
	for (let i = 0; i < 3; i++) {
		let pwd = prompt('Please enter your password:')
		if (securityCheck(user, pwd)) {
			return true
		} else {
			alert('Wrong password! Please try again...')
		}
	}
	return false
}

if (login()) {
	alert('Welcome!')
} else {
	alert('Failed to login!')
}

function securityCheck(user, pwd) {
	//...do some security checking
}
function getUserNameFromCookie() {
	//...read user name from cookie
}


如果这段代码里的 login 函数被转换为:
function login() {
	var user = getUserNameFromCookie()
	for (var i = 0; i < 3; i++) {
		var temp = prompt('Please enter your password:')
		with({pwd:temp}) {
			if (securityCheck(user, pwd)) {
				return true
			} else {
				alert('Wrong password! Please try again...')
			}
		}
	}
	return false
}


就会存在一些隐患。

例如:
如果在login执行之前,注入了这样的代码:
Object.prototype.user = 'hacker'

那只要输入hacker用户对应的密码就可以通过检查。

更简单的方式是:
Object.prototype.securityCheck = function() { return true }

【注意上述只是示例,不代表真实世界里会有这样的写法。】


另一个隐藏问题是,如果with(scope)引用了一个函数,则该函数在with块内被调用是以scope作为this对象的。这造成采用with时行为不一致,并可能影响其他reference。

比如:
function test() {
     let x = 1
     {
        let f = function(){ this.x = 2 }
        f()
        return x
     }
}
test()

这段代码执行的结果应该是返回1,并且global上的x=2。

但是
function test() {
     with(x:1)
     {
        with({f: function(){ this.x = 2 }}) {
            f()
            return x
        }
     }
}
test()

这段代码的结果是返回2,global上并不会产生x。


2. with语句在ES5的strict模式下被禁用。

with实际上是在lexical scope上开了一个后门,这对依赖静态代码分析的辅助工具(如IDE、压缩器等)和性能优化(如新的支持JIT的引擎)都造成了障碍。
另外从第1条可以看到with的设计天生残疾,易造成语句的二义性,并且这种二义性可以由完全无关的代码引入。

因此ES5的strict模式直接禁用了该特性。


上述两点注定了block scope转换到with是一个不太好的做法。

那么还有什么其他方式么?

幸运的是,确实存在一个我以前遗忘的特性,try catch语句中,catch语句也会增加一层新的scope!

Traceur是一个Google开源项目,可以将ES5和Harmony的一些新特性编译为传统的ES3代码。让我们看看它是怎样转换上述代码的:

function login() { 
  var user = getUserNameFromCookie(); 
  for(var i = 0; i < 3; i ++) { 
    try { 
      throw undefined; 
    } catch(pwd) { 
      pwd = prompt('Please enter your password:'); 
      if(securityCheck(user, pwd)) { 
        return true; 
      } else { 
        alert('Wrong password! Please try again...'); 
      } 
    } 
  } 
  return false; 
} 


不需要更多解释了。


总结,用try/catch进行let转换方式如下:

    statement {  
        ...  
        let n1 = exp1  
        ...  
        let n2 = exp2  
        ...  
        let n3 = exp3, n4 = exp4, ...  
        ...  
    }  

转换为
    statement {
        try { throw undefined } catch (n1) {
        try { throw undefined } catch (n2) {
        try { throw undefined } catch (n3) {
        try { throw undefined } catch (n4) {
            ...
            n1 = exp1
            ...
            n2 = exp2
            ...
            n3 = exp3; n4 = exp4; ...
        }}}}
    }


此外,原文中的let语句形式也可以容易的转换:

let语句
    var x = 5;    
    var y = 0;    
        
    let (x = x+10, y = 12) {    
      print(x+y + "\n");    
    }    
        
    print((x + y) + "\n");    

可转换为:
    var x = 5;    
    var y = 0;    
        
    try { throw x+10 } catch(x) { try { throw 12 } catch(y) {    
      print(x+y + "\n");    
    }}
        
    print((x + y) + "\n");    


不过对比之前的转换公式,上述转换有一点小小的不严谨——虽然在这个case里并不会出现问题。这就作为一个习题留给读者了。



【7月13日的进一步补充】


不过,使用catch也有一些实践上的问题:

1. 在各浏览器脚本引擎的较早版本中,try/catch方案中也有一些类似with的副作用。比如catch块内的变量访问会优先搜索Object.prototype,或者如果catch到的是一个函数,执行该函数的this上下文会是一个隐含的scope对象。幸好这些问题现在已经都被修复了。

2. 直到JScript 5.8(也就是直到IE8),对catch的处理是与其他引擎不一致的,那就是在JScript中catch不会产生新的scope。(感谢Winter指出此点)


所以如果考虑转换目标必须包括IE6到IE8,则就只能用原文中的with方案。

为了克服本文所指出的with的问题,可以采用防御性方法——将with块中所有用到的references都照抄一遍:

function login() {
	var user = getUserNameFromCookie()
	for (var i = 0; i < 3; i++) {
		var temp = prompt('Please enter your password:')
		with({pwd:temp, securityCheck:securityCheck, user:user, alert:alert}) {
			if (securityCheck(user, pwd)) {
				return true
			} else {
				alert('Wrong password! Please try again...')
			}
		}
	}
	return false
}


注意 with({pwd:temp, securityCheck:securityCheck, user:user, alert:alert}) 这里。

不过这个方式是有局限性的,即其只适用于读取的情形,但with块内可能出现 x = exp 或 delete x ,也就是出现对于用到的外部reference的修改或删除操作。这时就无能为力了。除非with代码中所有对外部reference的修改都是立即执行的(即不会出现在闭包中),那么可以在with结束后同步。此外,若with块内出现eval语句,也就无法静态确定会用到哪些references。不过在实践中通常较少出现上述代码形式。

另一种思路是在创建scope对象时覆盖所有Object.prototype上的名称,如:
// create a "clean" scope object

var scope = {}
// override props from Object.prototype
scope.constructor = constructor
scope.toString = toString
scope.toLocaleString = toLocaleString
scope.valueOf = valueOf
scope.hasOwnProperty = hasOwnProperty
scope.isPrototypeOf = isPrototypeOf
scope.propertyIsEnumerable = propertyIsEnumerable
for (var k in Object.prototype) {
   scope[k] = eval(k)
}
// add bindings
scope.x = ...
scope.y = ...
...
with(scope) {
   alert(x + y)
}


不过这个方式存在漏洞。【为什么呢?请读者自行思考。】

尽管如此,这个思路仍然揭示了一种可能,那就是如果能创建一个不带有prototype的“干净”的对象,则就克服了with的许多问题。

恰好,IE中的DOM对象正是这样一朵奇葩。我们希望挑选的DOM对象是,可任意产生新对象(因为我们需要许多的scope对象),可添加属性(理论上若该对象可作为其他对象的prototype也可,不过JScript禁止用非native JS对象作为prototype),并且本身固有属性越少越好,最好是光秃秃的(这样就避免覆盖固有属性造成的问题)。

经过我的研究,符合上述条件的最佳对象是一些collection对象(还有更好的选择么?欢迎读者提供线索)。比如document.createStyleSheet().rules 。这个对象上只有3个属性:constructor、length、item。

所以只剩下两个问题,一个是如果要用到的外部变量名为constructor/length/item,另一个是用到的外部变量是一个内部访问this引用的函数。

对于问题一,可以在转换时,对这三个名称做特殊处理(好在只有3个特例)。对于问题二,我们可以将with内的函数调用显式的绑定this。


以上。



0
2
分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript es6中var、let以及const三者区别案例详解.docx

    这些新特性对于理解和编写更健壮的JavaScript代码至关重要。 1. **块级作用域(Block Scope)** 在 ES5 中,只有全局作用域和函数作用域,而没有块级作用域。这意味着在函数内部或 `if`、`for` 等语句中定义的变量...

    实例解析不同scope的作用范围

    在实际开发中,合理利用不同scope可以创建更加安全和高效的代码结构。例如,在模块化开发中,我们可以使用闭包来封装私有方法和数据,确保模块内部的状态不被外部随意修改。 通过分析`webproject6_1`这个项目文件,...

    javascript完全自学手册

    ES6(ECMAScript 2015)中引入了块级作用域(block scope),通过let和const关键字声明的变量具有块级作用域,而var声明的变量则具有函数作用域。 #### 3. 对象和数组 - **对象**:在JavaScript中对象是一个包含...

    JavaScript ES6中const、let与var的对比详解

    作用域方面,const和let都提供了块级作用域(Block Scope),它们只在声明它们的块内有效,而var声明的变量则为函数级作用域(Function Scope)或全局作用域(Global Scope)。块级作用域有助于减少变量的意外覆盖,...

    javascript高级教程

    4. **作用域(Scope)与块级作用域(Block Scope)** JavaScript有函数作用域和全局作用域,ES6引入了块级作用域,如`let`和`const`关键字,理解这些可以帮助避免变量冲突和意外的全局变量。 5. **模块(Modules)...

    Scope(作用域).md

    ### Scope(作用域) #### 一、什么是作用域 作用域是编程语言中用来定义变量可见性和可访问性的概念。简单来说,作用域决定了变量在何处可以被引用和使用。在JavaScript中,作用域主要分为两种类型:全局作用域和...

    Secrets of the JavaScript Ninja, 2nd Edition

    `let` allows reassigning the variable within its scope: ```javascript let ninja = "Yoshi"; ninja = "Hanzo"; console.log(ninja); // Hanzo ``` **Const:** `const` creates a read-only reference to a ...

    javascript最新2020经典面试题

    在JavaScript中,let和const是ES6(ECMAScript 2015)引入的新关键字,它们提供了块级作用域(block scope),这意味着变量只在声明所在的块(通常是花括号内的代码块)中有效。let不会进行变量提升(hoisting),这...

    ES6 学习文档

    它们可以将ES6代码转换为ES5或者更早版本的JavaScript代码,使得新的ES6特性可以在不支持ES6的旧环境中运行。Source Maps则是转译过程中用于映射源代码与转译后代码的工具,它帮助开发者在调试转译后的代码时,能够...

    为什么JavaScript没有块级作用域

    JavaScript 是一种广泛使用的编程语言,它在早期版本中没有实现块级作用域(block scope),这是它与其他许多编程语言的一个显著区别。在 JavaScript 中,变量的作用域是由函数定义的,即使在块级结构比如循环或条件...

    Javascript var变量隐式声明方法

    此外,当JavaScript代码在浏览器环境中执行时,如果未声明的变量被赋值,默认是将其挂在到全局对象window上,这意味着该变量变成了全局变量。在浏览器JavaScript中,全局对象window通常代表当前浏览器窗口的一个对象...

    ES6学习笔记之let与const用法实例分析

    理解 `let` 和 `const` 的这些特性对于编写更安全、可维护的JavaScript代码至关重要。在处理循环、嵌套作用域以及需要确保变量不被意外更改的情况时,这两个关键字提供了更好的工具。同时,使用 `const` 有助于创建...

    浅谈Javascript变量作用域问题

    同时,了解变量声明的历史变迁和不同作用域规则,对于编写高效且兼容的JavaScript代码有重要作用。随着新标准的更新,开发者们也需要适时调整自己的编程习惯,使用新特性来提高代码质量和开发效率。

    一个JavaScript变量声明的知识点

    var声明的变量存在变量提升(hoisting)的特性,而let和const则没有这种特性,它们存在块级作用域(block scope)。 ### 变量提升(hoisting) 变量提升是指在JavaScript中,变量声明会在其所在作用域的所有代码执行...

    VUE-ES2015

    - **块级作用域(Block scope)**:`let`和`const`关键字引入了块级作用域,防止变量污染全局。 ```javascript if (true) { let x = 1; } console.log(x); // ReferenceError: x is not defined ``` 理解并熟练...

    var与Javascript变量隐式声明

    `let`和`const`是ES6引入的新关键字,提供了块级作用域(block scope)的支持,而`let`可以声明块级作用域变量并且可以重新赋值,`const`则声明块级作用域常量,一旦赋值后不可更改。使用这些关键字可以限制变量的...

    JavaScript Scoping and Hoisting 翻译

    JavaScript有两种主要的作用域类型:函数级作用域(function-level scope)和块级作用域(block-level scope)。在JavaScript中,只有函数会创建新的作用域。这意味着像if语句这样的代码块不会创建新的作用域。此外...

    js的api文档

    - 块级作用域(Block Scope):引入了 `let` 和 `const` 关键字。 - 类(Classes):提供更面向对象的语法糖,但本质仍是函数。 - 解构赋值(Destructuring Assignment):方便地从数组或对象中提取值。 - 模板...

    JAVASCRIPT函数作用域和提前声明 分享

    在编写JavaScript代码时,应尽量使用`let`和`const`来替代`var`,因为ES6引入的`let`和`const`提供了块级作用域,有助于减少因作用域问题引起的错误。同时,合理利用闭包(closure)和立即执行函数表达式(IIFE)也...

Global site tag (gtag.js) - Google Analytics