Javascript原型链和闭包深入解析

为什么80%的码农都做不了架构师？>>>   

Javascript语法核心

Javascript目前可以说是Web前段开发标配脚本语言，相关标准已经发展到ES6，不过该标准并未得到大部分浏览器的支持，并且在该标准之前的很多项目都是基于ES5.x标准。文本所介绍的JavaScript语法即为ES5.x标准所定义的，也是目前浏览器完美支持的标准。
对于任何计算机语言的标配，控制结构、变量、函数等相关概念，这里不会做相关介绍。本文主要解决的是，JavaScript中最让人费解的两个概念，原型链和闭包。

原型链

对于原型链，个人认为一句话可以概括，即“原型链是以对象的构造函数形成的单向链表”。从中我们可以发现JavaScript中的对象间继承是在建立在对象的构造函数对象(函数的prototype属性或对象的__proto__属性)基础之上的，对象和其构造函数对象间存在连接。在这里我没有使用构造函数这一名称，而是在其后面加上了对象二字，主要是为了强调，JavaScript中对象的构造函数本身就是对象这一事实。JavaScript通过这一方法，巧妙的解决了私有和公有这一问题。
下面看几段代码，更好的感受JavaScript中的原型链。

Object.bar = "bar";
Object.prototype.foo = "foo";

function BaseClass(){
    this.type = "base";
    this.age = 100;
}
BaseClass.prototype.name = "baseclass";
var p0 = new BaseClass();
console.log(p0.type);
console.log(p0.name);
console.log(p0.foo);
console.log(p0.bar);

function DerivedClass(){
    this.type = "derived";
}
DerivedClass.prototype = BaseClass.prototype;
var p1 = new DerivedClass();
console.log(p1.type);
console.log(p1.name);

DerivedClass.prototype = new BaseClass();
var p2 = new DerivedClass();
console.log(p2.age);

function OtherClass(){
    var obj = function(){};
    obj.prototype = new BaseClass();
    return new obj();
}

var p3 = OtherClass();
var p4 = OtherClass();
var p5 = new OtherClass();
var p3p = Object.getPrototypeOf(p3);
var p4p = Object.getPrototypeOf(p4);
p3p.name = "p3";
p4p.name = "p4";

console.log(p3.name);
console.log(p4.name);
console.log(p5.name);

能够正确的说出各个console.log的输出值，基本上对JavaScript中的原型链完全理解了。对于在原型链基础上形成的各种各样的面向对象的不同表达方式，本质上还是脱离不了prototype和proto。

闭包

闭包是JavaScript中很重要的概念，该词翻译自closure，英文为关闭的意思。想理解闭包的本质还是要从closure原意理解。下面先看一段代码：

var x = 10;

function closure1(fn) {
    var x = 5;
    fn();
}

function closure2(){
    var x = 15;
    return function(){
        console.log(x);
    };
}

closure1(function(){
    console.log(x);
});
closure2()();

closure1中console打印出的值为10，而不是5，closure2中console打印出的位15，而不是10。一般的语言上述两个函数可能输出的都是10，但是JavaScript中却不同。导致这一现象的主要原因就是闭包，闭包在JavaScript中表达的含义可以理解为函数作用于闭合，也就是说函数真正作用的作用于是在其定义的时候的作用于，这也就是为什么上述两个代码返回值分别是10和15的原因。closure1的回调函数绑定的是全局的x，closure2返回的函数绑定是是局部的x。

小结

虽然ES6标准中，JavaScript通过新的关键字和语法的引入解决了很多和我们常用的面向对象语言中不同的机制，但在大范围被支持和使用之前，大家还是应对ES5.x标准达到深入理解才好。对于JavaScript中其它的一些特性，虽然比较奇葩，但都比较容易理解，本文并没有做相关介绍，若有不清楚的可以参考MDN学习。

转载于:https://my.oschina.net/taodf/blog/1926069