基于原型編程

在面向?qū)ο蟮木幊陶Z(yǔ)言中，類和對(duì)象的關(guān)系是鑄模和鑄件的關(guān)系，對(duì)象總是從類創(chuàng)建而來(lái)，比如Java中，必須先創(chuàng)建類再基于類實(shí)例化對(duì)象。
而在基于原型編程的思想中，類并不是必須的，對(duì)象都是通過(guò)克隆另外一個(gè)對(duì)象而來(lái)，這個(gè)被克隆的對(duì)象就是原型對(duì)象。
基于原型編程的語(yǔ)言通常遵循下面的規(guī)則：

• 所有的數(shù)據(jù)都是對(duì)象
• 要得到一個(gè)對(duì)象，不是通過(guò)實(shí)例化類，而是找到一個(gè)對(duì)象作為原型并克隆它
• 無(wú)法自己直接創(chuàng)建一個(gè)對(duì)象，對(duì)象都是克隆產(chǎn)生，必須有一個(gè)根對(duì)象，然后克隆它才可以創(chuàng)建對(duì)象
• 對(duì)象會(huì)記住它的原型
• 如果對(duì)象無(wú)法響應(yīng)某個(gè)請(qǐng)求，它會(huì)把這個(gè)請(qǐng)求委托給自己的原型

函數(shù)和對(duì)象

JavaScript是基于原型的語(yǔ)言，但JavaScript并非嚴(yán)格遵循原型編程的第一條規(guī)則，其中基本類型undefined、number、string、boolean就不是對(duì)象，其模仿Java，分為了基本類型和對(duì)象類型，當(dāng)然和Java一樣，基本類型可以使用包裝的形式變?yōu)閷?duì)象。
這里先探討一個(gè)問(wèn)題，有助于后面理解原型和原型鏈，那就是“所有的數(shù)據(jù)都是對(duì)象，函數(shù)也是對(duì)象“，雖然函數(shù)是對(duì)象，但是函數(shù)擁有很多普通對(duì)象不具備的特性：

• 可執(zhí)行性：函數(shù)可以被調(diào)用執(zhí)行
• 閉包：函數(shù)可以創(chuàng)建閉包
• 構(gòu)造函數(shù)：函數(shù)可以作為構(gòu)造函數(shù)，去創(chuàng)建對(duì)象實(shí)例，理論上，除了 Object.create 創(chuàng)建的對(duì)象，都是通過(guò)構(gòu)造函數(shù)創(chuàng)建的對(duì)象。
• 原型對(duì)象屬性：除了箭頭函數(shù)，每個(gè)函數(shù)都有一個(gè) prototype 屬性，它是一個(gè)對(duì)象，用于存儲(chǔ)通過(guò)該構(gòu)造函數(shù)創(chuàng)建的所有實(shí)例的共享屬性和方法。

JavaScript原型

從上面可以得知，函數(shù)都有 prototype 屬性，稱之為原型，也稱為原型對(duì)象，原型對(duì)象里面可以存放屬性和方法，共享給實(shí)例對(duì)象使用，用于實(shí)現(xiàn)繼承效果。
這里的函數(shù)指的是構(gòu)造函數(shù)，即可以通過(guò)new創(chuàng)建對(duì)象的函數(shù)，在JavaScript中普通函數(shù)都可以是構(gòu)造函數(shù)，除了箭頭函數(shù)。

箭頭函數(shù)沒(méi)有 prototype 屬性是為了保持它們的設(shè)計(jì)簡(jiǎn)潔性，避免與原型鏈相關(guān)的復(fù)雜性和潛在問(wèn)題。箭頭函數(shù)同時(shí)不能使用new實(shí)例化對(duì)象。如果你需要定義一個(gè)構(gòu)造器函數(shù)，應(yīng)該使用普通函數(shù)而不是箭頭函數(shù)。

舉例說(shuō)明：

const arr = new Array(1, 2, 3)
arr.reverse()
arr.sort()

在上面的代碼中 Array 就是一個(gè)構(gòu)造函數(shù)，reverse和sort都是 Array.prototype 原型對(duì)象上的函數(shù)。
這里有個(gè)問(wèn)題，為何要將這些方法放在 prototype 原型屬性上，而不是放在構(gòu)造函數(shù)內(nèi)部呢？
我們來(lái)看下面的代碼：

function Person() {
  this.getName = function () {
    console.log('person')
  }
}
Person.prototype.getProtoName = function () {
  console.log('proto person')
}
const person = new Person()
const person1 = new Person()
console.log(person.getName === person1.getName) // false
console.log(person.getProtoName === person1.getProtoName) // true

很明顯，雖然在實(shí)例化對(duì)象上都可以調(diào)用這些方法，但兩者有本質(zhì)的不同，將方法放在 prototype 原型對(duì)象上，之后實(shí)例化的對(duì)象使用的都是同一個(gè)方法，類似于Java的類方法，而構(gòu)造函數(shù)內(nèi)的方法，則會(huì)重新創(chuàng)建，也就是實(shí)例對(duì)象方法。

JavaScript原型鏈

了解完原型之后，再來(lái)看原型鏈就非常簡(jiǎn)單了。

• 對(duì)象可以調(diào)用其構(gòu)造函數(shù)的 prototype 原型對(duì)象的屬性和方法
• 原型對(duì)象也是對(duì)象，同樣也可以調(diào)用其構(gòu)造函數(shù)的prototype原型對(duì)象的屬性和方法
• 一層一層的形成一條鏈路就是原型鏈

如圖所示：

解讀：

• 在瀏覽器中，通常使用對(duì)象的 __proto__ 即可找到對(duì)象的原型對(duì)象，每個(gè)對(duì)象都有 __proto__ 屬性(還是要去除Object.create創(chuàng)建的)，用于指向它的原型對(duì)象。
• 前面基于原型編程有一個(gè)規(guī)則是，必須有一個(gè)根對(duì)象，JavaScript中根對(duì)象是：Object.prototype，其是一個(gè)空對(duì)象。

原型鏈經(jīng)典圖片

最后結(jié)合上面的內(nèi)容，來(lái)看看下面的經(jīng)典原型鏈圖：

從上圖可以看出左邊是實(shí)例對(duì)象，中間是構(gòu)造函數(shù)，右邊是原型對(duì)象，圖中還包含了一些其它內(nèi)容：
函數(shù)是一個(gè)函數(shù)，同時(shí)也是一個(gè)對(duì)象：
構(gòu)造函數(shù)作為一個(gè)函數(shù)時(shí)，擁有原型對(duì)象屬性 prototype同時(shí)函數(shù)也是一個(gè)對(duì)象，函數(shù)都是由構(gòu)造函數(shù) Function 構(gòu)造出來(lái)的，包括 Function 函數(shù)本身，可以看上圖中 function Foo()、function Object()、function Function() 的 __proto__ 都是指向 Funtion.prototype，這是函數(shù)比較特殊的一點(diǎn)。
這個(gè)地方有點(diǎn)繞，再理一下，函數(shù)的 prototype 屬性是這個(gè)函數(shù)自己的屬性，而函數(shù)的 __proto__ 指向的是其構(gòu)造函數(shù)的原型對(duì)象，可以理解為父級(jí)的屬性，兩者是不同的。

總結(jié)

• JavaScript是基于原型編程，創(chuàng)建對(duì)象是通過(guò)克隆對(duì)象的形式，不是通過(guò)類創(chuàng)建。
• 函數(shù)都擁有 prototype 原型屬性，實(shí)例化對(duì)象的 __proto__ 屬性指向這個(gè)原型屬性，對(duì)象可以直接調(diào)用原型對(duì)象的方法和屬性，不用寫(xiě) __proto__ 再調(diào)用，兩者效果一致。
• 對(duì)象的 __proto__ 指向構(gòu)造函數(shù)的 prototype，構(gòu)造函數(shù)的 prototype 同樣是對(duì)象，其 __proto__ 指向上一層原型對(duì)象，直到 Object.prototype，形成原型鏈。

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

最新評(píng)論