1、構(gòu)造函數(shù)和實(shí)例

假設(shè)你聲明一個(gè)方法叫做Foo() ,那么我們可以通過new Foo()來聲明實(shí)例。

    function Foo() {
      console.log("我是一個(gè)構(gòu)造方法");
    }
    const f1 = new Foo();

現(xiàn)在你可以很清晰的明白Foo()是構(gòu)造函數(shù)，f1是它的實(shí)例。

2、屬性Prototype

Foo()這個(gè)構(gòu)造函數(shù)是一個(gè)方法。

方法也是對象數(shù)據(jù)類型，所以可以說方法是個(gè)對象。

對象就有屬性，不過方法有自己特殊的一個(gè)屬性，叫做prototype，其他對象沒有哦。

這個(gè)屬性會(huì)指向一個(gè)原型對象(Foo.prototype)，而原型對象也會(huì)有一個(gè)自己的屬性叫做constructor，指向?qū)傩园艘粋€(gè)指針，指回原構(gòu)造函數(shù)。

   function Foo() {
      console.log("我是一個(gè)構(gòu)造方法");
    }
    const f1 = new Foo();

    console.log(Foo.prototype);//Foo的原型對象
    console.log(f1.prototype);//f1沒有 underfied

3、屬性__proto__

上文的prototype是給構(gòu)造函數(shù)的所有實(shí)例提供共享方法和屬性的。

實(shí)例又是怎么訪問到共享方法和屬性的呢？

f1實(shí)例沒有prototype，而有一個(gè)屬性__proto__，這是所有對象都有的屬性，它指向到構(gòu)造自己的構(gòu)造函數(shù)的原型對象，然后js這個(gè)語言就是根據(jù)這個(gè)屬性來讓實(shí)例訪問到共享屬性和方法的

Foo是f1的構(gòu)造函數(shù)，Foo.prototype是Foo的原型對象，所以f1.__proto__指向Foo.prototype

    function Foo() {
      console.log("我是一個(gè)構(gòu)造方法");
    }

    const f1 = new Foo();

    console.log(Foo.prototype);
    console.log(f1.__proto__);

4、訪問原型上的方法

Foo這個(gè)構(gòu)造函數(shù)如果希望自己的實(shí)例能夠擁有同一個(gè)屬性，比如name，就在自己的原型對象上加上。

   function Foo() {
      console.log("我是一個(gè)方法");
    }

    Foo.prototype.name = "我是Foo創(chuàng)造的實(shí)例共享的屬性";

    const f1 = new Foo();
    const f2 = new Foo();

    console.log(f1.name);//我是Foo創(chuàng)造的實(shí)例共享的屬性
    console.log(f2.name);//我是Foo創(chuàng)造的實(shí)例共享的屬性

5、構(gòu)造函數(shù)也有__proto__

上面說所有對象都有__proto__ ，F(xiàn)oo是函數(shù)也是對象啊，所以Foo.__proto__是啥呢？

那就去找Foo的構(gòu)造函數(shù)是誰呢，F(xiàn)oo是一個(gè)函數(shù)，擁有函數(shù)特有的方法和屬性，創(chuàng)造的它的構(gòu)造函數(shù)就是Function，這個(gè)js自帶的的一個(gè)構(gòu)造函數(shù)，它的Function.prototype給所有js中你創(chuàng)建的函數(shù)提供函數(shù)自帶的一些公共方法和屬性。

所以Foo.__proto__指向Funtion.prototype

6、構(gòu)造函數(shù)的原型也有__proto__

Foo.prototype也是對象，所以它也有__proto__。

每當(dāng)我們要找__proto__，就得找它的構(gòu)造函數(shù)，Foo.prototype是個(gè)對象，純對象，所以它的構(gòu)造函數(shù)是Object，那么Object的原型就是Object.prototype。

Foo.prototype.__proto__指向Object.prototype

7、Object.prototype這個(gè)原型對象很特殊

Array、String、Funtion、Object這些構(gòu)造函數(shù)都是函數(shù)，
都是Funtion構(gòu)造函數(shù)的實(shí)例，
Array.__proto__ 、String.__proto__ 、Funtion.__proto__ 、Object.__proto__指向Funtion.prototype原型，
可以調(diào)用Funtion.prototype原型的一些公共方法，
例如都可以調(diào)用.name查看自己的函數(shù)名字。

Array.prototype 、String.prototype 、Funtion.prototype這些原型對象都是對象，
都是Object構(gòu)造函數(shù)的實(shí)例，
Array.prototype.__proto__ 、String.prototype.__proto__ 、Funtion.prototype.__proto__指向Object.prototype原型，
所以可以調(diào)用Object.prototype這個(gè)原型對象的公共方法，

而Object.prototype有些特殊，它雖然是對象，但是并不是Object自己的實(shí)例，
Object.prototype.__proto__指向null，作為原型鏈的終點(diǎn)

8、總結(jié)

方法，也就是函數(shù)，才有prototype，就是方法的原型。
所以實(shí)例，一般都會(huì)有個(gè)對應(yīng)的構(gòu)造方法，也就是構(gòu)造函數(shù)，實(shí)例的__proto__指向構(gòu)造方法的原型。
js有很多自帶的構(gòu)造方法，例如Array、String、Funtion、Object，都是根據(jù)js一些對象類型分配的，他們的原型上提供了許多封裝好的常用方法。
所有構(gòu)造方法本身是函數(shù)，是Funtion這個(gè)js自帶構(gòu)造函數(shù)的實(shí)例。
除了Object.prototype，所有構(gòu)造方法的原型本身是對象，是Object這個(gè)js自帶構(gòu)造函數(shù)的實(shí)例。
Object.prototype.__prototype指向null，作為原型鏈終點(diǎn)。

到此這篇關(guān)于JavaScript原型鏈詳解的文章就介紹到這了,更多相關(guān)JavaScript原型鏈內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論