摘要：創(chuàng)建一個(gè)新的對(duì)象即實(shí)例對(duì)象把新對(duì)象的指向后面構(gòu)造函數(shù)的原型對(duì)象。簡(jiǎn)單來(lái)驗(yàn)證一下等同與對(duì)象沒(méi)有原型對(duì)象的原型對(duì)像等同于構(gòu)造函數(shù)是等同于，構(gòu)造函數(shù)是七原型鏈的作用其實(shí)，原型鏈的根本作用就是為了屬性的讀取。

在JavaScript中，我們創(chuàng)建一個(gè)函數(shù)A(就是聲明一個(gè)函數(shù)), 那么 js引擎 就會(huì)用構(gòu)造函數(shù)Function來(lái)創(chuàng)建這個(gè)函數(shù)。所以，所有的函數(shù)的constructor屬性都指向 構(gòu)造函數(shù)Function。A.constructor === Function; //true（函數(shù)本身并沒(méi)有這個(gè)屬性，后面介紹。記住，這里是函數(shù)，重點(diǎn)，要考，哈哈） 然后會(huì)在內(nèi)存中創(chuàng)建一個(gè)原型對(duì)象B，原型對(duì)象這個(gè)東西，看不見(jiàn)，摸不著，只能通過(guò)函數(shù)的 prototype 來(lái)獲取這個(gè)對(duì)象。( 即：prototype的屬性的值是這個(gè)對(duì)象 )。

對(duì)象的創(chuàng)建，有三種方式
1、字面量方式(又稱(chēng)直接量)

啥是字面量呢？可以理解為，沒(méi)用new出來(lái)的都屬于字面量創(chuàng)建。

舉個(gè)栗子：

var c = {};     //c 是變量， {} 就是字面量了

字面量對(duì)象的創(chuàng)建過(guò)程跟函數(shù)的過(guò)程相似，當(dāng)你聲明一個(gè)對(duì)象字面量時(shí)，js引擎就會(huì)構(gòu)造函數(shù) Object 來(lái)創(chuàng)建這個(gè)對(duì)象，所以 效果等同 new Object()

2、構(gòu)造器方式

這個(gè)呢，就是用 new 創(chuàng)建。

栗子在此：

var c = new Object();

3、Object.create

這是個(gè)ES5中新增的方法，這個(gè)方法是創(chuàng)建一個(gè)新對(duì)象，把它的__proto__指向傳進(jìn)來(lái)的函數(shù)或者對(duì)象。到底是怎么回事呢，下面，咱們來(lái)簡(jiǎn)單實(shí)現(xiàn)下它的功能

function create(proto, options){     //proto表示傳入的函數(shù)或者對(duì)象，options表示給子類(lèi)添加的屬性
    var obj = {};
    obj.__proto__ = proto;
    if(options == null){
        return obj;
    }
    return Object.defineProperties(obj,options);    //Object.defineProperties方法直接在一個(gè)對(duì)象上定義新的屬性或修改現(xiàn)有屬性，并返回該對(duì)象。所以這里就直接return了
    }

檢驗(yàn)一下：

var a = function(){};

//自制的create
var b = create(a);
console.log(b.__proto__ === a);   //true;
var c = create(a.prototype);
console.log(c.__proto__ === a.prototype);   //true

//Object.create
var d = create(a);
console.log(d.__proto__ === a);   //true;
var e = create(a.prototype);
console.log(e.__proto__ === a.prototype);   //true

這里說(shuō)明一下，你可以在別處看到的create的實(shí)現(xiàn)是這樣的：

//這里就簡(jiǎn)化第二個(gè)參數(shù)了。就寫(xiě)第一個(gè)參數(shù)的實(shí)現(xiàn)
function create(proto){
    function f(){};
    f.prototype = proto;
    return new f();
}

這個(gè)是兼容的寫(xiě)法，因?yàn)椋?b>__proto__ 屬性是非標(biāo)準(zhǔn)的，部分現(xiàn)在瀏覽器實(shí)現(xiàn)了該屬性。其實(shí)，你要是明白，new到底干了啥， 你就明白，這兩個(gè)實(shí)際是一個(gè)東西了。

創(chuàng)建一個(gè)新的對(duì)象（即實(shí)例對(duì)象）

把新對(duì)象的__proto__ 指向 new 后面構(gòu)造函數(shù) 的原型對(duì)象。

把構(gòu)造函數(shù)中的 this 指向 實(shí)例對(duì)象。

做一些處理，然后返回該實(shí)例對(duì)象。

下面，手寫(xiě)一個(gè)方法 實(shí)現(xiàn)new 的功能：

function New(func){    //func 指?jìng)鬟M(jìn)來(lái)的構(gòu)造函數(shù),關(guān)于構(gòu)造函數(shù)，我個(gè)人理解來(lái)就是用來(lái)生成一個(gè)對(duì)象實(shí)例的函數(shù)。

    var obj = {};   //這里就直接新建一個(gè)空對(duì)象了，不用new Object了，效果一樣的，因?yàn)槲腋杏X(jué)這里講實(shí)現(xiàn)new的功能   再用 new 就不太好。
    
    if(func.prototype != null){
        obj.__proto__ = func.prototype;
    }
  
    func.apply(obj,Array.prototype.slice.call(arguments, 1));
    //把func構(gòu)造函數(shù)里的this 指向obj對(duì)象，把傳進(jìn)來(lái)的第二個(gè)參數(shù)開(kāi)始，放入func構(gòu)造函數(shù)里執(zhí)行，比如：屬性賦值。

    return obj;
    
}

不知各位看客是否看明白了呢，簡(jiǎn)單指明一下把

function create(proto){
    var f = function(){};
    f.prototype = proto;
    return new f();

//就等于
function create(proto){
    var f = function(){};
    var obj = {};
    f.prototype = proto;
    obj.__proto__ = f.prototype;
    return obj;
}

//就等于
function create(proto){
    var obj = {};
    obj.__proto__ = proto;
    return obj;
}

//看明白了嗎， 就是用 function f 做了一下過(guò)渡。

//驗(yàn)證
function a(){};
var b = create(a);
console.log(b.__proto__ === a);     //true;

我想，一說(shuō)到JavaScript的原型是令人奔潰的，其中prototype容易和__proto__兩者的聯(lián)系就太頭疼了，反正看圖比看字舒服。

我看大多數(shù)的教程都是把prototype 和 __proto__放一起講，我覺(jué)得還是分開(kāi)將比較好，本來(lái)就不是一個(gè)東西

這是個(gè)函數(shù)才有的屬性，它保存著對(duì)其原型對(duì)像的引用，即指向原型對(duì)象。（任何函數(shù)都有原型對(duì)象。）它的原型對(duì)象是看不見(jiàn)，摸不著的，只能通過(guò)函數(shù)的prototype屬性來(lái)獲取它。

比如

function A(){};
A.prototype;     //這樣就獲取到了A的原型對(duì)象

總結(jié)：你看到prototype，你就想著它對(duì)應(yīng)著，它的原型對(duì)象就行。

每當(dāng)你創(chuàng)建一個(gè)函數(shù)，js 就會(huì) 對(duì)應(yīng)的生成一個(gè)原型對(duì)象。它只能被函數(shù)的prototype屬性獲取到。（A.prototype 整體變現(xiàn)為A的原型對(duì)象）

這個(gè)是非標(biāo)準(zhǔn)的屬性，現(xiàn)代部分瀏覽器支持，比如，火狐，谷歌。對(duì)應(yīng)的標(biāo)準(zhǔn)屬性是[[prototype]]，這是個(gè)隱藏屬性，獲取不到。
這個(gè)屬性就是把所有的函數(shù)啊，對(duì)象啊，連成一條鏈的東西，我們稱(chēng)為原型鏈。這條鏈的終點(diǎn)是Object.prototype.__proto__ === null。

那它到底指向誰(shuí)呢，我給了兩種記憶方式吧：

1、函數(shù)的__proto__ 指向Function.protoype，原型對(duì)象的__proto__指向Object.prototype的。字面量 和 new出來(lái)的實(shí)例對(duì)象 ，指向其構(gòu)造函數(shù)（誰(shuí) new 出來(lái)的）的prototype， Object.create 創(chuàng)建的對(duì)象呢，就是上面說(shuō)的，你給它誰(shuí)，它就指向誰(shuí)。


2、除了Object.create創(chuàng)建的對(duì)象的__proto__指向你給定的，原型對(duì)象的__proto__指向Object.prototype，其他的__proto__ 都是指向其構(gòu)造函數(shù)的原型對(duì)象。（你要是看懂了上面的new的實(shí)現(xiàn)，就應(yīng)該明白為啥了。 ）

第二點(diǎn)注意：所有函數(shù)都是 構(gòu)造函數(shù) Function 創(chuàng)建出來(lái)的，所以，函數(shù)的構(gòu)造函數(shù) 就是 Function。

選這兩個(gè)中你喜歡的一個(gè)，對(duì)著下面的圖找答案:

constructor 屬性是原型對(duì)象獨(dú)有的，它指向的就是它的構(gòu)造函數(shù)。上面的一、prototype中說(shuō)，函數(shù)的prototype屬性指向它的原型對(duì)象。此時(shí)的函數(shù)是構(gòu)造函數(shù)了。所以函數(shù) 和 它的原型對(duì)像 以這兩個(gè) 屬性 保持著 相互聯(lián)系。

比如：

function A(){};
A.prototype.constructor === A   //true

Object.prototype.constructor === Object   //true

那函數(shù)的constructor 和 普通對(duì)象的 constructor 是怎么回事呢?

開(kāi)頭說(shuō)的function A(){};A.constructor 不知道大家有沒(méi)有點(diǎn)疑惑？不是原型對(duì)象才有的嗎？

其實(shí)， 他們就是在一條原型鏈上的，也就是說(shuō)，A 上沒(méi)有 constructor 屬性，它就會(huì)沿著原型鏈向上查找，到了 Object的原型對(duì)象上，就找到了constructor 屬性，于是就可以用 A.constructor 了.

比如：

var Person = function(name) {
    this.name = name;
}

Person.prototype.getName = function(){
    return this.name;
}

var p = new Person("666");

console.log(p.getName());    //666

看這里Person 構(gòu)造函數(shù)里是不是沒(méi)有g(shù)etName 方法，但是 p 實(shí)例怎么可以用呢？
因?yàn)閜實(shí)例 的__proto__指向 的原型對(duì)象上有 getName 函數(shù)，所以 p 向原型鏈上查找到了 Person 的原型對(duì)象上， 它有g(shù)etName 方法， 于是， p 就可以使用這個(gè)方法了。

注意：所以，在找構(gòu)造函數(shù)時(shí)，需要注意是在它的原型鏈上找，而不是原型對(duì)象上：

Object.constructor === Object.__proto__.constructor
//true

啥是構(gòu)造函數(shù)？其實(shí)每個(gè)函數(shù)都是構(gòu)造函數(shù)，只是我們一般把 生成實(shí)例對(duì)象 的函數(shù) 稱(chēng)為構(gòu)造函數(shù)（通過(guò)new ，new 后面的就是構(gòu)造函數(shù)），本質(zhì)是函數(shù)。

比如：

var Person = function(name) {
    this.name = name;
    this.getName = function(){
        return this.name;
    }
}

var p1 = new Person("zdx");

console.log(p1.getName());     //zdx

var p2 = new Person("666");

console.log(p2.getName())     //666

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

//這里的Person 是個(gè)函數(shù)對(duì)吧，然后外面用  new Person();
//創(chuàng)建了一個(gè)Person 的實(shí)例，此時(shí)，Person 就是一個(gè)構(gòu)造函數(shù)了，也稱(chēng)它為類(lèi)，我們把類(lèi)的首字母都大寫(xiě)。
//因?yàn)椋@個(gè)函數(shù)，使用 new 可以構(gòu)造無(wú)數(shù)個(gè)實(shí)例來(lái)。

說(shuō)一下，怕有人不知道，實(shí)例就是實(shí)例對(duì)象，因?yàn)橐粋€(gè)實(shí)例，它本身就是對(duì)象。

開(kāi)始放大招了，哈哈：

function Person(name) {
    this.name = name;
}

var p = new Person("zdx");

console.log(p.__proto__ === Person.prototype);   //true
//p是實(shí)例對(duì)象, 它的構(gòu)造函數(shù)是 Person，按照上面的所說(shuō)的，它是new 出來(lái)的，所以指向它構(gòu)造函數(shù)的prototype

console.log(Person.prototype.__proto__ === Object.prototype);   //true
//Person.prototype 是原型對(duì)象， 所以指向 Object.prototype.

console.log(Person.__proto__ === Function.prototype);   //true
//Person 是構(gòu)造函數(shù), 它的構(gòu)造函數(shù)是Function， 所以它就指向 Function.prototype

console.log(Function.prototype.__proto__ === Object.prototype);   //true
//Function.prototype 是原型對(duì)象， 所以指向 Object.prototype.

console.log(Object.prototype.__proto__ === null);   //true   
//這里就是所有原型鏈的終端，原型鏈到這里就沒(méi)了。

所以說(shuō)js 萬(wàn)物皆對(duì)象呢？ 所有的函數(shù)啊，對(duì)象啊，實(shí)例啊，它的原型鏈最終都到了Object.prototype原型對(duì)象。

畫(huà)成圖就是醬樣子滴：

其實(shí)吧，有時(shí)候看圖也不一樣好，哈哈，你可以按照我說(shuō)的規(guī)則，自己不看圖畫(huà)一下。

簡(jiǎn)單來(lái)驗(yàn)證一下

var a = {};   //等同與 new Object()
console.log(a.prototype);  //undefined   對(duì)象沒(méi)有原型對(duì)象
console.log(a.__proto__ === Object.prototype);  //true

var b = function(){};
console.log(b.prototype);  //b的原型對(duì)像
console.log(b.__proto__ === Function.prototype);

var c = [];    //等同于 new Array(),構(gòu)造函數(shù)是Array
console.log(c.__proto__ === Array.prototype);    //true

var d = "";    //等同于 new String()，構(gòu)造函數(shù)是 String
console.log(d.__proto__ === String.prototype);    //true

其實(shí)，原型鏈的根本作用就是為了 屬性 的讀取。

上面簡(jiǎn)單說(shuō)過(guò)，當(dāng)在一個(gè) 函數(shù) 或者 對(duì)象 上 讀取屬性時(shí)，它會(huì)先查找自身屬性，如果有，就直接返回，如果沒(méi)有呢，就會(huì)沿著原型鏈向上查找。

舉個(gè)簡(jiǎn)單的栗子，每個(gè)函數(shù)啊，對(duì)象啊，都有toString 方法，它是哪來(lái)的呢？
球都麻袋?。ǖ鹊龋?，不是屬性的讀取嗎。toString這個(gè)是方法（函數(shù)）呀！同學(xué)，你很有眼光嘛。事實(shí)上，我們把屬性值為函數(shù)的，稱(chēng)之為 方法。其實(shí)呢，你要了解這些方法是怎么回事。

function test(){};

test.toString();    //"function test(){}"

console.log(test.hasOwnProperty("toString"));   //false

console.log(test.__proto__.hasOwnProperty("toString"));   //true
//這就找到了，這里的hasOwnProperty 方法 是檢查 該屬性是否 是自身的屬性

//而 （函數(shù)的__proto__）test.__proto__  都指向（等于） Function.prototype
console.log(test.__proto__ === Function.prototype);   //true

console.log(Function.prototype.hasOwnProperty("toString"));   //true
//看到這里，明白了嗎。函數(shù)的內(nèi)置方法(函數(shù)) 一部分是 Function.prototype 上的屬性；
//一部分？ 是的，因?yàn)?，原型鏈的終端 在  Object.prototype ;
//所以，在Object.prototype 上添加的屬性，方法， 函數(shù)也是可以使用的；

//比如：
Object.prototype.say = function() { console.log(5666) };

function test(){};

test.say();   //5666

那么屬性的賦值是怎么一回事呢？

首先函數(shù) 或 對(duì)象 會(huì)查找 自身屬性， 如果有，就會(huì) 覆蓋該屬性 的值， 如果沒(méi)有，它就會(huì)創(chuàng)建 一個(gè) 自身的屬性，總之，賦值是不會(huì)對(duì)原型鏈進(jìn)行查找。

function Person(){};
var p = new Person();
//如果你用的同一個(gè)窗口運(yùn)行這個(gè)，結(jié)果可能是上面的 5666，因?yàn)閯倓偢牧嗽摵瘮?shù)，您重新打開(kāi)個(gè)瀏覽器窗口即可。
p.toString();    //"[object Object]"  

//有疑惑嗎，其實(shí)，toString 這個(gè)方法， Function.prototype, 和 Object.prototype 都有；
Function.prototype.toString = function(){
    console.log("我是Function原型對(duì)象的");
}
Person.toString();    //我是Function原型對(duì)象的
p.toString();       //"[object Object]"
//Object上的toString 方法并沒(méi)有改變。

運(yùn)用 最常見(jiàn)的就是 繼承了。

function Person(name){   //父類(lèi)（構(gòu)造函數(shù)）
    this.name = name;
}
Person.prototype.getName = function(){   //在父類(lèi)的原型對(duì)象上添加方法
    return this.name;
}

function Son(name,age){    //子類(lèi)（構(gòu)造函數(shù)）
    this.name = name;    //為了減輕讀者壓力，就不使用 call 了, Person.call(this, name);
    this.age = age;
}

Son.prototype = new Person();    //把子類(lèi)（構(gòu)造函數(shù)） 的原型對(duì)象  掛到 原型鏈上去。

Son.prototype.getAge = function(){
    return this.age;
}
var s = new Son("zdx",666);
s.getName();    //Son.prototype 上沒(méi)有 getName方法，現(xiàn)在能使用了，就完成了 繼承。

需要解讀一下嘛？

Son.prototype = new Person();

//就等于
var obj = {};
obj.__proto__ = Person.prototype;
Son.prototype = obj;
//這樣,就把Son.prototype 掛到原型鏈上去了。
Son.prototype.__proto__ === Person.prototype  //ture

然后Son 的實(shí)例對(duì)象 上使用方法 時(shí)，就沿著鏈查找， Son.prototype 沒(méi)有， 上級(jí)Person.prototype 上有。ok，繼承了。

簡(jiǎn)單寫(xiě)一個(gè)：

var jQuery = function(name) {
    return new jQuery.fn.init();
}

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init: function(name) {
        this.name = name;
    },
    each: function() {
        console.log("each");
        return this;
    }
}

jQuery.fn.init.prototype = jQuery.fn;

估計(jì)看起來(lái)有點(diǎn)困難，沒(méi)事，我們簡(jiǎn)化一下

function jQuery(name){
    return new init(name);
}

function init(name){
    this.name = name;
}

jQuery.prototype = {
    constructor: jQuery,
    each: function(){ 
        console.log("each")
    }
}

init.prototype = jQuery.prototype;

看懂了嗎，你使用jQuery(), 就相當(dāng)于與 new jQuery()； 其實(shí) 你 new init() 和 new jQuery(); 是一樣的；因?yàn)? init.prototype = jQuery.prototype ，所以它們的實(shí)例對(duì)象是一樣的。它這樣寫(xiě)，就是為了你使用方便，不需要你使用 new 來(lái)創(chuàng)建jq對(duì)象。

使用起來(lái)就是這樣的：

$();
//是不是比

new $();
//方便多了。

最后要說(shuō)的就是，別把原型鏈和作用域鏈搞混了?。?！哈哈哈