淺談 JavaScript 原型鏈

explorer_ddf 發(fā)布于2019-08-23 12:18 / 1784人閱讀

摘要：數(shù)組的構(gòu)造函數(shù)是原型鏈的指向與其他除以外的構(gòu)造函數(shù)相同，的也指向頂級(jí)原型對(duì)象，每一個(gè)數(shù)組都是的實(shí)例，都指向。實(shí)例對(duì)象查找構(gòu)造函數(shù)原型對(duì)象的方法一般會(huì)把對(duì)象共有的屬性和方法都放在構(gòu)造函數(shù)的原型對(duì)象上。

閱讀原文

概述

在 JavaScript 中有種說(shuō)法叫 “萬(wàn)物皆對(duì)象”，就是說(shuō)無(wú)論是構(gòu)造函數(shù)創(chuàng)建的實(shí)例，構(gòu)造函數(shù)本身、原型對(duì)象、數(shù)組、函數(shù)本質(zhì)上都是對(duì)象，都擁有 __proto__ 屬性，即隱式原型，所有函數(shù)都擁有 prototype 屬性，即顯式原型（僅限函數(shù)），原型對(duì)象（prototype 屬性指向的對(duì)象），在定義函數(shù)時(shí)就被創(chuàng)建。

原型鏈指向概述

在 JavaScript 中整個(gè)原型鏈及查找機(jī)制用下圖可以完整的表示出來(lái)：

原型鏈指向：

1、通過(guò)字面量和 new Object() 所創(chuàng)建的對(duì)象，他們是構(gòu)造函數(shù)是 function Object() 的實(shí)例，Object 構(gòu)造函數(shù)的 prototype 指向原型對(duì)象 Object.prototype，Object.prototype 的 constructor 指向構(gòu)造函數(shù) Object，而實(shí)例的 __proto__ 也指向 Object.prototype，Object.prototype 的 __proto__ 指向 null，所以 Object.prototype 也叫做頂級(jí)原型對(duì)象。

2、上圖中 new Foo() 創(chuàng)建的對(duì)象是構(gòu)造函數(shù) function Foo() 的實(shí)例，Foo 的 prototype 指向原型對(duì)象 Foo.prototype，Foo.prototype 的 constructor 指向構(gòu)造函數(shù) Foo，而實(shí)例的 __proto__ 也指向 Foo.prototype，并且 Foo.prototype 雖然是原型對(duì)象，但也是對(duì)象，所以是構(gòu)造函數(shù) Object 的實(shí)例，__proto__ 指向頂級(jí)原型對(duì)象 Object.prototype。

3、數(shù)組的構(gòu)造函數(shù)是 function Array() 原型鏈的指向與其他除 Object 以外的構(gòu)造函數(shù)相同，Array.prototype 的 __proto__ 也指向頂級(jí)原型對(duì)象 Object.prototype，每一個(gè)數(shù)組都是 Array 的實(shí)例，__proto__ 都指向 Array.prototype。

4、Object、Array、Foo 等構(gòu)造函數(shù)的本質(zhì)也是對(duì)象，他們的構(gòu)造函數(shù)是 function Function()，Function 的 prototype 指向 Function.prototype，Function.prototype 的 constructor 指向 Function，所有的構(gòu)造函數(shù)的 __proto__ 都指向 Function.prototype，包括 Function 本身，也就是說(shuō)構(gòu)造函數(shù) Function 是由自己構(gòu)造的，Function.prototype 的 __proto__ 同樣指向頂級(jí)原型對(duì)象 Object.prototype。

prototype 原型對(duì)象

prototype 是函數(shù)的一個(gè)屬性，屬性的值指向了一個(gè)對(duì)象，所以，只有函數(shù)才有 prototype 原型對(duì)象。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

typeof Person.prototype; // object
Person.prototype.constructor; // Person {}
Person.prototype.job = "qianduan";

var p1 = new Person("panda", 18);
var p2 = new Person("shen", 20);

p1.constructor.prototype; // 實(shí)例對(duì)象查找構(gòu)造函數(shù)原型對(duì)象的方法

一般會(huì)把對(duì)象共有的屬性和方法都放在構(gòu)造函數(shù)的原型對(duì)象上。

實(shí)例、構(gòu)造函數(shù)、原型對(duì)象的關(guān)系

構(gòu)造函數(shù)的原型 prototype 屬性指向一個(gè)原型對(duì)象，實(shí)例也可以通過(guò) __proto__ 指向原型對(duì)象，但本質(zhì)上實(shí)例和構(gòu)造函數(shù)之間是沒有關(guān)系的。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var p = new Person("nihao", 16);
p.constructor = { name: "haha" };
p.name; // nihao

上面的代碼中改變了構(gòu)造函數(shù)的值為一個(gè)對(duì)象，對(duì)象中的屬性 name 并沒有影響實(shí)例的 name 屬性值。

實(shí)例屬性 __proto__

上面訪問實(shí)例 p 的原型，實(shí)際使用 p.constructor.prototype 去找原型對(duì)象，當(dāng)構(gòu)造函數(shù)的值改變后是找不到原型對(duì)象的，所以實(shí)例并不是通過(guò) constructor.prototype 去查找原型對(duì)象的，而是通過(guò)每一個(gè)實(shí)例都有的 __proto__ 屬性，這個(gè)屬性指向創(chuàng)建實(shí)例的構(gòu)造函數(shù)原本的原型對(duì)象，這個(gè)屬性不是標(biāo)準(zhǔn)，在 IE 下不存在。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.job = "qianduan";
var p = new Person("nihao", 16);

p.__proto__.job; // qianduan

當(dāng)構(gòu)造函數(shù)的 prototype 屬性值被改變之后，在之前創(chuàng)建的實(shí)例的 __proto__ 屬性值的仍然引用原型對(duì)象，所以對(duì)構(gòu)造函數(shù)改變前創(chuàng)建的實(shí)例是沒有影響的，會(huì)影響后面創(chuàng)建的實(shí)例。

原型鏈查找機(jī)制

實(shí)例對(duì)象在調(diào)用了一個(gè)屬性或方法時(shí)，如果對(duì)象本身沒有這個(gè)屬性或方法，會(huì)去自己的原型對(duì)象查找，也就是 __proto__ 中查找，如果原型對(duì)象中沒有，去原型對(duì)象的原型對(duì)象查找，一般（原型鏈沒有被修改）情況下就是去 __proto__ 的 __proto__ 中查找，即頂級(jí)原型對(duì)象 Object.prototype，如果實(shí)例對(duì)象本身有這個(gè)屬性，則直接輸出，不再向上查找，如果對(duì)象本身和原型對(duì)象具有同名屬性，則會(huì)屏蔽掉原型對(duì)象的屬性。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.job = "qianduan";
var p = new Person("nihao", 16);

p.job; // qianduan
p.job = "houtai";
p.job; // houtai
p.__proto__.job; // qianduan

總結(jié)

原型鏈的指向及原型鏈的查找機(jī)制是 JavaScript 中非常重要的基礎(chǔ)知識(shí)，理解原型鏈?zhǔn)歉钊肓私饫^承和面向?qū)ο缶幊痰谋亟?jīng)之路。

云服務(wù)器 GPU云服務(wù)器淺談javascript 原型原型鏈原型鏈 javascript原型

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

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

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

登陸后可評(píng)論

0條評(píng)論

explorer_ddf

男|高級(jí)講師

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

TA的文章

tensorflow1.14對(duì)應(yīng)的keras版本

閱讀 818·2023-04-25 22:13
微信小程序常遇問題收集

閱讀 2335·2019-08-30 15:56
移動(dòng)端border：1px問題解決方案

閱讀 2218·2019-08-30 11:21
「翻譯」逐步替換Sass

閱讀 650·2019-08-30 11:13
一套基于vue2.0高質(zhì)量的UI框架，前期開發(fā)中

閱讀 2014·2019-08-26 14:06
微信JS-SDK選擇圖片遇到的坑

閱讀 1950·2019-08-26 12:11
常用的JavaScript編程風(fēng)格

閱讀 2282·2019-08-23 16:55
【前端基礎(chǔ)進(jìn)階】JS原型、原型鏈、對(duì)象詳解

閱讀 530·2019-08-23 15:30

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

資訊專欄INFORMATION COLUMN

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

淺談 JavaScript 原型鏈

相關(guān)文章