溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript原型鏈?zhǔn)鞘裁?/h1>
發(fā)布時(shí)間:2022-03-04 14:08:36 來(lái)源:億速云 閱讀:149 作者:小新 欄目:開(kāi)發(fā)技術(shù)

這篇文章主要為大家展示了“JavaScript原型鏈?zhǔn)鞘裁础保瑑?nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript原型鏈?zhǔn)鞘裁础边@篇文章吧。

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

假設(shè)你聲明一個(gè)方法叫做Foo() ,那么我們可以通過(guò)new Foo()來(lái)聲明實(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è)方法。

方法也是對(duì)象數(shù)據(jù)類型,所以可以說(shuō)方法是個(gè)對(duì)象。

對(duì)象就有屬性,不過(guò)方法有自己特殊的一個(gè)屬性,叫做prototype,其他對(duì)象沒(méi)有哦。

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

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

    console.log(Foo.prototype);//Foo的原型對(duì)象
    console.log(f1.prototype);//f1沒(méi)有 underfied

JavaScript原型鏈?zhǔn)鞘裁?></p><h3>3、屬性__proto__</h3><p>上文的<code>prototype</code>是給構(gòu)造函數(shù)的所有實(shí)例提供共享方法和屬性的。</p><p>實(shí)例又是怎么訪問(wèn)到共享方法和屬性的呢?</p><p>f1實(shí)例沒(méi)有<code>prototype</code>,而有一個(gè)屬性<code>__proto__,</code>這是所有對(duì)象都有的屬性,它指向到構(gòu)造自己的構(gòu)造函數(shù)的原型對(duì)象,然后js這個(gè)語(yǔ)言就是根據(jù)這個(gè)屬性來(lái)讓實(shí)例訪問(wèn)到共享屬性和方法的</p><p>Foo是f1的構(gòu)造函數(shù),<code>Foo.prototype</code>是<code>Foo</code>的原型對(duì)象,所以<code>f1.__proto__</code>指向<code>Foo.prototype</code></p><pre class=function Foo() {       console.log("我是一個(gè)構(gòu)造方法");     }     const f1 = new Foo();     console.log(Foo.prototype);     console.log(f1.__proto__);

JavaScript原型鏈?zhǔn)鞘裁?></p><h3>4、訪問(wèn)原型上的方法</h3><p>Foo這個(gè)構(gòu)造函數(shù)如果希望自己的實(shí)例能夠擁有同一個(gè)屬性,比如<code>name</code>,就在自己的原型對(duì)象上加上。</p><pre class=   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í)例共享的屬性

JavaScript原型鏈?zhǔn)鞘裁?></p><h3>5、構(gòu)造函數(shù)也有__proto__</h3><p>上面說(shuō)所有對(duì)象都有<code>__proto__ </code>,F(xiàn)oo是函數(shù)也是對(duì)象啊,所以<code>Foo.__proto__</code>是啥呢?</p><p>那就去找Foo的構(gòu)造函數(shù)是誰(shuí)呢,F(xiàn)oo是一個(gè)函數(shù),擁有函數(shù)特有的方法和屬性,創(chuàng)造的它的構(gòu)造函數(shù)就是Function,這個(gè)js自帶的的一個(gè)構(gòu)造函數(shù),它的<code>Function.prototype</code>給所有js中你創(chuàng)建的函數(shù)提供函數(shù)自帶的一些公共方法和屬性。</p><p>所以<code>Foo.__proto__</code>指向<code>Funtion.prototype</code></p><h3>6、構(gòu)造函數(shù)的原型也有__proto__</h3><p><code>Foo.prototype</code>也是對(duì)象,所以它也有<code>__proto__。</code></p><p>每當(dāng)我們要找<code>__proto__,</code>就得找它的構(gòu)造函數(shù),<code>Foo.prototype</code>是個(gè)對(duì)象,純對(duì)象,所以它的構(gòu)造函數(shù)是Object,那么Object的原型就是<code>Object.prototype。</code></p><p><code>Foo.prototype.__proto__</code>指向<code>Object.prototype</code></p><h3>7、Object.prototype這個(gè)原型對(duì)象很特殊</h3><p><code>Array</code>、<code>String</code>、<code>Funtion</code>、<code>Object</code>這些構(gòu)造函數(shù)都是函數(shù),<br/>都是Funtion構(gòu)造函數(shù)的實(shí)例,<br/><code>Array.__proto__</code> 、<code>String.__proto__</code> 、<code>Funtion.__proto__ </code>、<code>Object.__proto__</code>指向<code>Funtion.prototype</code>原型,<br/>可以調(diào)用<code>Funtion.prototype</code>原型的一些公共方法,<br/>例如都可以調(diào)用.<code>name</code>查看自己的函數(shù)名字。</p><p><code>Array.prototype</code> 、<code>String.prototype</code> 、<code>Funtion.prototype</code>這些原型對(duì)象都是對(duì)象,<br/>都是Object構(gòu)造函數(shù)的實(shí)例,<br/><code>Array.prototype.__proto__ </code>、<code>String.prototype.__proto__</code> 、<code>Funtion.prototype.__proto__</code>指向<code>Object.prototype</code>原型,<br/>所以可以調(diào)用<code>Object.prototype</code>這個(gè)原型對(duì)象的公共方法,</p><p>而<code>Object.prototype</code>有些特殊,它雖然是對(duì)象,但是并不是Object自己的實(shí)例,<br/><code>Object.prototype.__proto__</code>指向null,作為原型鏈的終點(diǎn)</p><h3>8、總結(jié)</h3><p>方法,也就是函數(shù),才有<code>prototype</code>,就是方法的原型。<br/>所以實(shí)例,一般都會(huì)有個(gè)對(duì)應(yīng)的構(gòu)造方法,也就是構(gòu)造函數(shù),實(shí)例的<code>__proto__</code>指向構(gòu)造方法的原型。<br/>js有很多自帶的構(gòu)造方法,例如<code>Array</code>、<code>String</code>、<code>Funtion</code>、<code>Object</code>,都是根據(jù)js一些對(duì)象類型分配的,他們的原型上提供了許多封裝好的常用方法。<br/>所有構(gòu)造方法本身是函數(shù),是<code>Funtion</code>這個(gè)js自帶構(gòu)造函數(shù)的實(shí)例。<br/>除了<code>Object.prototype</code>,所有構(gòu)造方法的原型本身是對(duì)象,是Object這個(gè)js自帶構(gòu)造函數(shù)的實(shí)例。<br/><code>Object.prototype.__prototype</code>指向null,作為原型鏈終點(diǎn)。<br/></p><p><img src=以上是“JavaScript原型鏈?zhǔn)鞘裁础边@篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI