要點(diǎn)

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

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

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

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

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

image.png

原文地址

原型

先來看一個原型的例子纽甘。

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

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

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

    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)建出來的每一個對象(實(shí)例出來的對象指向不同的地址，都占據(jù)了內(nèi)存蠢棱，但其實(shí)他們做的事情是一樣）锌杀，里面都有showName和showAge方法，這樣就會占用很多的資源泻仙。
而通過原型來實(shí)現(xiàn)的話糕再，只需要在構(gòu)造函數(shù)里面給屬性賦值，而把方法寫在Foo.prototype屬性(這個屬性是唯一的)里面玉转。這樣每個對象都可以使用prototype屬性里面的showName突想、showAge方法，并且節(jié)省了不少的資源究抓。

原型鏈

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

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

那么我們來看一個例子：

        // 構(gòu)造函數(shù)
        function Foo(name,age){
            this.name=name;
            this.age=age;
        }
        Object.prototype.toString=function(){
            //this是什么要看執(zhí)行的時候誰調(diào)用了這個函數(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()時一膨，JS發(fā)現(xiàn)fn中沒有這個方法呀邢，于是它就去Foo.prototype中去找，發(fā)現(xiàn)還是沒有這個方法豹绪，然后就去Object.prototype中去找价淌，找到了，就調(diào)用Object.prototype中的toString()方法瞒津。

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

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

JS 創(chuàng)建的對象都有一個_proto_屬性剪验，_proto_屬性連接實(shí)例和構(gòu)造函數(shù)的原型對象，對外不可見(隱式原型）前联，無法直接獲得功戚，可以通過Object.getPrototypeOf（）方法得到這個屬性
所有構(gòu)造器的prototype都是object類型，但是function的prototype是一個空函數(shù)似嗤，且所有構(gòu)造器（內(nèi)置對象）的_proto_指向這個空函數(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 可以共享方法，不會反復(fù)開辟存儲空間伤塌。
.

原型中this的指向是什么灯萍？
指向?qū)嵗瘜ο髉1、p2

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

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

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

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


// 實(shí)例化對象沒有prototype屬性
console.log(h.prototype); // undefined
// 實(shí)例化對象的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