JavaScript忍者秘籍——运行时代码求值
1. 代码求值机制
JavaScript中，有很多不同的代码求值机制。
● eval()函数
● 函数构造器
● 定时器
● <script>元素
- 用eval()方法进行求值
作为定义在全局作用域内的eval()方法，该方法将在当前上下文内，执行所传入字符串形式的代码。
基本功能
● 该方法将执行传入代码的字符串
● 在调用eval()方法的作用域内进行代码求值
例如：
eval("5+5") //
(function(){
eval("var ninja = 6");
console.assert(ninja === 6, "evaluated within the current scope.");
})();
求值结果
eval()方法将返回传入字符串中最后一个表达式的执行结果。例如，如果我们调用如下语句：
eval("3+4; 5+6"); // 结果将返回11
应该指出的是，任何不适简单变量、原始值、赋值语句的内容都需要在外面包装一个括号以便返回正确的结果。例如，如果我们想使用eval()创建一个简单的对象，可能会编写如下语句：
var o = eval('({ninja: 1})');
但是，结果不是我们所期望的。我们需要在对象字面量外面包装一个括号，示例如下：
var o = eval('({ninja: 1})');
在IE8或之前的版本，要使用布尔表达式，才能让eval()进行正确的调用，如下代码：
var fn = eval("false||function(){return true;}");
就像我们用普通方式在特定作用域内创建函数一样，eval()创建的函数会继承该作用域的闭包——局部作用域内执行eval()时的衍生结果。
- 用函数构造器进行求值
使用Function构造器来实例化函数，示例如下：
var add = new Function("a", "b", "return a+b;");
Function构造器可变参数列表的最后一个参数，始终是要创建函数的函数体内容。前面的参数则表示函数的形参名称。所以，上述示例代码等价于如下代码：
var add = function(a,b){return a + b}
虽然这些代码在功能上是等同的，但采用Function构造器方式有一个明显的区别，函数体尤运行时的字符串所提供。另外一个极其重要的实现区别是，使用Function构造器创建函数的时候，不会创建闭包。在不想承担任何不相关闭包开销时，这可能是一件好事。
- 用定时器进行求值
还有一种方式，可以让代码字符串进行求值，而且是异步的，那就是通过定时器进行求值。示例如下：
var tick = window.setTimeout("alert("Hi!"), 100")
- 全局作用域内的求值操作
function globalEval(data){
data = data.replace(/^\s|\s*$/g, "");
if(data){
var head = document.getElementsByTagName("head")[0]||document.documentElement, script = document.createElement("script");
script.type = "text/javascript";
script.text = data;
head.appendChild(script);
head.removeChild(script);
}
}
window.onload = function(){
(function(){
globalEval("var test = 5;");
})();
}
在eval()方法中，我们定义了一个名为globalEval()的函数，以便在全局作用域内求值任何想要要求的内容。该函数去除了所传字符串中的所有前导和尾部空白字符，然后定位DOM中的<head>元素或文档本身，并创建一个分离的<script>元素。设置script元素的类型，然后把需要求值的字符串加载到该script元素的body内。将script元素附加到DOM上，作为head元素的一个子节点，将会导致该脚本在全局作用域内进行求值。
这段代码最常见的场景是动态执行从服务器端返回的代码。它几乎总是要求代码在全局作用域内进行执行，从而让新函数的使用变成必然。
2.函数反编译
反编译意味着将程序集或字节码重组成源代码。例如，将函数反编译成字符串：
function test(a){return a+a; }
console.assert(test.toString() === "function test(a){return a+a; }","Function decompiled");
3.代码求值实战
- JSON转化
运行时求值的最广泛使用方式是将JSON字符串转换为JavaScript对象表示法。例：
var json = '{"name":"Ninja"}';
var object = eval("("+ json +")");
assert(object.name === "Ninja", "My name is Ninja!");
- 导入有命名空间的代码
对于将命名空间导入到当前上下文，base2库提供了一个非常有趣的解决方案。因为没有办法将该问题进行自动化操作，因此我们可以利用运行时求值让该实现变得更简单。
每当一个新类或模块添加到base2包的时候，构造可执行代码的字符串，对其进行求值，可以将产生的函数引入到当前上下文中，示例如下：
base2.namespace ==
"var Base = base2.Base; var Package = base2.Package;" +
"var Abstract = base2.Abstract; var Module = base2.Module;" +
"var Enumberable = base2.Enumberable; var Map = base2.Map;" +
"var Collection = base2.Collection; var RegGrp = base2.RegGrp;" +
"var Undefined = base2.Undefined; var Null = base2.Null;" +
"var This = base2.This; var True = base2.True; var False = base2.False;" +
"var assignID = base2.assignID; var detect = base2.detect;" +
"var global = base2.global; var lang = base2.lang;"+
"var JavaScript base2.JavaScript; var JST = base2.JST;" +
"var JSON = base2.JSON; var IO = base2.IO; var MiniWeb = base2.MiniWeb;" +
"var DOM = base2.DOM; var JSB = base2.JSB; var code = base2.code;" +
"var doc = base2.doc;"
JavaScript忍者秘籍——运行时代码求值的更多相关文章
- 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
- JavaScript 对引擎、运行时、调用堆栈的概述理解
JavaScript 对引擎.运行时.调用堆栈的概述理解 随着JavaScript越来越流行,越来越多的团队广泛的把JavaScript应用到前端.后台.hybrid 应用.嵌入式等等领域. 这篇文 ...
- 如何将oc代码转换成运行时代码
// 运行时 其实就是oc的底层 平时写的代码 最终都是转成底层的运行时代码以下面程序为例子: 如果我们想要看我们的main.m文件底层转换成了怎样的运行时代码 ,我们可以这样做. 1.打开终端 ...
- webpack学习：uni运行时代码解读一 (页面初始化加载)
uni的vue代码是如何在微信小程序里面执行的,对此比较感兴趣所以去调试学习了一波. 准备工作 // 在vue.config.js里打开非压缩的代码 module.exports = { config ...
- 解读JavaScript 之引擎、运行时和堆栈调用
转载自开源中国 译者:Tocy, 凉凉_, 亚林瓜子, 离诌 原文链接 英文原文:How JavaScript works: an overview of the engine, the runtim ...
- 解读 JavaScript 之引擎、运行时和堆栈调用
https://www.oschina.net/translate/how-does-javascript-actually-work-part-1 随着 JavaScript 变得越来越流行,很多团 ...
- JavaScript忍者秘籍——驯服线程和定时器
1.定时器和线程 - 设置和清除定时器 JavaScript提供了两种方式,用于创建定时器以及两个相应的清除方法.这些方法都是window对象上的方法. 方法 格式 描述 setTimeout i ...
- JavaScript忍者秘籍——原型
概要:本篇博客主要介绍JavaScript的原型 1.对象实例化 - 初始化的优先级 初始化操作的优先级如下: ● 通过原型给对象实例添加的属性 ● 在构造器函数内给对象实例添加的属性 在构造器内的绑 ...
- JavaScript忍者秘籍——函数（下）
概要:本篇博客主要介绍函数的一些类型以及常见示例 1.匿名函数 使用匿名函数的常见示例: window.onload = function(){ assert(true,'power!'); }; / ...
随机推荐
- jQuery 2.0.3 源码分析Sizzle引擎解析原理
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...
- Spring实例
Spring实例 上次的博文中 深入浅出Spring(二) IoC详解 和 深入浅出Spring(三) AOP详解中,我们分别介绍了一下Spring框架的两个核心一个是IoC,一个是AOP.接下来我们 ...
- hibernate查询出的数据和数据库不一致
之前直接使用hibernate的时候就出现过已经进行物理存储后的数据,查询不出来的情况,既然是已经存储后的数据,说明事务已经提交,想必问题出在查询时,查询的缓存,没有查询数据库.时有时无就很奇怪. 现 ...
- CFileDialog类与16进制格式的dat文件
CFileDialog类与16进制格式的dat文件 要将数据保存为.dat文件,而且是16进制的数字,怎么保存? 要读取.dat文件,文件是16进制的,怎么读取? 用CFileDialog类可以得到[ ...
- JavaScript面向对象编程（二）构造函数和类
new关键字和构造函数 在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数.利用new关键字构造对象的实例代码如下: // ...
- 在多线程中进行UI操作--ios学习笔记
iOS 上不建议在非主线程进行UI操作,在非主线程进行UI操作有很大几率会导致程序崩溃,或者出现预期之外的效果. 我开始不知道这一点,在子线程中进行了弹窗操作,结果程序就出问题了! 报的错误是(EXC ...
- JQuery实现分页程序代码
JQuery实现分页程序代码 做Web开发的程序员,分页时在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuer ...
- C#多线程解决界面卡死问题
C#多线程解决界面卡死问题的完美解决方案 文章下最方有源码下载 问题描述:当我们的界面需要在程序运行中不断更新数据时, 当一个textbox的数据需要变化时, 对于这个问题可以先参考下我的另外一个文章 ...
- tastypie Django REST API developement 1)
Read by linux/GNU commands Let's follow and start from here:http://django-tastypie.readthedocs.org/e ...
- wubi安装ubuntu后，增加swap大小，优化swap的使用参数-----------让ubuntu健步如飞，为编译android源码准备
wubi安装ubuntu后,终端输入free -m可以查到如下信息: total used free shared buffers cached Mem: 1944 1801 143 0 557 70 ...