前言

相当不错的 Javascript 编程风格规范，建议大家采用此规范编写 Javascript。原文链接： http://dojotoolkit.org/developer/StyleGuide 。

翻译（Translated by）：i.feelinglucky{at}gmail.com from http://www.gracecode.com ，转载请注明出处、作者和翻译者，谢谢配合。

本文地址： http://code.google.com/p/grace/wiki/DojoStyle 。

序

Any violation to this guide is allowed if it enhances readability.

所有的代码都要变成可供他人容易阅读的。

快读参考

核心 API 请使用下面的风格：

下面的虽然不是必要的，但建议使用：

命名规范

1. 变量名称 必须为 小写字母。
2. 类的命名使用骆驼命名规则，例如：

   Account, EventHandler

3. 常量 必须 在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义，并且其成员 必须 使用骆驼命名规则或使用大写：

var NodeTypes = {
    Element : 1,
    DOCUMENT: 2
}

4. 简写单词 不能使用 大写名称作为变量名：

getInnerHtml(), getXml(), XmlDocument

5. 方法的命令 必须 为动词或者是动词短语：

obj.getSomeValue()

6. 公有类的命名 必须 使用混合名称（mixedCase）命名。
7. CSS 变量的命名 必须 使用其对应的相同的公共类变量。
8. 私有类的变量属性成员 必须 使用混合名称（mixedCase）命名，并前面下下划线（_）。例如：

var MyClass = function(){
   var _buffer;
   this.doSomething = function(){
   };
}

9. 变量如果设置为私有，则前面 必须 添加下划线。

this._somePrivateVariable = statement;

10. 通用的变量 必须 使用与其名字一致的类型名称：

setTopic(topic) // 变量 topic 为 Topic 类型的变量

11. 所有的变量名 必须 使用英文名称。
12. 变量如有较广的作用域（large scope），必须使用全局变量；此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
13. 如果变量有其隐含的返回值，则避免使用其相似的方法：

getHandler(); // 避免使用 getEventHandler()

14. 公有变量必须清楚的表达其自身的属性，避免字义含糊不清，例如：

MouseEventHandler，而非 MseEvtHdlr。

请再次注意这条规定，这样做得的好处是非常明显的。它能明确的表达表达式所定义的含义。例如：

dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler

15. 类/构造函数 可以使用 扩展其基类的名称命名，这样可以正确、迅速的找到其基类的名称：

EventHandler
UIEventHandler
MouseEventHandler

基类可以在明确描述其属性的前提下，缩减其命名：

MouseEventHandler as opposed to MouseUIEventHandler.

特殊命名规范

1. 术语 “get/set” 不要和一个字段相连，除非它被定义为私有变量。
2. 前面加 “is” 的变量名 应该 为布尔值，同理可以为 “has”, “can” 或者 “should”。
3. 术语 “compute” 作为变量名应为已经计算完成的变量。
4. 术语 “find” 作为变量名应为已经查找完成的变量。
5. 术语 “initialize” 或者 “init” 作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量。
6. UI （用户界面）控制变量应在名称后加控制类型，例如： leftComboBox, TopScrollPane。
7. 复数必须有其公共的名称约定（原文：Plural form MUST be used to name collections）。
8. 带有 “num” 或者 “count” 开头的变量名约定为数字（对象）。
9. 重复变量建议使用 “i”, “j”, “k” （依次类推）等名称的变量。
10. 补充用语必须使用补充词，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end, etc.
11. 能缩写的名称尽量使用缩写。
12. 避免产生歧义的布尔变量名称，例如：

isNotError, isNotFound 为非法

13. 错误类建议在变量名称后加上 “Exception” 或者 “Error”。
14. 方法如果返回一个类，则应该在名称上说明返回什么；如果是一个过程，则应该说明做了什么。

文件

1. 缩进请使用 4 个空白符的制表位。
2. 如果您的编辑器支持 文件标签_（file tags），请加添如下的一行使我们的代码更容易阅读：

   // vim:ts=4:noet:tw=0:
   //译注：老外用 VIM 编辑器比较多，此条可以选择遵循。

3. 代码折叠必须看起来是完成并且是合乎逻辑的：

   var someExpression = Expression1
       + Expression2
       + Expression3;
   
   var o = someObject.get(
       Expression1,
       Expression2,
       Expression3
   );
   
   //注：表达式的缩进与变量声明应为一致的。
   //注：函数的参数应采用明确的缩进，缩进规则与其他块保持一致。

变量

1. 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
2. 变量不能产生歧义。
3. 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
4. 变量应该尽量保持最小的生存周期。
5. 循环/重复变量的规范：
   • 只有循环控制块的话，则必须使用 FOR 循环。
   • 循环变量应该在循环开始前就被初始化；如使用 FOR 循环，则使用 FOR 语句初始化循环变量。
   • “do … while” 语句是被允许的。
   • “break” 和 “continue” 语句仍然允许使用（但请注意）。
6. 条件表达式
   • 应该尽量避免复杂的条件表达式，如有必要可以使用临时布尔变量。
   • The nominal case SHOULD be put in the “if” part and the exception in the “else” part of an “if” statement.
   • 应避免在条件表达式中加入块。
7. 杂项
   • 尽量避免幻数（Magic numbers），他们应该使用常量来代替。
   • 浮点变量必须指明小数点后一位（即使是 0）。
   • 浮点变量必须指明实部，即使它们为零（使用 0. 开头）。

布局

块

1. 普通代码段 应该 看起来如下：

while (!isDone){
    doSomething();
    isDone = moreToDo();
}

2. IF 语句 应该 看起来像这样：

if (someCondition){
    statements;
} else if (someOtherCondition){
    statements;
} else {
    statements;
}

3. FOR 语句 应该 看起来像这样：

for (initialization; condition; update){
    statements;
}

4. WHILE 语句 应该 看起来像这样：

while (!isDone) {
    doSomething();
    isDone = moreToDo();
}

5. DO … WHILE 语句 应该 看起来像这样：

do {
    statements;
} while (condition);

6. SWITCH 语句 应该 看起来像这样：

switch (condition) {
case ABC:
    statements;
    //  fallthrough
case DEF:
    statements;
    break;
default:
    statements;
    break;
}

7. TRY … CATCH 语句 应该 看起来像这样：

try {
    statements;
} catch(ex) {
    statements;
} finally {
    statements;
}

8. 单行的 IF – ELSE，WHILE 或者 FOR 语句也 必须 加入括号，不过他们可以这样写：

if (condition){ statement; }
while (condition){ statement; }
for (intialization; condition; update){ statement; }

空白

1. 操作符 建议 使用空格隔开（包括三元操作符）。
2. 下面的关键字 避免使用 空白隔开：
   • break
   • catch
   • continue
   • do
   • else
   • finally
   • for
   • function （如果为匿名函数，例如：var foo = function(){}; ）
   • if
   • return
   • switch
   • this
   • try
   • void
   • while
   • with
3. 下面的关键字必须使用空白隔开：
   • case
   • default
   • delete
   • function （如果为申明，例如：function foo(){}; ）
   • in
   • instanceof
   • new
   • throw
   • typeof
   • var
4. 逗号（,） 建议 使用空白隔开。
5. 冒号（:） 建议 使用空白隔开。
6. 点（.） 在后部 建议 使用空白隔开。
7. 点（.） 避免 在前部使用空白。
8. 函数调用和方法 避免 使用空白，例如： doSomething(someParameter); // 而非 doSomething (someParameter)
9. 逻辑块 之间使用空行。
10. 声明 建议 对齐使其更容易阅读。

注释

1. 生涩的代码就 没有必要 添加注释了，首先您需要 重写 它们。
2. 所有的注释请使用英文。
3. 从已解决的方案到未开发的功能，注释 必须 与代码相关。
4. 大量的变量申明后 必须 跟随一段注释。
5. 注释需要说明的是代码段的用处，尤其是接下来的代码段。
6. 注释 没有必要 每行都添加。

文档

下面提供了一些基本的函数或者对象的描述方法：

• 总结（summary）: 简短的表述此函数或者对象实现的目的
• 描述（description）: 对于此函数或者类的简短的描述
• 返回（return）: 描述此函数返回什么（并不包括返回类型）

基本函数信息

function(){
    // summary: Soon we will have enough treasure to rule all of New Jersey.
    // description: Or we could just get a new roomate.
    //          Look, you go find him.  He don't yell at you.
    //          All I ever try to do is make him smile and sing around
    //          him and dance around him and he just lays into me.
    //          He told me to get in the freezer 'cause there was a carnival in there.
    // returns:  Look, a Bananarama tape!
}

对象函数信息

没有返回值描述

{
    // summary: Dingle, engage the rainbow machine!
    // description:
    //          Tell you what, I wish I was--oh my g--that beam,
    //          coming up like that, the speed, you might wanna adjust that.
    //          It really did a number on my back, there. I mean, and I don't
    //          wanna say whiplash, just yet, cause that's a little too far,
    //          but, you're insured, right?
}

函数的声明

在有的情况下，对于函数的调用和声明是隐义（invisible）的。在这种情况下，我们没有办法在函数中加入说明等（供程序调用）。如果您遭遇了这种情况，您可以使用一个类来封装函数。

注：此此方法只能在函数没有初始化的参数情况下。如过不是，则它们会被忽略。

dojo.declare(
    "foo",
    null,
    {
        // summary: Phew, this sure is relaxing, Frylock.
        // description:
        //              Thousands of years ago, before the dawn of
        //              man as we knew him, there was Sir Santa of Claus: an
        //              ape-like creature making crude and pointless toys out
        //              of dino-bones, hurling them at chimp-like creatures with
        //              crinkled hands regardless of how they behaved the
        //              previous year.
        // returns: Unless Carl pays tribute to the Elfin Elders in space.
    }
);

参数

1. 简单类型

简单的类型的参数可以直接在函数参数定义中注释说明。

function(/*String*/ foo, /*int*/ bar)...

2. 可变类型参数
   下面是几个修饰符供参考：
   • ? 可选参数
   • … 说面参数范围不确定
   • 数组

   function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...

3. 全局参数描述

如果你想增加一个描述，你可以将它们移至初始化块。
基本信息格式为： *关键字* 描述字段（*key* Descriptive sentence）
参数和变量的格式为： *关键字* ~*类型*~ 描述字段（ *key* ~*type*~ Descriptive sentence）
注： *关键字* 和 ~*类型*~ 可以使用任何字母和数字表述。

function (foo, bar) {
    // foo: String
    //      used for being the first parameter
    // bar: int
    //      used for being the second parameter
}

变量

由于实例变量、原型变量和外部变量的声明是一致的，所以有很多的方法声明、修改变量。具体的如何定义和定位应在变量最先出现的位置指明变量的名称、类型、作用域等信息。

function foo() {
    // myString: String
    // times: int
    //        How many times to print myString
    // separator: String
    //        What to print out in between myString*
    this.myString = "placeholder text";
    this.times = 5;
}

foo.prototype.setString = function (myString) {
    this.myString = myString;
}

foo.prototype.toString = function() {
    for(int i = 0; i < this.times; i++) {
        dojo.debug(this.myString);
        dojo.debug(foo.separator);
        }
}
foo.separator = "=====";

对象中的变量注释

应使用和对象值和方法一致的标注方式，比如在他们声明的时候：

{
    // key: String
    //      A simple value
    key: "value",
    // key2: String
    //      Another simple value
}

返回值

因为函数可以同时返回多个不同（类型）的值，所以应每个返回值之后加入返回类型的注释。注释在行内注释即可，如果所有的返回值为同一类型，则指明返回的类型；如为多个不同的返回值，则标注返回类型为”mixed”。

function() {
    if (arguments.length) {
        return "You passed argument(s)"; // String
    } else {
        return false; // Boolean
    }
}

伪代码（有待讨论）

有时候您需要在函数或者类中添加对于此函数和类的功能性流程描述。如果您打算这样做，您可以使用 /*======== （= 字符最好出现 5 次或者更多），这样做的好处就是可以不用将这些东西加入代码（译注：原作者的意思可能为代码管理系统）。

这样看起来在 /*===== 和 =====*/ 会有非常长的一段注释，等待功能调整完毕以后就可以考虑是否删除。

/*=====
module.pseudo.kwArgs = {
        // url: String
    //          The location of the file
    url: "",
    // mimeType: String
    //          text/html, text/xml, etc
    mimeType: ""
}
=====*/

function(/*module.pseudo.kwArgs*/ kwArgs){
    dojo.debug(kwArgs.url);
        dojo.debug(kwArgs.mimeType);
}

建立跨浏览器通信有两个前提条件

1. 两个窗口都包含来自同一个域的页面；
2. 其中一个窗口包含对另一个窗口的引用。

第一个条件是JavaScript同源策略的结果，保护用户的隐私，第二个条件是为了使一个窗口知道另一个窗口的存在。实现通信主要是涉及到window对象的name和opener属性，以及open()方法。

window.name属性的作用是为HTML链接的target属性作引导的，同时它也可以引导弹出窗口。它的默认值为空，但可以设置的。

window.name = "endlesscode";

点击带有此target的链接，比如<a href=”somepage.html” target=”endlesscode”>，该链接就会在window.name为”endlesscode”的窗口打开。另外，也可以在window.open()方法中使用name，例如：

window.open("somepage.html", "endlesscode", [arguments]);

这样浏览器就会查找名字叫做”endlesscode”的窗口。如果它找到一个，somepage.html就会在这个窗口打开。如果没有找到，就找开一个新窗口，并将name命名为”endlesscode”。其实像wp的预览、优酷的视频观看页面以及卓越的书目录页面都是使用这种方式在同一个页面打开的。
window.opener属性是弹出窗口指回主窗口的引用，如果新页面被载入到弹出窗口中（如果用户点击了一个链接），opener属性仍旧可用。如果新页面是载入到主窗口中，则可以通过在弹出窗口中

opener.ST_newWindow = window;

来在主窗口中保存弹出窗口的引用。

弹出窗口拦截软件

主流的浏览器一般都会有弹出窗口拦截的功能，可以拦截页面上的弹出窗口，但实际上浏览器厂商并没有简单地禁用了window.open()方法，因为弹出窗口还是有合理的使用方法。相反，它们只拦截未被（用户）请求的弹出框。而对于“未被请求的弹出窗口”，浏览器厂商一般的定义似乎是：在用户点击之后打开的窗口是被请求的，而其他的则不是被请求的。因此，下面的代码是可以绕过弹出窗口过滤器的：

var popup;
document.onclick = function() {
    popup = window.open("somepage.html", "name", [arguments]);
}

这样，用户点击文档的任何位置，弹出窗口都会跳出来，因为点击动作是用户请求的。

href与replace()

location.href和location.replace()有同样的功能是，使浏览器载入新的页面，但并非完全一样。如果你改变了页面的location.href，就好像用户点击了某个链接，于是浏览器加载一个新页面。这个新页面就会成为窗口历史中的一项新条目。而如果使用replace()，新页面就会直接覆盖窗口历史当前页面的条目。

在IE中创建并添加option元素

在Explorer中createElement(option)是可以的，但是不直接支持appendChild(option)，想要在IE为select添加一个option的话，需要调用：

/* 方法一 使用select.options.add */
var newOpt = document.createElement("option");
newOpt.text = "text";
newOpt.value = "value";
select.options.add(newOpt);

/* 方法二 使用createTextNode建立option标签内的文字内容 */
var newOpt = document.createElement("option");
var oText = document.createTextNode("text");
newOpt.appendChild(oText);
newOpt.setAttribute("value", "value");
select.appendChild(newOpt);

更改样式表

成功进行样式表编辑的第一个必要条件就是支持document.styleSheets节点序列，document.styleSheets包含了link和style标签里面的样式表，以数组的形式组织，并按照在源代码中的出现顺序被一一编号。

访问样式表中的所有规则，Mozilla使用w3c规范定义的cssRules[]节点序列，而Explorer必须使用微软专有的rules[]节点序列，幸运的是，这两个属性除了名字不同外几乎是一样的。

currentSheet = document.styleSheets[0];
if (currentSheet.cssRules)
    sheetRules = currentSheet.cssRules;
else if (currentSheet.rules)
    sheetRules = currentSheet.rules;
else return;

每一条规则都有一个selectorText属性，以字符串的形式保存着规则的选择符：

/* 接上面 */
for (var i=0;i<sheetRules.length;i++)
    alert(sheetRules[i].selectorText);

每条规则都有一个style属性，它用起来像单个HTML元素的style属性：

/* 接上面 */
/* 第一条规则的color被设置为#cccccc */
var currentRule = sheetRules[0];
currentRule.style.color = "#cccccc";

在读取样式表完整文本上还没有跨浏览器的方法，cssText属性可以访问css文本内容，但浏览器们没有在这个属性的作用域上完全达成一致：

document.styleSheets[0].cssText;  //Windows & Mac 支持
document.styleSheets[0].cssRules[0].cssText;  //Mac下的Explorer和Mozilla
document.styleSheets[0].cssRules[0].style.cssText;   //所有浏览器都支持

添加和删除某个规则，w3c使用insertRule/deleteRule，而Explorer使用微软专用的addRule/removeRule。Safari和Opera完全不支持添加和删除的行为。

/* w3c */
var x = document.styleSheets[0];
x.insertRule('PRE { font:0.9em verdana }', 2); // (ruleContent, ruleIndex)
x.deleteRule(2); //(ruleIndex)

/* IE */
var x = document.styleSheets[0];
x.addRule('PRE', 'font:0.9em verdana', 2); // (selector, declaration, index)
x.removeRule(2); //(index)

其它

• readystatechange事件在Explorer中，是可以应用在所有的元素中，但其他浏览器只支持将它用在XMLHttpRequest对象上。
• load事件是在页面完全加载后（包括图片等文件），才会触发的。而无论什么原因引起页面释放时，会触发unload事件，包括点击一个链接、提交表单、关闭浏览器窗口等等。
• 取消事件传播:

var evt = [the event object];
if (evt.stopPropagation)   // w3c
    evt.stopPropagation();
evt.cancelBubble = true;  // ie

• appendChild、insertBefore、replaceChild三个dom的方法如果要插入的元素已经存在，则移除从当前的结构中移除要插入的元素，其他的元素维持不变。
• childNodes[]包含所有的子节点，children[]包括类型为元素节点的子节点而不包含文本类型的子节点。但children不是w3c dom规范的一部分。
• Explorer并非不允许设置input.type，而是动态创建的input在添加到文档中之前，只允许读/写一次，即:

/* 不可行 */
newField.type = "checkbox";

/* 可行 */
newField.setAttribute("type", "checkbox");

有这张图就够了，简单地说明一下

以Height为例，Width同理：

• div.clientHeight：可见窗口除去了margin+border之后的长度。
• div.offsetHeight：在div.clientHeight的基础上加了border和滚动条的长度。
• div.scrollHeight：就是元素内容的实际高度。

以Top为例，Left同理：

• div.clientTop：margin之后padding之前的长度值。
• div.offsetTop：该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。
• div.scrollTop：对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，即是在出现了纵向滚动条的情况下，滚动条拉动的距离。

关于offsetParent，不同的浏览器有不同的实现算法，有一种常见布局在各种浏览器中 offsetParent 是一样的，那就是：外层元素 div 的 position 计算值是 relative、absolute 时，内层元素 div 的 offsetParent 总是外层元素 div。

• Function.__proto__指向Function.prototype，这导致：

Function.constructor === Function
Function instanceof Function == true

即Function是它自己的构造器。

• Object.__proto__指向Function.prototype，即Object也是Function构造的实例，因此有：

Object instanceof Function == true

同时也等价于：

Object.constructor === Function

而Function.prototype.__proto__又是指向Object.prototype，即Function.prototype是Object构造的实例，因此有：

Function instanceof Object == true
Object instanceof Object == true

• Foo.__proto__指向了Function.prototype，可以看到自定义的函数Foo其实就是Function的一个实例：

Foo instanceof Function == true

参考：

• JavaScript Object Hierarchy

代码1：

function myFunc() {
	var name = "stephenchan";
	var age = 23;
	function code() {
		alert("Hello World!");
	};
}
var obj = new myFunc();
//输出undefined，对象实例没有原型
alert(obj.prototype);
//输出myFunc的函数代码，obj由myFunc构造出来的
alert(obj.constructor);
//输出true
alert(obj.constructor == myFunc);

//输出[object Object]，说明myFunc的原型是一个对象
alert(myFunc.prototype);
//输出function Function() { [native code] }，[native code]的意思是JavaScript引擎的内置函数
alert(myFunc.constructor);
//输出true，函数原型的构造器默认是该函数
alert(myFunc.prototype.constructor == myFunc);

构造器与函数的概念是一致的，即代码1中，myFunc就是一个构造器，因为通过new myFunc()就可以构造出一个对象实例了。因此，”alert(obj.prototype)”输出undefined说明了对象实例是没有原型的，”alert(myFunc.prototype)”输出[object Object]说明了构造器有原型，而“obj.constructor==myFunc”返回true说明obj的构造器是myFunc。

原型其实也是一个对象实例。再强调一下原型的含义是：如果构造器有个原型对象A，则由该构造器创建的实例(Object Instance)都必然复制于A，而且采用的读遍历机制复制的。读遍历复制的意思是：仅当写某个实例的成员时，将成员的信息复制到实例映像中。即当构造一个新的对象时，新对象里面的属性指向的是原型中的属性，读取对象实例的属性时，获取的是原型对象的属性值。而当对象实例对一个属性进行写操作时，才会将属性写到新对象实例的属性列表中。

图1 JavaScript使用读遍历机制实现的原型继承

代码2：

Object.prototype.value = "abc";
var obj1 = new Object();
var obj2 = new Object();
obj2.value = 10;
//输出abc，读取的是原型Object中的value
alert(obj1.value);
//输出10，读取的是obj2成员列表中的value
alert(obj2.value);
//删除obj2中的value，即在obj2的成员列表中将value删除掉
delete obj2.value;
//输出abc，读取的是原型Object中的value
alert(obj2.value);

图1是对代码2的描述，说明读遍历机制是如何在成员列表以至原型中管理对象成员的。只有对属性进行第一次写操作的时候，才会在对象的成员列表中添加该属性的记录。当obj1和obj2通过new来构造出来的时候，仍然是一个指向原型的引用，在操作过程中也没有与原型相同大小的对象实例创建出来。这样的读遍历就避免在创建新对象实例时可能的大量内存分配。当obj2.value属性被赋值为10的时候，obj2则在其成员表中添加了一个value成员，并赋值为10，这个成员表就是记录了obj2中发生了修改的成员名、值与类型。这张表是否与原型一致并不重要，只需要遵循两条规则：(1)保证在读取时被首先访问到。(2)如果在对象中没有指定的属性，则尝试遍历对象的整个原型链，直到原型为空或找到该属性。代码2中的delete操作是将obj2成员表中的value删除了，因此在读取obj2的value属性的时候就遍历到Object中读取。

函数的原型总是一个标准的、系统内置的Object()构造器的实例，不过该实例创建后constructor属性总先被赋值为当前的函数。

代码3：

function MyObject() {
}

//显示true，表明原型的构造器总是指向函数自身的
alert(MyObject.prototype.constructor == MyObject);

//删除该成员
delete MyObject.prototype.constructor;

//删除操作使该成员指向了父代类原型中的值
//均显示为true
alert(MyObject.prototype.constructor == Object);
alert(MyObject.prototype.constructor == new Object().constructor);

从代码3中可以看出，MyObject.prototype其实与一个普通对象”new Object()”并没有本质的区别，只是在创建时将constructor赋值为当前函数MyObject。然后，当一个函数的prototype有意义之后，它就摇身一变成了一个“构造器”，这时，如果用户试图用new运算符创建它的实例时，那么引擎就会再构造一个新的对象，并使这个新对象的原型链接向这个prototype属性就可以了。因此，函数与构造器并没有明显的界限。

一个构造器产生的实例，其constructor属性默认总是指向该构造器，而究其根源，则在于构造器（函数）的原型的constructor属性指向了构造器本身。
代码4：

function MyObject() {
}
var obj = new MyObject();
//输出为true，默认指向构造器
alert(obj.constructor == MyObject);
//输出为true，原型的构造器指向该构造器
alert(MyObject.prototype.constructor == MyObject);

由此可见，JavaScript事实上已经为构造器维护了原型属性，因此我们可以通过实例的constructor属性来找到构造器，并进而找到它的原型“obj.constructor.prototype”。但是，如果我们把构造器的原型修改了的话，会出现什么情况呢？如代码5，我们把MyObjectEx的原型修改了。
代码5：

function MyObject() {
}
function MyObjectEx() {
}
MyObjectEx.prototype = new MyObject();
var obj1 = new MyObject();
var obj2 = new MyObjectEx();
alert(obj1.constructor == obj2.constructor);    //true
alert(MyObjectEx.prototype.constructor == MyObject.prototype.constructor);    //true

在代码5中，obj1和obj2是由不同的两个构造器产生的实例，分别是MyObject和MyObjectEx。然而，我们看到，代码5中的两个alert都会输出true，即是说，由两个不相同的构造器产生的实例（代码5中的MyObject和MyObjectEx），它们的constructor属性却指向了相同的构造器，是不是很诡异？这个正确是体现了原型继承中出出现的“原型复制”了。要注意，MyObjectEx的原型是由MyObject构造出来的对象实例，即obj1和obj2都是从MyObject原型中复制出来的对象，因此它们的constructor指向的都是MyObject。那么怎么解决这个问题？
代码6：

function MyObject() {
    this.constructor = arguments.callee; //arguments.callee为MyObject，正确维护constructor，以便回溯外部原型链
}
MyObject.prototype = new Object(); //人为构建外部原型链

function MyObjectEx() {
    this.constructor = arguments.callee; //正确维护constructor，以便回溯外部原型链
}
MyObjectEx.prototype = new MyObject(); //人为构建外部原型链

obj1 = new MyObjectEx();
obj2 = new MyObjectEx();

代码6与代码5中的主要区别就是在于，在MyObjectEx的初始化中正确地维护了constructor属性，使当前的constructor属性指向了调用的构造器。代码6所描述的继承关系如图2：

图2 构造器原型链与内部原型链

其中有[proto]属性中一个对象的私有属性，用于正确维护对象的内部原型链，在Firefox中可以通过[__proto__]来访问，这个后面再讨论。我们可以看到MyObjectEx的构造器是MyObject的对象实例，而MyObject的构造器是Object的对象实例。
接代码6：

obj = new MyObject();
alert(obj.constructor === MyObject);    //true
alert(obj1.constructor === MyObjectEx);    //true
alert(obj.constructor === obj1.constructor);    //false

可以看到，obj和obj1从不同的构造器产生的实例，其constructor属性已经能够正确地指向相应的构造器，这个是由于在对象实例初始化的时候的赋值语句”this.constructor = arguments.callee;”。你可能会疑问为什么不采用下面这种方式来实现：

MyObjectEx.prototype = new MyObject();
MyObjectEx.prototype.constructor = MyObjectEx;

这样虽然能使obj1和obj2的constructor属性正确地指向了MyObjectEx，但是，这样同时也使得MyObjectEx的原型对象（MyObject构造的实例）的constructor属性没法往父代原型追溯。因为当MyObjectEx的原型对象想通过constructor属性来获取到MyObject构造器时，会发现获取到的是MyObjectEx的构造器，而不是期待的MyObject的构造器。
我们可以通过下面的语句来验证代码6是不是的确是如图2的关系链：

alert(obj1.constructor === MyObjectEx); //true
alert(MyObjectEx.prototype instanceof MyObject); //true
alert(MyObjectEx.prototype.constructor === MyObject); //true
alert(MyObject.prototype instanceof Object); //true
alert(MyObject.prototype.constructor === Object); //true
alert(obj1.constructor.prototype.constructor.prototype.constructor === Object); //true，完成了所有的回溯

好了，刚才上面提到了有一个不可访问的属性[proto]，这个属性是JavaScript引擎内部维护的原型链属性，这个属性在Firefox里面可以通过[__proto__]来访问的，一般情况下，[proto]属性指向的和prototype属性一样，指向的都是原型对象，两个有什么不同后面会有讲述。

//输出都是true，在Firefox中
alert(obj.__proto__ instanceof Object);
alert(obj1.__proto__ instanceof MyObject);
alert(obj2.__proto__ instanceof MyObject);

这个[proto]属性是JavaScript内部维护的，外部是不可访问的，由这个属性所维护的原型链为内部原型链，与由prototype和constructor维护的外部原型链。那么这两条原型链有什么区别呢？简单来说就是，通过prototype和constructor来维护的外部原型链是开发人员自己代码中回溯时用到的，而通过[proto]维护的内部原型链是JavaScript原型继承机制实现所需要的。具体来说，外部原型链就是做这种事：”alert(obj1.constructor.prototype.constructor.prototype.constructor === Object);”，也就是说当我们开发人员想要自己去回溯整个原型继承的结构链时，也只会在我们开发人员写代码时才出现通过prototype和constructor来访问外部原型链。而内部原型链，这个比较有意思，在［图1 JavaScript使用读遍历机制实现的原型继承］，我们看到，当我们访问一个对象实例的属性时，它如果发现在其成员列表中没有该属性，即会去访问原型的成员列表，把原型的默认值读取出来，也就是说，这个在原型链中回溯来查询成员属性的过程，只会在内部原型链中进行，这个过程是由JavaScript引擎自己去维护的，开发人员没法干涉。来看看代码，我觉得这个还是相当有意思的：
接代码6：

alert(obj.__proto__ instanceof Object);    //true
alert(obj1.__proto__ instanceof MyObject);    //true
alert(obj2.__proto__ instanceof MyObject);    //true
//按照上面所说的，在MyObjectEx的原型上添加了value的属性，那么在访问obj1和obj2的value属性时便会往原型中查找
MyObjectEx.prototype.value = "Hello World!";
//这里正确地输出"Hello World!"
alert(obj1.value);
//在此时，obj1和obj2都构造之后，我把原来的MyObjectEx的原型换了，变成MyObjectEx2
function MyObjectEx2() {}
MyObjectEx.prototype = new MyObjectEx2();
//这句究竟会输出什么呢？[Referece Error]还是？
alert(obj1.value);

最后的1个alert输出的”Hello World!”，有意思吧。即使我在上面把MyObjectEx的原型对象改变成新的MyObjectEx2，但是在obj1和obj2中的[proto]属性依然指向的是原来的MyObject构造的对象实例，也就是说内部访问属性时是通过[proto]来回溯原型链的，而不是通过prototype的（而且对象实例也没有prototype属性），这个就是内部原型链体现的威力。

参考：

• JavaScript对象真经
• 《JavaScript语言精髓与编程实践》

代码1：

var name = "stephenchan";
var age = 23;
function myFunc() {
    alert(name);
    var name = "endlesscode";
    alert(name);
    alert(age);
    alert(weight);
}
myFunc();
myFunc();

上述代码1中，两次调用myFunc()的输出是一致的。可能你会认为输出是：

stephenchan
endlesscode
23
[Reference Error]

但是结果却是：

代码1输出：
undefined
endlesscode
23
[Reference Error]

代码2：

var i = 10;
function myFunc() {
    var i = 20;
    function innerFunc() {
		alert(i);
    }
    return innerFunc;
}
var func = myFunc();
func();

上面的代码2会输出20，但为什么不输出10或者是输出undefined？

代码2输出：
20

代码3：

var name = "stephenchan";
function callMePlz() {
	alert(name);
}

function myFunc() {
	var name = "endlesscode";
	callMePlz();
}

myFunc();

上面的代码3输出的会是endlesscode、stephenchan还是undefined？

代码3输出：
stephenchan

代码4：

function callMePlz() {
	var name = "stephenchan";
	var intro = function() {
		alert("I am " + name);
	}
	return intro;
}

function showMe(arg) {
	var name = arg;
	var func = callMePlz();
	func();
}
showMe("endlesscode");

上面的代码4与代码3不同的是，从callMePlz返回的函数引用，然后再执行函数。

代码4输出：
I am stephenchan

代码5：

var name = "stephenchan";
function callMePlz() {
	var intro = function() {
		alert("I am " + name);
	}
	return intro;
}

function showMe(arg) {
	var name = arg;
	var func = callMePlz();
	func();
}
showMe("endlesscode");

上面的代码5与代码4不同的是原来在callMePlz函数中的变量name在全局环境中声明了，但输出的结果是：

代码5输出：
I am stephenchan

先不对上面的代码进行说明，讲述一下闭包和作用域链的概念。

闭包(closure)是什么？闭包与函数有着紧密的关系。“在JavaScript中，一个函数只是一段静态的代码、脚本文件，因此函数是一个代码书写时，以及编译期的、静态的概念；而闭包则是函数的代码在运行过程中的一个动态环境，是一个运行期的、动态的概念”。这是《JavaScript语言精髓和编程实践》中对函数和闭包的描述，实际上我们常说的闭包倒是可以表现为如上面代码2中的innerFunc一样，在myFunc的函数执行后返回的是一个在其内部定义的、外部可调用的函数引用，这个函数语言的特性在C和C++是没有的。为什么在myFunc结束之后innerFunc还能正常访问到myFunc里面的数据呢？这就涉及到函数执行环境与闭包的相关概念，闭包中所保留着函数运行的实例，环境以及作用域链等等，并在myFunc调用之后没有将函数实例直接丢弃，因此在调用innerFunc的时候能够引用到myFunc中声明的i。

作用域链(scope chain)是什么？顾名思义，就是由作用域组成的链，是一个类似链状的数据结构。作用域就是对上下文环境的数据描述。闭包和作用域链是紧密关系的，函数实例执行时的闭包是构成作用域链的基本元素。JavaScript代码在执行前会进行语法分析，在语法分析阶段，会记录全局环境中的变量声明和函数定义，构造函数的调用对象(Call Oject、Activation Object、Activate Object、活动对象，不同称呼罢了)和在全局环境下的作用域链。

图1

图1是《JavaScript语言精髓和编程实践》一书中对闭包相关元素的内部数据结构的描述。我们主要关注其中的ScriptObject，ScriptObject是对调用对象的一种描述。ScriptObject在语法分析阶段就已经构造好了，其中的varDecls是保存着函数中的变量声明，funcDecls保存着内部的函数声明。

在语法分析阶段，varDecls保存在函数中用var进行显示声明的局部变量，并且置默认值为undefined，这里就是在代码1中”alert(name)”输出为undefined的原因，由于myFunc在语法分析阶段就已经保留了标记符name在varDecls，在赋值语句”var name=’endlesscode’”执行之前name的值都是undefined，因此在”alert(name)”的时候就显示为undefined了。

而函数定义在语法分析阶段工作就稍微有点不同。在语法分析阶段，发现有函数定义的时候，除了记录函数的声明外，还会创建一个函数对象，并将当前的作用域链赋值给此函数对象的[[scope]]属性（这个属性是JavaScript引擎内部维护的，但是Firefox却是可以通过私有属性__parent__来访问它），这里要注意的是在语法分析阶段将作用域链赋值给[[scope]]属性，而不是在执行阶段。如果是在全局环境下，但当前的作用域链为只有一个元素，就是全局的调用对象（Windows Object, Global Object，不同称呼罢了）。这就是为什么在《JavaScript权威指南》中提到“JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里。”

下面以一段代码的大概处理流程来进行说明：

var outerVar1 = "var in global code";
function outerFunc(arg1, arg2) {
    var innerVar1 = "var in function code";
    function innerFunc() { return outerVar1 + "-" + innerVar1 + "-" + (arg1 + arg2); }
    return innerFunc();
}
var outerVar2 = outerFunc(10, 20);

执行处理过程大致如下：

1. 引擎启动，初始化Global Object，即window对象，全局的调用对象，建立作用域链，假设为scope_1，作用域链中只包含全局的上下文环境，即Global Object。
2. 语法分析阶段，扫描JavaScript代码，获取代码中变量和函数定义，其扫描过程如下：
   1. 发现变量outerVar1，在Global Object的varDecls中添加outerVar1属性，值为undefined。
   2. 发现函数outerFunc的定义，在Global Object的funcDecls中添加outerFunc，并创建函数对象（这里应该创建的是函数的原型对象），将scope_1传递给outerFunc的函数对象，即outerFunc内部的[[scope]]属性。另外注意，创建过程并不会对函数体中的JavaScript代码做特殊处理，可以理解为只是将函数JavaScript代码保存中函数对象的内部属性上，在函数执行时再做进一步处理。也就是说，这一步大概处理的就是记录函数定义，赋值[[scope]]属性记录当前定义的作用域，而没有进一步对outerFunc里面的代码进行进一步的语法分析。
   3. 发现变量outerVar2，在Global Object中的varDecls中添加属性，值为undefined。
3. 全局环境下语法分析结束，执行outerVar1赋值语句，赋值为”var in global code”。
4. 执行outerFunc，获取返回值。
   1. 创建调用对象，假设为avt_obj_1。同时将avt_obj_1链接起outerFunc的[[scope]]属性，构成一个新的作用域链，假设为scope_2，scope_2中的第一个对象为act_obj_1，act_obj_1指向scope_1。
   2. 处理参数列表，在act_obj_1中设置属性arg1、arg2，值分别为10和20。创建arguments对象并进行设置，将arguments设置为act_obj_1的属性。
   3. 对outerFunc函数体进行语法分析，注意这里在全局语法分析的时候并没有对outerFunc函数体进行语法分析：
      1. 发现变量innerVar1，在act_obj_1中的varDecls添加innerVar1属性，值为undefined。
      2. < 发现函数innerFunc的定义，使用这个定义创建函数对象，并将scope_2传递给innerFunc，作为innerFunc的[[scope]]属性，在act_obj_1的funcDecls添加innerFunc。
   4. outerFunc函数语法分析结束，执行innerVar1赋值语句，赋值为”var in function code”。
   5. 执行innerFunc，执行函数的处理流程是一致的：
      1. 创建调用对象，假设为act_obj_2；同时将avt_obj_2链接起innerFunc[[scope]]属性，构成一个新的作用域链，假设为scope_3，scope_3中的第一个对象为act_obj_2，act_obj_2指向scope_2。
      2. 处理参数列表，因为innerFunc没有参数，所以只需要创建arguments对象并设置为act_obj_2的属性。
      3. 对innerFunc进行语法分析，识别变量和函数，但没有发现变量定义和函数声明。
      4. 执行innerFunc函数。对任何一个变量引用，从scope_3开始进行链式搜索，以scope_3->scope_2->scope_1的顺序进行搜索，结果发现outerVar1在scope_1中的Global Object发现；innerVar1、arg1、arg2在scope_2中的act_obj_1中找到。
      5. 检查scope_3和act_obj_2的引用，发现没有其他引用，则丢弃，让引擎进行垃圾回收。
      6. 返回innerFunc执行的值。
   6. 检查没有对act_obj_1和scope_2的引用，则丢弃act_obj_1和scope_2。
   7. 返回结果。
5. 将outerFunc的返回结果赋值给outerVar2。

我们拿代码4的例子再对作用域链进行简单的分析：
代码4：

function callMePlz() {
	var name = "stephenchan";
	var intro = function() {
		alert("I am " + name);
	}
	return intro;
}

function showMe(arg) {
	var name = arg;
	var func = callMePlz();
	func();
}
showMe("endlesscode");

假如全局的语法分析已经结束，已经开始执行”showMe(‘endlesscode’)”了。在进入执行showMe的执行上下文时，我们可以看到”showMe”函数中[[scope]]属性记录中的作用域链为：

[[scope]] = [
    {//Global Object，因为在全局没有var声明的变量，因此就没有列出来
    document : ...,
    location : ...
    }
]

创建showMe的调用对象后，则新的作用域链为showMe的调用对象和全局调用对象组成：

[scope chain] = [
    {//showme_activation_obj
        name : undefined,
        func : undefined,
        arg : "endlesscode",
        arguments : ...
     },
    {//Global Object，因为在全局没有var声明的变量，因此就没有列出来
    document : ...,
    location : ...
    }
]

也就是”showMe调用对象->Global调用对象”这样的链式关系。接着，忽略showMe函数中语法分析等过程，到执行callMePlz()函数时，callMePlz函数的[[scope]]属性为

[[scope]] = [
    {//Global Object，因为在全局没有var声明的变量，因此就没有列出来
    document : ...,
    location : ...
    }
]

callMePlz函数的[[scope]]属性指示的作用域链也只包括了全局调用对象，因为callMePlz也是在全局环境下定义的。创建callMePlz的调用对象后，则新的作用域链为callMePlz的调用对象和全局调用对象组成：

[scope chain] = [
    {//callmeplz_activation_obj
        name : undefined,
        intro : undefined,
        arguments : ...
     },
    {//Global Object，因为在全局没有var声明的变量，因此就没有列出来
    document : ...,
    location : ...
    }
]

也就是”callMePlz调用对象->Global调用对象”这样的链式关系。可以看到，在callMePlz的作用域链中，并没有包括showMe的调用对象。当callMePlz进行语法分析的时候，找到intro函数时，将intro函数的[[scope]]属性赋值为：

[scope chain] = [
    {//callmeplz_activation_obj
        name : undefined,   //这里还是undefined，当语法分析结束，执行callMePlz时，这里就赋值为"stephenchan"
        intro : undefined,
        arguments : ...
     },
    {//Global Object，因为在全局没有var声明的变量，因此就没有列出来
    document : ...,
    location : ...
    }
]

callMePlz返回的是intro函数对象的引用，当在showMe函数中执行intro函数时，创建intro函数的调用对象，此时intro函数的作用域链为：

[scope chain] = [
    {//intro_activation_obj
        arguments : ...
     },
    {//callmeplz_activation_obj
        name : undefined,   //这里还是undefined，当语法分析结束，执行callMePlz时，这里就赋值为"stephenchan"
        intro : undefined,
        arguments : ...
     },
    {//Global Object，因为在全局没有var声明的变量，因此就没有列出来
    document : ...,
    location : ...
    }
]

由于在intro函数中没有声明变量和函数，所以看到的也只是一些内置的属性成员，此时intro函数的作用域链则为：”intro调用对象->callMePlz调用对象->Global调用对象”，因此，当执行intro函数时，则以”intro调用对象->callMePlz调用对象->Global调用对象”的顺序去搜索”name”变量，发现在callMePlz调用对象上找到了，因此在代码4中输出的是”I am stephenchan”而不是”I am endlesscode”。

以上面的分析方法来分析上述的其他代码，就容易理解其输出了。

对于Eval函数的环境中，进入Eval函数执行时会创建一个新的作用域链，至于作用域链的内容，在IE和Mozilla中会稍有不同。

var i = 100;
function myFunc(ctx) {
    var i = "test";
    eval('i = "hello world!"');
}
myFunc();
alert(i);

上面的代码，毫无疑问，在IE和Mozilla都会显示100，因为eval代码执行的上下文环境是myFunc函数中的i，而非全局中的i。然后，再看下面代码：

var i = 100;
function myFunc(ctx) {
    var i = "test";
    window.eval('i = "hello world!"');
}
myFunc();
alert(i);

上面代码中，输出的还是100吗？还是”hello world!”呢？这取决于不同的浏览器，在IE中，输出的結果依然100，而在Mozilla中，输出却为”hello world!”，因为在IE中，eval函数作为全局对象Global Object的函数，只能获得访问到其执行环境下的作用域链，而不能获得全局作用域链的能力。而在Mozilla中，eval函数是所有对象的一个方法，而并非只是Global Object的方法，因此以window.eval的方式调用，得到的作用域链则是全局环境下的作用链，因此直接将全局环境下的i进行了修改。
另外，函数闭包内的标识符系统有优先顺序，其优先级从高到低为：this > 局部变量(varDecls) > 函数形式参数名(argsName) > arguments关键字 > 函数名(funcNames)。

//输出'hi'，说明argsName > funcNames。
function foo(foo) {
    alert(foo);
}
foo('hi');

//输出100的类型"number"，说明argsName > arguments。
function foo2(arguments) {
    alert(typeof arguments);
}
foo2（100）;

//输出arguments的类型为'object‘，说明arguments > funcNames。
function arguments() {
    alert(typeof arguments);
}
arguments();

//输出'test'，形式参数名与未赋值局部变量重复时，取形式参数值。
function foo3(str) {
    var str;
    alert(str);
}
foo3('test');

//输出'member'，形式参数与有值的局部变量重复时，取局部变量。
function foo4(str) {
    var str = 'member';
    alert(str);
}
foo4('test');

参考：

• JavaScript对象模型-执行模型
• JavaScript作用域的原理
• 深入理解JavaScript闭包(closure)
• 《JavaScript语言精髓与编程实践》