新手理解的JS原型鏈

Mike617 發(fā)布于2019-08-23 14:49 / 1152人閱讀

摘要：我們畫張圖來表示圖中這條紅色的線就是原型鏈。我們把方法放到實(shí)例的原型對(duì)象上面，也就是上面來供所有實(shí)例使用小明小紅用圖表示補(bǔ)充說一下我的經(jīng)歷，一開始理解原型鏈時(shí)，一直在在這個(gè)三個(gè)屬性中繞來繞去。

一直以來對(duì)于JavaScript 的原型鏈的概念，始終有些東西有一種模糊感，最近剛好有時(shí)間就塌下心認(rèn)真的把《JavaScript高級(jí)程序設(shè)計(jì)》中相關(guān)內(nèi)容認(rèn)真讀了一遍，也查看了很多網(wǎng)上很多資料，以前很多不明白的地方也漸漸明白了起來。
寫一篇文章記錄一下最近學(xué)習(xí)的感悟。

字面量創(chuàng)建對(duì)象

我們通常創(chuàng)建一個(gè)對(duì)象無非就兩種方式：

 1. var obj= new Object();//new 一個(gè)Object的實(shí)例
 2. var obj= {};//對(duì)象字面量

使用對(duì)象字面量和使用new的方式是一樣的。
為了簡便，一般推薦使用使用字面量：var o= {};

構(gòu)造函數(shù)創(chuàng)建對(duì)象

當(dāng)我們想要?jiǎng)?chuàng)建自定義的對(duì)象時(shí)，需要用到構(gòu)造函數(shù)。
構(gòu)造函數(shù)和普通函數(shù)有兩個(gè)區(qū)別：

1. 便于和普通函數(shù)區(qū)分，函數(shù)名首字母大寫。    
2. 使用 `new` 操作符調(diào)用，返回一個(gè)實(shí)例對(duì)象。

除此之外和普通函數(shù)一摸一樣。
我們使用構(gòu)造函數(shù)Person來創(chuàng)建兩個(gè)實(shí)例對(duì)象：

function Person(name){
    this.name = name;
    this.sayName= function (){ alert(this.name) }
 }
var person1 = new Person("小明");
var person2 = new Person("小紅");
console.log(person1);//{name: "小明", sayName: fun}
console.log(person2);//{name: "小紅", sayName: fun}

上面的例子不難理解，雖然這兩個(gè)實(shí)例對(duì)象都有sayName方法，而且他們兩個(gè)的作用也是一樣的，但卻是兩個(gè)方法，只是名字和作用一樣。

畫個(gè)圖表示一下：

如果還不明白，我在打個(gè)比喻：
就像A街上有一間麥當(dāng)勞，在B街上也開了一間麥當(dāng)勞，它們都叫麥當(dāng)勞，作用也是一樣的。但是你總不能說他們是一間麥當(dāng)勞吧？

person1.sayName === person2.sayName;//false

如果這樣的話，我們每構(gòu)造出來一個(gè)對(duì)象，都要多帶帶為這個(gè)對(duì)象創(chuàng)建出一個(gè)專屬于它自己使用的sayName，這是很占用內(nèi)存的。

那我們能不能讓所有的實(shí)例對(duì)象都共同使用一個(gè)sayName方法，來節(jié)省內(nèi)存，提升效率呢？這需要我們先理解原型對(duì)象的概念。

原型對(duì)象

我們先了解原型對(duì)象的概念。

每個(gè)對(duì)象都有原型對(duì)象（null除外），我們用__proto__表示，每個(gè)函數(shù)都有prototype屬性，指向?qū)嵗脑蛯?duì)象。

對(duì)照這句話，按照我們上面的例子，也就是說Person.prototype指向person1的原型對(duì)象(__proto__),

Person.prototype === person1.__proto__; // true

為了便于理解，來看一張圖。

恩~他們的關(guān)系大概就是這樣。

原型鏈

原型鏈簡單用一句話概括就是：

原型鏈就是 對(duì)象的__proto__所連接的鏈狀結(jié)構(gòu)

為了方便我們理解原型鏈，舉一個(gè)簡單的例子：

function F(){
    this.a = 1;
    this.b = 2;
}
F.prototype.b = 3;
F.prototype.c = 4;
var o = new F();// {a: 1, b: 2}
//原型鏈：
//o --> o.__proto__ --> o.__proto__.__proto__ --> null
// 其中的 --> 就表示 __proto__ 也就是原型鏈
console.log(o.a); // 1
// o上有a這個(gè)屬性嗎？有的，該屬性的值為1

console.log(o.b); // 2
// o上有b這個(gè)屬性嗎？有的，該屬性的值為2
// 原型上也有一個(gè)"b"屬性,但是它不會(huì)被訪問到.這種情況稱為"屬性遮蔽 "

console.log(o.c); // 4
// o上有c這個(gè)屬性嗎？沒有，那看看原型上有沒有
// o.__proto__上有c這個(gè)屬性嗎？有的，該屬性的值為4

console.log(o.d); // undefined
// o上有d這個(gè)屬性嗎？沒有,那看看原型上有沒有
// o.__proto__ 上有d這個(gè)屬性嗎？沒有，那看看它的原型上有沒有
// o.__proto__.__proto__ 為 null，停止搜索
// 沒有找到d屬性，返回undefined。

我們畫張圖來表示：

圖中這條紅色的線就是原型鏈。
由此可見，實(shí)例對(duì)象可訪問自己原型對(duì)象上的屬性和方法，額..準(zhǔn)確來說是:

當(dāng)一個(gè)對(duì)象查找屬性或方法時(shí)，自己有，停止查找，返回結(jié)果。

自己沒有，順著__proto__一直向上查找，如找到，停止查找，返回結(jié)果。

如果一直找到了原型鏈的最頂端(null)，還沒有找到，返回undefined。

我們先回顧一下那個(gè)sayName的問題：
怎么讓所有的實(shí)例對(duì)象都是用一個(gè)sayName方法呢。
現(xiàn)在我們可以使用原型對(duì)象來解決這個(gè)問題了。
我們把sayName方法放到實(shí)例的原型對(duì)象上面，也就是Person.prototype上面來供所有實(shí)例使用：

function Person(name){
    this.name = name;
 }
Person.prototype.sayName=function (){
    alert(this.name);
}
var person1 = new Person("小明");
var person2 = new Person("小紅");
person1.sayName === person2.sayName;//true

用圖表示：

補(bǔ)充

constructor
說一下我的經(jīng)歷，一開始理解原型鏈時(shí)，一直在prototype、__proto__、constructor在這個(gè)三個(gè)屬性中繞來繞去。

為了便于理解，我把constructor放在最后了。
constructor字面意思就很容易理解，構(gòu)造函數(shù)的意思。
一句話解釋:

每個(gè)原型對(duì)象都有一個(gè) constructor 屬性指向 關(guān)聯(lián)的構(gòu)造函數(shù)。

還是上面那個(gè)例子：

console.log(Person.prototype.constructor);//Person(){ fun }

需要注意的一點(diǎn)是，實(shí)例對(duì)象上沒有constructor屬性。
但是：

console.log(person1.constructor) ;//Person(){ fun }

得出這個(gè)結(jié)果很簡單:
實(shí)例上查找不到constructor屬性 --> 順著__proto__在原型對(duì)象上找 --> 找到并返回。

Object.prototype
剛才我們說了創(chuàng)建對(duì)象的兩種方式：字面量創(chuàng)建對(duì)象和使用new操作符創(chuàng)建對(duì)象。
這兩種方式創(chuàng)建出來的對(duì)象都會(huì)繼承Object.prototyoe上的方法。
比如，我們使用字面量新創(chuàng)建一個(gè)對(duì)象o:

var o = {value: 1};
o.toString();//"[object Object]"
//查找過程： o --> o.__proto__ 找到返回
o.__proto__ === Object.prototype;//true

o這個(gè)的對(duì)象本身并沒有toString這個(gè)方法，但它卻可以使用toString方法。
因?yàn)樗^承了Object.prototyoe上的toString的方法。

null
既然對(duì)象都會(huì)繼承自Object.prototype上面的方法，那它自己的原型又是什么呢。答案是null

Object.prototype.__prototype__ === null;//true

以上僅自己學(xué)習(xí)所得，如有不當(dāng)之處望指出。

云服務(wù)器 GPU云服務(wù)器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/101194.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Mike617

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

阿里云企業(yè)和個(gè)人賬號(hào)區(qū)別是什么?阿里云企業(yè)認(rèn)證和個(gè)人實(shí)名認(rèn)證區(qū)別

閱讀 2482·2021-11-19 09:59
上百道最新前端面試題

閱讀 2008·2019-08-30 15:55
前端小白進(jìn)階筆記之多級(jí)菜單分享

閱讀 939·2019-08-29 13:30
簡單的node爬蟲存入excel數(shù)據(jù)分析

閱讀 1346·2019-08-26 10:18
JS - debounce(去抖) 和 throttle(節(jié)流)

閱讀 3092·2019-08-23 18:36
JavaScript 之原型和原型鏈

閱讀 2394·2019-08-23 18:25
webpack 配置多頁面應(yīng)用的一次嘗試

閱讀 1168·2019-08-23 18:07
url字符串解析

閱讀 443·2019-08-23 17:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

新手理解的JS原型鏈

相關(guān)文章

JavaScript進(jìn)階學(xué)習(xí)（二）—— 基于原型鏈繼承的js工具庫的實(shí)現(xiàn)方法

【JS基礎(chǔ)】原型對(duì)象的那些事（二）

幾句話就能讓你理解：this、閉包、原型鏈

學(xué)習(xí)設(shè)計(jì)模式前需要知道的事情

JS專題之繼承

發(fā)表評(píng)論

0條評(píng)論

Mike617

男|高級(jí)講師

TA的文章

阿里云企業(yè)和個(gè)人賬號(hào)區(qū)別是什么?阿里云企業(yè)認(rèn)證和個(gè)人實(shí)名認(rèn)證區(qū)別

上百道最新前端面試題

前端小白進(jìn)階筆記之多級(jí)菜單分享

簡單的node爬蟲存入excel數(shù)據(jù)分析

JS - debounce(去抖) 和 throttle(節(jié)流)

JavaScript 之原型和原型鏈

webpack 配置多頁面應(yīng)用的一次嘗試

url字符串解析

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

新手理解的JS原型鏈

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！