長沙Web前端培訓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 一個對象就行了。

猜你喜歡LIKE
最新文章NEW
相關推薦HOT
更多>>熱門推薦
零基礎必看的前端HTML+CSS教程
沸Java培訓新手實戰必備!單機版坦克大戰分步實現項目源碼
熱3種Javascript圖片預加載的方法詳解
熱長沙前端培訓:一招教你用vue3+canvas實現坦克大戰
新互聯網涼了?參加長沙Java培訓能找到工作嗎?
長沙Java培訓實戰項目,出游咨詢訂票系統開發流程
不參加長沙Java培訓能學會Java嗎?2022Java技能學習路線圖
千鋒長沙Java培訓分享之怎么學習Java集合?
千鋒長沙前端培訓分享之JavaScript面向對象編程思想詳解
千鋒長沙前端培訓分享之web前端的回流和重繪
千鋒長沙前端培訓分享之3種Javascript圖片預加載的方法詳解
千鋒長沙前端培訓分享之利用Jest測試React組件
千鋒長沙前端培訓分享之JavaScript中Slice的用例
千鋒長沙java培訓分享之Socket編程