要點(diǎn)

1、所有的引用類型（數(shù)組、函數(shù)、對(duì)象）可以自由擴(kuò)展屬性（除null以外）。

2、所有的引用類型都有一個(gè)’_ _ proto_ _'屬性(也叫隱式原型，它是一個(gè)普通的對(duì)象)。

3、所有的函數(shù)都有一個(gè)’prototype’屬性(這也叫顯式原型，它也是一個(gè)普通的對(duì)象)。

4、所有引用類型，它的’_ _ proto_ _'屬性指向它的構(gòu)造函數(shù)的’prototype’屬性。

5、當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象本身不存在這個(gè)屬性，那么就會(huì)去它的’_ _ proto_ _'屬性(也就是它的構(gòu)造函數(shù)的’prototype’屬性)中去尋找。
【當(dāng)對(duì)象屬性不存在就會(huì)去他隱原型找，但是隱原型指向了構(gòu)造函數(shù)的顯示原型，所以去構(gòu)造函數(shù)的顯式原型中找】
constructor：所有 prototype 都有一個(gè) constructor 屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)

image.png

原文地址

原型

先來看一個(gè)原型的例子。

        //這是一個(gè)構(gòu)造函數(shù)
        function Foo(name,age){
            this.name=name;
            this.age=age;
        }
        /*根據(jù)要點(diǎn)3，所有的函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)對(duì)象
        再根據(jù)要點(diǎn)1，所有的對(duì)象可以自由擴(kuò)展屬性
        于是就有了以下寫法*/
        Foo.prototype={
            // prototype對(duì)象里面又有其他的屬性
            showName:function(){
                console.log("I'm "+this.name);//this是什么要看執(zhí)行的時(shí)候誰調(diào)用了這個(gè)函數(shù)
            },
            showAge:function(){
                console.log("And I'm "+this.age);//this是什么要看執(zhí)行的時(shí)候誰調(diào)用了這個(gè)函數(shù)
            }
        }
        var fn=new Foo('小明',19)
        /*當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象本身不存在這個(gè)屬性，那么就會(huì)去它
        構(gòu)造函數(shù)的'prototype'屬性中去找*/
        fn.showName(); //I'm 小明
        fn.showAge(); //And I'm 19

這就是原型，很好理解。那為什么要使用原型呢？

試想如果我們要通過Foo()來創(chuàng)建很多很多個(gè)對(duì)象，如果我們是這樣子寫的話：

    function Foo(name,age){
            this.name=name;
            this.age=age;
            this.showName=function(){
                console.log("I'm "+this.name);
            }
            this.showAge=function(){
                console.log("And I'm "+this.age);
            }
        }

那么我們創(chuàng)建出來的每一個(gè)對(duì)象(實(shí)例出來的對(duì)象指向不同的地址，都占據(jù)了內(nèi)存，但其實(shí)他們做的事情是一樣），里面都有showName和showAge方法，這樣就會(huì)占用很多的資源。
而通過原型來實(shí)現(xiàn)的話，只需要在構(gòu)造函數(shù)里面給屬性賦值，而把方法寫在Foo.prototype屬性(這個(gè)屬性是唯一的)里面。這樣每個(gè)對(duì)象都可以使用prototype屬性里面的showName、showAge方法，并且節(jié)省了不少的資源。

原型鏈

理解了原型，那么原型鏈就更好理解了。

根據(jù)要點(diǎn)5，當(dāng)試圖得到一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象本身不存在這個(gè)屬性，那么就會(huì)去它構(gòu)造函數(shù)的prototype屬性中去尋找。那又因?yàn)?code>prototype屬性是一個(gè)對(duì)象，所以它也有一個(gè)’_ _ proto_ _'屬性

那么我們來看一個(gè)例子：

        // 構(gòu)造函數(shù)
        function Foo(name,age){
            this.name=name;
            this.age=age;
        }
        Object.prototype.toString=function(){
            //this是什么要看執(zhí)行的時(shí)候誰調(diào)用了這個(gè)函數(shù)。
            console.log("I'm "+this.name+" And I'm "+this.age);
        }
        var fn=new Foo('小明',19);
        fn.toString(); //I'm 小明 And I'm 19
        console.log(fn.toString===Foo.prototype.__proto__.toString); //true
        
        console.log(fn.__proto__ ===Foo.prototype)//true
        console.log(Foo.prototype.__proto__===Object.prototype)//true
        console.log(Object.prototype.__proto__===null)//true

在這里插入圖片描述

所以當(dāng)fn調(diào)用toString()時(shí)，JS發(fā)現(xiàn)fn中沒有這個(gè)方法，于是它就去Foo.prototype中去找，發(fā)現(xiàn)還是沒有這個(gè)方法，然后就去Object.prototype中去找，找到了，就調(diào)用Object.prototype中的toString()方法。

這就是原型鏈，fn能夠調(diào)用Object.prototype中的方法正是因?yàn)榇嬖谠玩湹臋C(jī)制。

另外，在使用原型的時(shí)候，一般推薦將需要擴(kuò)展的方法寫在構(gòu)造函數(shù)的prototype屬性中，避免寫在_ _ proto _ _屬性里面。

JS 創(chuàng)建的對(duì)象都有一個(gè)_proto_屬性，_proto_屬性連接實(shí)例和構(gòu)造函數(shù)的原型對(duì)象，對(duì)外不可見(隱式原型），無法直接獲得，可以通過Object.getPrototypeOf（）方法得到這個(gè)屬性
所有構(gòu)造器的prototype都是object類型，但是function的prototype是一個(gè)空函數(shù)，且所有構(gòu)造器（內(nèi)置對(duì)象）的_proto_指向這個(gè)空函數(shù)。

console.log(typeof Person.prototype)// object
console.log(typeof Object.getPrototypeOf(person1))// object
console.log(Function.prototype) // f(){}
console.log(typeof Function.prototype)// Function
console.log(typeof Object.prototype)// object
console.log(typeof Array.prototype)// object
console.log(typeof Number.prototype)// object
console.log(typeof Date.prototype)// object
console.log(typeof String.prototype)// object
console.log(typeof Boolean.prototype)// object
 
console.log(Object.getPrototypeOf(Boolean))// f(){}

原型的作用是什么？
原型的作用，就是共享方法。
我們通過 Person.prototype.say 可以共享方法，不會(huì)反復(fù)開辟存儲(chǔ)空間。
.

原型中this的指向是什么？
指向?qū)嵗瘜?duì)象p1、p2

函數(shù)對(duì)象
__proto__：所有引用類型（函數(shù)，數(shù)組，對(duì)象）都擁有__proto__屬性（隱式原型）
prototype：所有函數(shù)擁有 prototype 屬性（顯式原型）（僅限函數(shù)）
constructor：所有 prototype 都有一個(gè) constructor 屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)

當(dāng)我們聲明一個(gè)function關(guān)鍵字的方法時(shí)，會(huì)為這個(gè)方法添加一個(gè)prototype屬性，指向默認(rèn)的原型對(duì)象，并且此prototype的constructor屬性也指向方法對(duì)象。此二個(gè)屬性會(huì)在創(chuàng)建對(duì)象時(shí)被對(duì)象的屬性引用。

function Hello() {}; // 構(gòu)造函數(shù)
var h = new Hello();  // 實(shí)例化對(duì)象

// 構(gòu)造函數(shù)有個(gè)prototype屬性
console.log(Hello.prototype); // Object {}  原型對(duì)象
// 構(gòu)造函數(shù)的prototype屬性有個(gè)constructor屬性，指向構(gòu)造函數(shù)本身
console.log(Hello.prototype.constructor === Hello); // true


// 實(shí)例化對(duì)象沒有prototype屬性
console.log(h.prototype); // undefined
// 實(shí)例化對(duì)象的constructor屬性指向構(gòu)造函數(shù)本身
console.log(h.constructor === Hello); // true
// 即
console.log(h.constructor === Hello.prototype.constructor); // true 


console.log(h.__proto__ === Hello.prototype); // true  
// 即
console.log(h.__proto__ === h.constructor.prototype); //true
// 即
console.log(Hello.prototype === h.constructor.prototype); //true