JavaScript的原型及原型鏈的用法

這篇文章給大家介紹JavaScript的原型及原型鏈的用法，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動電話。 JavaScript 被設計為向 HTML 頁面增加交互性。 許多 HTML 開發者都不是程序員，但是 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 一個對象就行了。

關于JavaScript的原型及原型鏈的用法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。