JavaScript教程全套影片合集：原型及原型鏈

JavaScript 是世界上最流行的指令碼語言。 JavaScript 是屬於 web 的語言，它適用於 PC、膝上型電腦、平板電腦和行動電話。 JavaScript 被設計為向 HTML 頁面增加互動性。 許多 HTML 開發者都不是程式設計師，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段新增到網頁中。下面給大家分享下JavaScript教程全套影片合集：原型及原型鏈。

原型

• 原型的出現，就是為了解決 建構函式的缺點也就是給我們提供了一個給物件新增函式的方法不然建構函式只能給物件新增屬性，不能合理的新增函式就太 LOW 了

prototype

• 每一個函式天生自帶一個成員，叫做 prototype，是一個物件空間即然每一個函式都有，建構函式也是函式，建構函式也有這個物件空間這個 prototype 物件空間可以由函式名來訪問

function Person() {}

console.log(Person.prototype) // 是一個物件

• 即然是個物件，那麼我們就可以向裡面放入一些東西

function Person() {}

Person.prototype.name = 'prototype'

Person.prototype.sayHi = function () {}

• 我們發現了一個叫做 prototype 的空間是和函式有關聯的並且可以向裡面儲存一些東西重點： 在函式的 prototype 裡面儲存的內容，不是給函式使用的，是給函式的每一個例項化物件使用的那例項化物件怎麼使用能？

__proto__

• 每一個物件都天生自帶一個成員，叫做 __proto__，是一個物件空間即然每一個物件都有，例項化物件也是物件，那麼每一個例項化物件也有這個成員這個 __proto__ 物件空間是給每一個物件使用的當你訪問一個物件中的成員的時候
• 如果這個物件自己本身有這個成員，那麼就會直接給你結果如果沒有，就會去 __proto__ 這個物件空間裡面找，裡面有的話就給你結果未完待續。。。
• 那麼這個 __proto__ 又指向哪裡呢？
• 這個物件是由哪個建構函式 new 出來的那麼這個物件的 __proto__ 就指向這個建構函式的 prototype

function Person() {}

var p1 = new Person()

console.log(p1.__proto__ === Person.prototype) // true

• 我們發現例項化物件的 __proto__ 和所屬的建構函式的 prototype 是一個物件空間我們可以透過建構函式名稱來向 prototype 中新增成員物件在訪問的時候自己沒有，可以自動去自己的 __proto__ 中查詢那麼，我們之前建構函式的缺點就可以解決了
• 我們可以把函式放在建構函式的 prototype 中例項化物件訪問的時候，自己沒有，就會自動去 __proto__ 中找那麼也可以使用了

function Person() {}

Person.prototype.sayHi = function () {

console.log('hello Person')

}

var p1 = new Person()

p1.sayHi()

• p1 自己沒有 sayHi 方法，就會去自己的 __proto__ 中查詢p1.__proto__ 就是 Person.prototype我們又向 Person.prototype 中新增了 sayHi 方法所以 p1.sayHi 就可以執行了
• 到這裡，當我們例項化多個物件的時候，每個物件裡面都沒有方法
• 都是去所屬的建構函式的 protottype 中查詢那麼每一個物件使用的函式，其實都是同一個函式那麼就解決了我們建構函式的缺點

function Person() {}

Person.prototype.sayHi = function () {

console.log('hello')

}

var p1 = new Person()

var p2 = new Person()

console.log(p1.sayHi === p2.sayHi)

• p1 是 Person 的一個例項p2 是 Person 的一個例項也就是說 p1.__proto__ 和 p2.__proto__ 指向的都是 Person.prototype當 p1 去呼叫 sayHi 方法的時候是去 Person.prototype 中找當 p2 去呼叫 sayHi 方法的時候是去 Person.prototype 中找那麼兩個例項化物件就是找到的一個方法，也是執行的一個方法
• 結論
• 當我們寫建構函式的時候屬性我們直接寫在建構函式體內方法我們寫在原型上

插個小訊息，也方便想學習入行成為程式設計師的同學，在文章下方留言即可試聽課程外加領取千鋒HTML5、UI互動設計、PHP、Java+雲資料、大資料開發、VR/AR/Unity遊戲開發、Python人工智慧、Linux雲端計算、全棧軟體測試、網路安全等全部的影片學習教程。

原型鏈

• 我們剛才聊過建構函式了，也聊了原型那麼問題出現了，我們說建構函式的 prototype 是一個物件又說了每一個物件都天生自帶一個 __proto__ 屬性那麼 建構函式的 prototype 裡面的 __proto__ 屬性又指向哪裡呢？

一個物件所屬的建構函式

• 每一個物件都有一個自己所屬的建構函式比如： 陣列

// 陣列本身也是一個物件

var arr = []

var arr2 = new Array()

• 以上兩種方式都是創造一個陣列我們就說陣列所屬的建構函式就是 Array
• 比如： 函式

// 函式本身也是一個物件

var fn = function () {}

var fun = new Function()

• 以上兩種方式都是創造一個函式我們就說函式所屬的建構函式就是 Function

constructor

• 物件的 __proto__ 裡面也有一個成員叫做 constructor這個屬性就是指向當前這個物件所屬的建構函式

鏈狀結構

• 當一個物件我們不知道準確的是誰構造的時候，我們呢就把它看成 Object 的例項化物件也就是說，我們的 建構函式 的 prototype 的 __proto__ 指向的是 Object.prototype那麼 Object.prototype 也是個物件，那麼它的 __proto__ 又指向誰呢？因為 Object 的 js 中的頂級建構函式，我們有一句話叫 萬物皆物件所以 Object.prototype 就到頂了，Object.prototype 的 __proto__ 就是 null

原型鏈的訪問原則

• 我們之前說過，訪問一個物件的成員的時候，自己沒有就會去 __proto__ 中找接下來就是，如果 __proto__ 裡面沒有就再去 __proto__ 裡面找一直找到 Object.prototype 裡面都沒有，那麼就會返回 undefiend

物件的賦值

• 到這裡，我們就會覺得，如果是賦值的話，那麼也會按照原型鏈的規則來但是： 並不是！並不是！並不是！ 重要的事情說三遍賦值的時候，就是直接給物件自己本身賦值
• 如果原先有就是修改原先沒有就是新增不會和 __proto__ 有關係

總結

• 到了這裡，我們就發現了物件導向的思想模式了
• 當我想完成一個功能的時候先看看內建建構函式有沒有能給我提供一個完成功能物件的能力如果沒有，我們就自己寫一個建構函式，能創造出一個完成功能的物件然後在用我們寫的建構函式 new 一個物件出來，幫助我們完成功能就行了
• 比如： tab選項卡

我們要一個物件物件包含一個屬性：是每一個點選的按鈕物件包含一個屬性：是每一個切換的盒子物件包含一個方法：是點選按鈕能切換盒子的能力那麼我們就需要自己寫一個建構函式，要求 new 出來的物件有這些內容就好了然後在用建構函式 new 一個物件就行了。