【前端芝士樹】Javascript的原型與原型鏈

yy736044583 發(fā)布于2019-08-23 12:17 / 2757人閱讀

摘要：在創(chuàng)建對象不論是普通對象還是函數(shù)對象的時候，都有一個叫做的內(nèi)置屬性，用于指向創(chuàng)建它的構(gòu)造函數(shù)的原型對象，也就是。因?yàn)橐粋€普通對象的構(gòu)造函數(shù)所以原型鏈原型鏈的形成是真正是靠而非。參考文章最詳盡的原型與原型鏈終極詳解，沒有可能是。

【前端芝士樹】Javascript的原型、原型鏈以及繼承機(jī)制

前端的面試中經(jīng)常會遇到這個問題，自己也是一直似懂非懂，趁這個機(jī)會整理一下

0. 為什么會出現(xiàn)原型和原型鏈的概念

1994年，網(wǎng)景公司（Netscape）發(fā)布了Navigator瀏覽器0.9版，但是剛開始的Js沒有繼承機(jī)制，更別提像同時期興盛的C++和Java這樣擁有面向?qū)ο蟮母拍?。在?shí)際的開發(fā)過程中，工程師們發(fā)現(xiàn)沒有繼承機(jī)制很難解決一些問題，必須有一種機(jī)制能將所有的對象關(guān)聯(lián)起來。

Brendan Eich鑒于以上情況，但不想把Js設(shè)計得過為復(fù)雜，于是引入了new關(guān)鍵詞 和 constructor構(gòu)造函數(shù)來簡化對象的設(shè)計，引入了prototype函數(shù)對象來包含所有實(shí)例對象的構(gòu)造函數(shù)的屬性和方法，引入了proto和原型鏈的概念解決繼承的問題。

1. Javscript 函數(shù)和函數(shù)對象

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function("str","console.log(str)");

凡是直接或者間接通過 new Function() 創(chuàng)建的對象都是函數(shù)對象，其他的都是普通對象。

在上面的程序中，o1、o2、o3都是普通對象，f1、f2、f3都是函數(shù)對象。

2. 構(gòu)造函數(shù)

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person("Zaxlct", 28, "Software Engineer");
var person2 = new Person("Mick", 23, "Doctor");

person1 和 person2 都是 構(gòu)造函數(shù) Person 的實(shí)例。
實(shí)例的構(gòu)造函數(shù)屬性（constructor）指向構(gòu)造函數(shù)。

3. 原型對象

Person.prototype = {
   name:  "Zaxlct",
   age: 28,
   job: "Software Engineer",
   sayName: function() {
     alert(this.name);
   }
}

每個函數(shù)對象都有一個 prototype 屬性，這個屬性就是函數(shù)的原型對象。

每個對象都有 proto 屬性，但只有函數(shù)對象才有 prototype 屬性

在默認(rèn)情況下，所有的原型對象都會自動獲得一個 constructor（構(gòu)造函數(shù)）屬性，這個屬性（是一個指針）指向 prototype 屬性所在的函數(shù)（Person）

Person.prototype.constructor == Person

而在Person這個對象進(jìn)行實(shí)例化的時候，實(shí)際上是創(chuàng)建了一個它的實(shí)例對象并賦值給它的 prototype，所以得出以下結(jié)論：

原型對象（Person.prototype）是 構(gòu)造函數(shù)（Person）的一個實(shí)例。

4. _proto_

JS 在創(chuàng)建對象（不論是普通對象還是函數(shù)對象）的時候，都有一個叫做__proto__ 的內(nèi)置屬性，用于指向創(chuàng)建它的構(gòu)造函數(shù)的原型對象，也就是prototype。

Person.prototype.constructor == Person;
person1.__proto__ == Person.prototype;
person1.constructor == Person;

看下面一段代碼

Person.prototype.__proto__ === Object.prototype;

Person.prototype 是一個普通對象，我們無需關(guān)注它有哪些屬性，只要記住它是一個普通對象。
因?yàn)橐粋€ 普通對象的構(gòu)造函數(shù) === Object
所以 Person.prototype.__proto__ === Object.prototype

5. 原型鏈

原型鏈的形成是真正是靠__proto__ 而非prototype。

person1.__proto__ === Person.prototype;
Person.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;
//Object.prototype.__proto__ === null，保證原型鏈能夠正常結(jié)束。

Person.__proto__ === Function.prototype;
Object.__proto__ === Function.prototype;
Function.prototype.__proto__ === Object.prototype;

前面三項(xiàng)已經(jīng)形成了一個原型鏈，那么后面代碼中Person和Object的__proto__都是Function.prototype呢？

所有函數(shù)對象的proto都指向Function.prototype，它是一個空函數(shù)（Empty function）

Number.__proto__ === Function.prototype  // true
Number.constructor == Function //true

Boolean.__proto__ === Function.prototype // true
Boolean.constructor == Function //true

String.__proto__ === Function.prototype  // true
String.constructor == Function //true

Object.__proto__ === Function.prototype  // true
Object.constructor == Function // true

Function.__proto__ === Function.prototype // true
Function.constructor == Function //true

Array.__proto__ === Function.prototype   // true
Array.constructor == Function //true

RegExp.__proto__ === Function.prototype  // true
RegExp.constructor == Function //true

Error.__proto__ === Function.prototype   // true
Error.constructor == Function //true

Date.__proto__ === Function.prototype    // true
Date.constructor == Function //true

所有的構(gòu)造器都來自于 Function.prototype，甚至包括根構(gòu)造器Object及Function自身。所有構(gòu)造器都繼承了·Function.prototype·的屬性及方法。如length、call、apply、bind

所以我們再舉一個原型鏈的例子

let num = new Number();
num.__proto__ === Number.prototype;
Number.prototype.__proto__ === Function.prototype;
Funtion.prototype.__proto__ === Object.prototype;
Object.prototype.__proto__ === null;

也可看下圖的實(shí)現(xiàn)，更直觀。

ok, 所以明白為什么Number、String、Array這樣的對象實(shí)例能繼承到Object的屬性以及原型鏈?zhǔn)窃趺匆换厥铝税伞?/p>

參考文章
最詳盡的 JS 原型與原型鏈終極詳解，沒有「可能是」。
三張圖搞懂JavaScript的原型對象與原型鏈 - 水乙 - 博客園
Javascript繼承機(jī)制的設(shè)計思想 - 阮一峰的網(wǎng)絡(luò)日志

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98270.html

發(fā)表評論

登陸后可評論

0條評論

yy736044583

男|高級講師

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

TA的文章

目前市面上主流服務(wù)器有那些？軟件和硬件

閱讀 2309·2021-11-24 09:39
#yyds干貨盤點(diǎn)#Java區(qū)別值傳遞與引用傳遞簡單例子

閱讀 2552·2021-11-22 15:24
小米汽車正式完成工商注冊注冊資金100億

閱讀 2992·2021-09-02 09:48
UCloud-電子核驗(yàn)版?zhèn)浒赶到y(tǒng)上線，徹底告別幕布時代，方便用戶自助化備案，方便快捷，附備案界面圖示

閱讀 3035·2021-07-26 22:01
獻(xiàn)禮618，1700+集前端教程免費(fèi)看

閱讀 1449·2019-08-30 11:09
重學(xué)前端學(xué)習(xí)筆記（七）--JavaScript對象：面向?qū)ο筮€是基于對象？

閱讀 1687·2019-08-29 18:47
HTML 文檔流，設(shè)置元素浮動，導(dǎo)致父元素高度無法自適應(yīng)的解決方法（高度欺騙）

閱讀 618·2019-08-29 15:40
百分比與圣杯布局

閱讀 2145·2019-08-29 15:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

【前端芝士樹】Javascript的原型與原型鏈

相關(guān)文章

【芝士整理】JS基礎(chǔ)圖譜

**前端性能優(yōu)化（JavaScript補(bǔ)充篇）**

**前端性能優(yōu)化（JavaScript補(bǔ)充篇）**

前端面試絕對會考的JS問題！【已經(jīng)開源】

**前端面試之JavaScript（總結(jié)）**

發(fā)表評論

0條評論

yy736044583

男|高級講師

TA的文章

目前市面上主流服務(wù)器有那些？軟件和硬件

#yyds干貨盤點(diǎn)#Java區(qū)別值傳遞與引用傳遞簡單例子

小米汽車正式完成工商注冊注冊資金100億

UCloud-電子核驗(yàn)版?zhèn)浒赶到y(tǒng)上線，徹底告別幕布時代，方便用戶自助化備案，方便快捷，附備案界面圖示

獻(xiàn)禮618，1700+集前端教程免費(fèi)看

重學(xué)前端學(xué)習(xí)筆記（七）--JavaScript對象：面向?qū)ο筮€是基于對象？

HTML 文檔流，設(shè)置元素浮動，導(dǎo)致父元素高度無法自適應(yīng)的解決方法（高度欺騙）

百分比與圣杯布局

最新活動

資訊專欄INFORMATION COLUMN

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

【前端芝士樹】Javascript的原型與原型鏈

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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