JavaScript 原型鏈的理解

2020-10-09 10:22 更新

在講原型之前我們先來了解一下函數(shù)。

在JS中,函數(shù)的本質(zhì)就是對象,它與其他對象不同的是,創(chuàng)建它的構(gòu)造函數(shù)與創(chuàng)建其他對象的構(gòu)造函數(shù)不一樣。那產(chǎn)生函數(shù)對象的構(gòu)造函數(shù)是什么呢?是一個叫做Function的特殊函數(shù),通過new Function 產(chǎn)生的對象就是一個函數(shù)。

function f1() {}
//上面的函數(shù)等同于:
var f1 = new Function();

function sum(a, b) {
    return a + b;
}
//上面的函數(shù)等同于:
var sum = new Function("a", "b", "return a + b");//前面的是函數(shù)形參名,最后一個參數(shù)是函數(shù)體

也就是說:只要通過Function創(chuàng)建的對象就是函數(shù),函數(shù)都是通過Function創(chuàng)建的。

看下面這張圖片:

以上我們可以看到普通對象是由函數(shù)創(chuàng)建的,函數(shù)是由Function創(chuàng)建的。那我們會有一個疑問Function是從哪里來的?其實(shí)Function是不通過其他函數(shù)得到,它是JS執(zhí)行引擎初始化就直接通過本地代碼直接放置到內(nèi)存中的。

當(dāng)一個函數(shù)被創(chuàng)建后,這個函數(shù)就會自動附帶一個屬性prototype,它就是一個Object對象,代表著函數(shù)的原型。也就是說prototype就是原型對象

原型對象中包含兩個屬性:constructor和__proto__。constructor這個屬性是指創(chuàng)建原型的函數(shù),它指向函數(shù)本身。所以有以下關(guān)系:

看這樣一段代碼:

var Person = function () { };
var p = new Person();    

我們來看看這個 new 究竟做了什么?

我們把 new 的過程拆分成以下三步:

1. var p={}; 也就是說,初始化一個對象p。

2. p.__proto__=Person.prototype;

3. Person.call(p);也就是說構(gòu)造p,也可以稱之為初始化p。

我們來證明一下:

var Person = function () { };
var p = new Person();
alert(p.__proto__ === Person.prototype); // true

這段代碼會返回 true。說明我們步驟2是正確的。


那么__proto__是什么?

每個對象都會在其內(nèi)部初始化一個屬性,就是 __proto__,當(dāng)我們訪問一個對象的屬性 時,如果這個對象內(nèi)部不存在這個屬性,那么他就會去__proto__里找這個屬性,這個__proto__又會有自己的__proto__,于是就這樣 一直找下去,也就是我們平時所說的原型鏈的概念。

按照標(biāo)準(zhǔn),__proto__是不對外公開的,也就是說是個私有屬性,但是 Firefox 的引擎將他暴露了出來成為了一個共有的屬性,我們可以對外訪問和設(shè)置。

我們看一下下面這些代碼:

var Person = function () { };
    Person.prototype.Say = function () {
    alert("Person say");
}
var p = new Person();
p.Say();

我們看下為什么 p 可以訪問 Person 的 Say。

首先var p=new Person();

可以得出 p.__proto__=Person.prototype。那么當(dāng)我們調(diào)用 p.Say() 時,首先 p 中沒有 Say 這個屬性, 于是,他就需要到他的 __proto__ 中去找,也就是 Person.prototype,而我們在上面定義了 Person.prototype.Say = function(){}; 于是,就找到了這個方法。

好,接下來,讓我們看個更復(fù)雜的。


我們來做這樣的推導(dǎo):

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

我們指定了Programmer.prototype=new Person();我們來這樣拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根據(jù)上面得到p.__proto__=Programmer.prototype??梢缘玫絧.__proto__.__proto__=Person.prototype。

好,算清楚了之后我們來看上面的結(jié)果,p.Say()。由于p沒有Say這個屬性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也沒有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同樣的道理。

這也就是原型鏈的實(shí)現(xiàn)原理。

最后,其實(shí)prototype只是一個假象,他在實(shí)現(xiàn)原型鏈中只是起到了一個輔助作用,換句話說,他只是在new的時候有著一定的價值,而原型鏈的本質(zhì),其實(shí)在于__proto__!


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號