读高性能JavaScript编程第二章让我知道了代码为什么要这样写

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

代码为什么要这样写？

而不这样？

//avoid

function initUI(){
var bd = document.body,
links = document.getElementsByTagName_r("a"),
i = 0,
len = links.length;
while(i < len){
update(links[i++]);
}
document.getElementById("go-btn").onclick = function(){
start();
};
bd.className = "active";
}

很明显我们都知道第一个提取了局部变量doc保存document对象所以性能要比第二个好，为什么呢？

首先要了解 js引擎的四种Data Access （数据访问）。

1、访问 Literal values 直接量 eg：字符串，数字，布尔值，对象，数组，函数，正则表达式，具有特殊意义的空值，以及未定义。

2、访问 Variables 变量 var创建用于存储数据值。

3、访问 Array items 数组项具有数字索引的数组对象。

4、访问 Object members 对象成员具有字符索引的js对象。

从上面的例子我们也能猜到访问局部变量（doc）比访问对象成员和数组项更快。（这里暂时不考虑 dom scripting ，因为第三章会讲。）

那么为什么访问对象成员和数组项要慢呢？书中说的很详细，我只介绍一下自己的理解和摘录。

大多数 JavaScript 代码以面向对象的形式编写。无论通过创建自定义对象还是使用内置的对象，诸如
文档对象模型（DOM）和浏览器对象模型（BOM）之中的对象。
对象成员包括属性和方法，在 JavaScript 中，二者差别甚微。对象的一个命名成员可以包含任何数据类
型。既然函数也是一种对象，那么对象成员除传统数据类型外，也可以包含一个函数。当一个命名成员引
用了一个函数时，它被称作一个“方法”，而一个非函数类型的数据则被称作“属性”。
JavaScript中的对象是基于原形的。原形是其他对象的基础，定义并实现了一个新对象所必须具有的成
员。这一概念完全不同于传统面向对象编程中“类”的概念，它定义了创建新对象的过程。原形对象为所有
给定类型的对象实例所共享，因此所有实例共享原形对象的成员。
一个对象通过一个内部属性绑定到它的原形。Firefox，Safari，和 Chrome 向开发人员开放这一属性，称
作__proto__；其他浏览器不允许脚本访问这一属性。任何时候你创建一个内置类型的实例，如 Object 或
Array，这些实例自动拥有一个 Object 作为它们的原形。
因此，对象可以有两种类型的成员：实例成员（也称作“own”成员）和原形成员。实例成员直接存在于
实例自身，而原形成员则从对象原形继承。

这些很难理解，但是看了后很透彻。紧接着最后一句话，你调用实例成员肯定比调用原型成员要快，比如

var book = {
title: "High Performance JavaScript",
publisher: "Yahoo! Press"
};
alert(book.toString());
alert(book.title);

book 本身是没有toString 的但是程序编译并不报错，因为toString是它的原型成员。

假设book.title === book.toString()(上面已经讲了属性和方法的区分其实并不严格) book.toString() 依旧比 book.title 更慢。

book创建后其原型绑定在 _proto_ 内部属性上，观察这个原型可以看到 toString() 这个标识符 book 本身并没有toString这个function

而是从它的原型上继承得来。有一个前提问题：在调用 book.title 的时候，js引擎如何知道 title是否是未定义的呢？

在函数执行过程中，每遇到一个变量，标识符识别/解析这些变量的方法是按顺序搜索运行期上下文的作用域链查找同名标识符，如果找不到就是未定义，

所以通常返还未定义注定是检索了整个作用域链。正是这种类似的深度搜索影响了性能。

如果在作用域链里 toString 比 title更靠后那么就可以确定title 会比toString更先找到。

什么是运行期上下文，什么是作用域链？

每一个 JavaScript 函数都被表示为对象。进一步说，它是一个函数实例。函数对象正如其他对象那样，
拥有你可以编程访问的属性，和一系列不能被程序访问，仅供 JavaScript 引擎使用的内部属性。其中一个
内部属性是[[Scope]]，由ECMA-262 标准第三版定义。
内部[[Scope]]属性包含一个函数被创建的作用域中对象的集合。此集合被称为函数的作用域链，它决定
哪些数据可由函数访问。此函数作用域链中的每个对象被称为一个可变对象，每个可变对象都以“键值对”
的形式存在。当一个函数创建后，它的作用域链被填充以对象，这些对象代表创建此函数的环境中可访问
的数据。例如下面这个全局函数：
function add(num1, num2){
var sum = num1 + num2;
return sum;
}