Javascript原型鏈和閉包深刻解析

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學習。