JavaScript的原型及原型鏈的用法

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

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、嘉禾網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動電話。 JavaScript 被設(shè)計為向 HTML 頁面增加交互性。 許多 HTML 開發(fā)者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段添加到網(wǎng)頁中。

原型

  • 原型的出現(xiàn)，就是為了解決 構(gòu)造函數(shù)的缺點也就是給我們提供了一個給對象添加函數(shù)的方法不然構(gòu)造函數(shù)只能給對象添加屬性，不能合理的添加函數(shù)就太 LOW 了

prototype

  • 每一個函數(shù)天生自帶一個成員，叫做 prototype，是一個對象空間即然每一個函數(shù)都有，構(gòu)造函數(shù)也是函數(shù)，構(gòu)造函數(shù)也有這個對象空間這個 prototype 對象空間可以由函數(shù)名來訪問

function Person() {}

console.log(Person.prototype) // 是一個對象

  • 即然是個對象，那么我們就可以向里面放入一些東西

function Person() {}

Person.prototype.name = 'prototype'

Person.prototype.sayHi = function () {}

  • 我們發(fā)現(xiàn)了一個叫做 prototype 的空間是和函數(shù)有關(guān)聯(lián)的并且可以向里面存儲一些東西重點： 在函數(shù)的 prototype 里面存儲的內(nèi)容，不是給函數(shù)使用的，是給函數(shù)的每一個實例化對象使用的那實例化對象怎么使用能？

__proto__

  • 每一個對象都天生自帶一個成員，叫做 __proto__，是一個對象空間即然每一個對象都有，實例化對象也是對象，那么每一個實例化對象也有這個成員這個 __proto__ 對象空間是給每一個對象使用的當(dāng)你訪問一個對象中的成員的時候

  • 如果這個對象自己本身有這個成員，那么就會直接給你結(jié)果如果沒有，就會去 __proto__ 這個對象空間里面找，里面有的話就給你結(jié)果未完待續(xù)。。。

  • 那么這個 __proto__ 又指向哪里呢？

  • 這個對象是由哪個構(gòu)造函數(shù) new 出來的那么這個對象的 __proto__ 就指向這個構(gòu)造函數(shù)的 prototype

function Person() {}

var p1 = new Person()

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

  • 我們發(fā)現(xiàn)實例化對象的 __proto__ 和所屬的構(gòu)造函數(shù)的 prototype 是一個對象空間我們可以通過構(gòu)造函數(shù)名稱來向 prototype 中添加成員對象在訪問的時候自己沒有，可以自動去自己的 __proto__ 中查找那么，我們之前構(gòu)造函數(shù)的缺點就可以解決了

  • 我們可以把函數(shù)放在構(gòu)造函數(shù)的 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 就可以執(zhí)行了

  • 到這里，當(dāng)我們實例化多個對象的時候，每個對象里面都沒有方法

  • 都是去所屬的構(gòu)造函數(shù)的 protottype 中查找那么每一個對象使用的函數(shù)，其實都是同一個函數(shù)那么就解決了我們構(gòu)造函數(shù)的缺點

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當(dāng) p1 去調(diào)用 sayHi 方法的時候是去 Person.prototype 中找當(dāng) p2 去調(diào)用 sayHi 方法的時候是去 Person.prototype 中找那么兩個實例化對象就是找到的一個方法，也是執(zhí)行的一個方法

  • 結(jié)論

  • 當(dāng)我們寫構(gòu)造函數(shù)的時候?qū)傩晕覀冎苯訉懺跇?gòu)造函數(shù)體內(nèi)方法我們寫在原型上

插個小消息，也方便想學(xué)習(xí)入行成為程序員的同學(xué)，在文章下方留言即可試聽課程外加領(lǐng)取千鋒HTML5、UI交互設(shè)計、PHP、Java+云數(shù)據(jù)、大數(shù)據(jù)開發(fā)、VR/AR/Unity游戲開發(fā)、Python人工智能、Linux云計算、全棧軟件測試、網(wǎng)絡(luò)安全等全部的視頻學(xué)習(xí)教程。

原型鏈

  • 我們剛才聊過構(gòu)造函數(shù)了，也聊了原型那么問題出現(xiàn)了，我們說構(gòu)造函數(shù)的 prototype 是一個對象又說了每一個對象都天生自帶一個 __proto__ 屬性那么 構(gòu)造函數(shù)的 prototype 里面的 __proto__ 屬性又指向哪里呢？

一個對象所屬的構(gòu)造函數(shù)

  • 每一個對象都有一個自己所屬的構(gòu)造函數(shù)比如： 數(shù)組

// 數(shù)組本身也是一個對象

var arr = []

var arr2 = new Array()

  • 以上兩種方式都是創(chuàng)造一個數(shù)組我們就說數(shù)組所屬的構(gòu)造函數(shù)就是 Array

  • 比如： 函數(shù)

// 函數(shù)本身也是一個對象

var fn = function () {}

var fun = new Function()

  • 以上兩種方式都是創(chuàng)造一個函數(shù)我們就說函數(shù)所屬的構(gòu)造函數(shù)就是 Function

constructor

  • 對象的 __proto__ 里面也有一個成員叫做 constructor這個屬性就是指向當(dāng)前這個對象所屬的構(gòu)造函數(shù)

鏈狀結(jié)構(gòu)

  • 當(dāng)一個對象我們不知道準(zhǔn)確的是誰構(gòu)造的時候，我們呢就把它看成 Object 的實例化對象也就是說，我們的 構(gòu)造函數(shù) 的 prototype 的 __proto__ 指向的是 Object.prototype那么 Object.prototype 也是個對象，那么它的 __proto__ 又指向誰呢？因為 Object 的 js 中的頂級構(gòu)造函數(shù)，我們有一句話叫 萬物皆對象所以 Object.prototype 就到頂了，Object.prototype 的 __proto__ 就是 null

原型鏈的訪問原則

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

對象的賦值

  • 到這里，我們就會覺得，如果是賦值的話，那么也會按照原型鏈的規(guī)則來但是： 并不是！并不是！并不是！ 重要的事情說三遍賦值的時候，就是直接給對象自己本身賦值

  • 如果原先有就是修改原先沒有就是添加不會和 __proto__ 有關(guān)系

總結(jié)

  • 到了這里，我們就發(fā)現(xiàn)了面向?qū)ο蟮乃枷肽Ｊ搅?/p>

  • 當(dāng)我想完成一個功能的時候先看看內(nèi)置構(gòu)造函數(shù)有沒有能給我提供一個完成功能對象的能力如果沒有，我們就自己寫一個構(gòu)造函數(shù)，能創(chuàng)造出一個完成功能的對象然后在用我們寫的構(gòu)造函數(shù) new 一個對象出來，幫助我們完成功能就行了

  • 比如： tab選項卡

我們要一個對象對象包含一個屬性：是每一個點擊的按鈕對象包含一個屬性：是每一個切換的盒子對象包含一個方法：是點擊按鈕能切換盒子的能力那么我們就需要自己寫一個構(gòu)造函數(shù)，要求 new 出來的對象有這些內(nèi)容就好了然后在用構(gòu)造函數(shù) new 一個對象就行了。

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

網(wǎng)頁題目：JavaScript的原型及原型鏈的用法
地址分享：http://muchs.cn/article4/jehiie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、建站公司、網(wǎng)站設(shè)計公司、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)