JavaScript深入系列的学习（一）

JavaScript深入之从原型到原型链
JavaScript深入之词法作用域和动态作用域
JavaScript深入之执行上下文栈

JavaScript深入之从原型到原型链

我们知道，当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。

prototype

每个函数都有一个prototype 属性，就是我们经常在各种例子中看到的那个prototype，比如：

function Person() {

}
// 虽然写在注释里，但是你要注意：
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

__ proto __

这是每一个JavaScript对象(除了null )都具有的一个属性，叫__ proto __，这个属性会指向该对象的原型。

为了证明这一点,我们可以在火狐或者谷歌中输入：

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

constructor

指向实例倒是没有，因为一个构造函数可以生成多个实例，但是原型指向构造函数倒是有的，这就要讲到第三个属性：constructor，每个原型都有一个 constructor 属性指向关联的构造函数。

为了验证这一点，我们可以尝试：

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

所以再更新下关系图：

综上我们已经得出：

function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

原型的原型

在前面，我们已经讲了原型也是一个对象，既然是对象，我们就可以用最原始的方式创建它，那就是：

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

其实原型对象就是通过Object构造函数生成的，结合之前所讲，实例的__ proto __ 指向构造函数的 prototype，所以我们再更新下关系图：

原型链

那 Object.prototype的原型呢？null，我们可以打印：

console.log(Object.prototype.__proto__ === null) // true

null表示“没有对象”，即该处不应该有值。

所以 Object.prototype.__ proto __的值为 null跟 Object.prototype没有原型，其实表达了一个意思。

所以查找属性的时候查到Object.prototype就可以停止查找了。

大家可能不会注意的地方

constructor

首先是constructor 属性，我们看个例子：

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时，其实person 中并没有 constructor 属性,当不能读取到constructor 属性时，会从person 的原型也就是Person.prototype中读取，正好原型中有该属性，所以：

person.constructor === Person.prototype.constructor

__ proto __

其次是__ proto __，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype 中，实际上，它是来自于 Object.prototype，与其说是一个属性，不如说是一个 getter/setter，当使用 obj.__ proto __ 时，可以理解成返回了Object.getPrototypeOf(obj)。

真的是继承吗？

继承意味着复制操作，然而JavaScript 默认并不会复制对象的属性，相反，JavaScript只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

作用域

作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript采用词法作用域(lexical scoping)，也就是静态作用域。

JavaScript 中，函数的作用域在函数定义的时候就决定了。

静态作用域与动态作用域

因为JavaScript采用的是词法作用域，函数的作用域在函数定义的时候就决定了。

而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。

让我们认真看个例子就能明白之间的区别：

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

// 结果是 ???

JavaScript采用的是静态作用域，先执行 foo 函数，从foo函数内部查找是否有局部变量value，如果没有，就根据书写的位置，查找上面一层的代码，也就是value 等于 1，所以结果会打印 1。

假设JavaScript采用动态作用域，让我们分析下执行过程：

执行foo 函数，依然是从foo 函数内部查找是否有局部变量 value。如果没有，就从调用函数的作用域，也就是bar 函数内部查找value 变量，所以结果会打印2。

前面我们已经说了，JavaScript采用的是静态作用域，所以这个例子的结果是1。

执行上下文栈

顺序执行？

如果要问到JavaScript 代码执行顺序的话，想必写过 JavaScript的开发者都会有个直观的印象，那就是顺序执行，毕竟：

var foo = function () {
    console.log('foo1');
}

foo();  // foo1

var foo = function () {
    console.log('foo2');
}

foo(); // foo2

然而去看这段代码：

function foo() {
    console.log('foo1');
}

foo();  // foo2

function foo() {
    console.log('foo2');
}

foo(); // foo2

打印的结果却是两个 foo2。这是因为 JavaScript引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。

当执行一段代码的时候，会进行一个“准备工作”，比如第一个例子中的变量提升，和第二个例子中的函数提升。

可执行代码

这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了？

其实很简单，就三种，全局代码、函数代码、eval代码。

举个例子，当执行到一个函数的时候，就会进行准备工作，这里的“准备工作”，让我们用个更专业一点的说法，就叫做"执行上下文(execution contexts)"。

执行上下文栈

接下来问题来了，我们写的函数多了去了，如何管理创建的那么多执行上下文呢？

所以 JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。

为了模拟执行上下文栈的行为，让我们定义执行上下文栈是一个数组：

    ECStack = [];

试想当 JavaScript开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用globalContext表示它，并且只有当整个应用程序结束的时候，ECStack 才会被清空，所以ECStack最底部永远有个globalContext：

    ECStack = [
        globalContext
    ];

现在 JavaScript 遇到下面的这段代码了：

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。知道了这样的工作原理，让我们来看看如何处理上面这段代码：

// 伪代码

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中竟然调用了fun2，还要创建fun2的执行上下文
ECStack.push(<fun2> functionContext);

// fun2还调用了fun3！
ECStack.push(<fun3> functionContext);

// fun3执行完毕
ECStack.pop();

// fun2执行完毕
ECStack.pop();

// fun1执行完毕
ECStack.pop();

// javascript接着执行下面的代码，但是ECStack底层永远有个globalContext