JavaScript中從原型到原型鏈的示例分析

這篇“JavaScript中從原型到原型鏈的示例分析”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“JavaScript中從原型到原型鏈的示例分析”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

一、構(gòu)造函數(shù)

1.1 什么是構(gòu)造函數(shù)？

構(gòu)造函數(shù)本身就是一個(gè)函數(shù)，與普通函數(shù)沒(méi)有任何區(qū)別，不過(guò)為了規(guī)范一般將其首字母大寫。構(gòu)造函數(shù)和普通函數(shù)的區(qū)別在于，使用new生成實(shí)例的函數(shù)就是構(gòu)造函數(shù)，直接調(diào)用的就是普通函數(shù)。

function Person() {
	this.name = 'yuguang';};var person = new Person();console.log(person.name) // yuguang

在這個(gè)例子中，Person 就是一個(gè)構(gòu)造函數(shù)。

1.2 constructor？

constructor 返回創(chuàng)建實(shí)例對(duì)象時(shí)構(gòu)造函數(shù)的引用。此屬性的值是對(duì)函數(shù)本身的引用，而不是一個(gè)包含函數(shù)名稱的字符串。

可以看到實(shí)例對(duì)象的constructor指向了它的構(gòu)造函數(shù)，而它和原型的關(guān)系我們?cè)谥髸?huì)鏈接到一起。

1.3 都有哪些數(shù)據(jù)類型或者函數(shù)擁有constructor呢？

在JavaScript中，每個(gè)具有原型的對(duì)象都會(huì)自動(dòng)獲得constructor屬性。除了：arguments、Enumerator、Error、Global、Math、RegExp等一些特殊對(duì)象之外，其他所有的JavaScript內(nèi)置對(duì)象都具備constructor屬性。例如：Array、Boolean、Date、Function、Number、Object、String等。所有主流瀏覽器均支持該屬性。打開控制臺(tái)我們可以驗(yàn)證一下

// 字符串console.log('str'.constructor) // ? String() { [native code] }console.log('str'.constructor === String) // true// 數(shù)組console.log([1,2,3].constructor) // ? Array() { [native code] }console.log([1,2,3].constructor === Array) // true// 數(shù)字var num = 1console.log(num.constructor) // ? Number() { [native code] }console.log(num.constructor === Number) // true// Dateconsole.log(new Date().constructor) // ? Date() { [native code] }// 注意?。?！不要混淆哦console.log(new Date().getTime().constructor) // ? Number() { [native code] }// Booleanconsole.log(true.constructor) // ? Boolean() { [native code] }console.log(true.constructor === Boolean) // true// 自定義函數(shù)function show(){
	console.log('yuguang');};console.log(show.constructor) // ? Function() { [native code] }// 自定義構(gòu)造函數(shù)，無(wú)返回值function Person(){
	this.name = name;};var p = new Person()console.log(p.constructor) // ? Person()// 有返回值function Person(){
	this.name = name;
	return {
		name: 'yuguang'
	}};var p = Person()console.log(p1.constructor) // ? Object() { [native code] }

1.4 模擬實(shí)現(xiàn)一個(gè)new

既然構(gòu)造函數(shù)與普通函數(shù)的區(qū)別僅僅在于調(diào)用方式上，我們就應(yīng)該了解new。

• 當(dāng)調(diào)用new運(yùn)算符時(shí)，該函數(shù)總會(huì)返回一個(gè)對(duì)象；

• 通常情況下，構(gòu)造器里的this就指向返回的這個(gè)對(duì)象；

代碼如下：

通常情況下var MyClass = function(){
	this.name = 'yuguang';};var obj = new MyClass();obj.name; // yuguang特殊情況var MyClass = function(){
	this.name = 'yuguang';
	return {
		name: '老王'
	}};var obj = new MyClass();obj.name // 老王

我們利用 __proto__（隱式原型，下文會(huì)提到）屬性來(lái)模擬一下new 調(diào)用構(gòu)造函數(shù)的過(guò)程：

var objectNew = function(){
    // 從object.prototype上克隆一個(gè)空的對(duì)象
    var obj = new Object(); 
    // 取得外部傳入的構(gòu)造器，這里是Person
    var Constructor = [].shift.call( arguments );
    // 更新，指向正確的原型
    obj.__proto__ = Constructor.prototype; //知識(shí)點(diǎn)，要考、要考、要考 
    // 借用外部傳入的構(gòu)造器給obj設(shè)置屬性
    var ret = Constructor.apply(obj, arguments);
    // 確保構(gòu)造器總是返回一個(gè)對(duì)象
    return typeof ref === 'object' ? ret : obj;}

二、原型

2.1 prototype(顯式原型)

JavaScript 是一種基于原型的語(yǔ)言 (prototype-based language)，在設(shè)計(jì)的時(shí)候模仿了Java的兩套類型機(jī)制：基本類型 和 對(duì)象類型。可見原型很重要！

每個(gè)對(duì)象都擁有一個(gè)原型對(duì)象，類是以函數(shù)的形式來(lái)定義的。prototype表示該函數(shù)的原型，也表示一個(gè)類的成員的集合?？聪聢D：

可以發(fā)現(xiàn)Person函數(shù)自己的原型都有什么：

• constructor (Person.prototype.constructor => Person)

• __proto__ （我們稱它為隱式原型）

此時(shí)我們得到了第一張表示構(gòu)造函數(shù)和實(shí)例原型之間的關(guān)系圖：

那么我們?cè)撛趺幢硎緦?shí)例與構(gòu)造函數(shù)原型，也就是 person 和 Person.prototype 之間的關(guān)系呢，這時(shí)候我們就要講到第二個(gè)屬性：

2.2 proto(隱式原型)

這是每一個(gè)JavaScript對(duì)象(除了 null )都具有的一個(gè)屬性，叫__proto__，這是一個(gè)訪問(wèn)器屬性（即 getter 函數(shù)和 setter 函數(shù)），通過(guò)它可以訪問(wèn)到對(duì)象的內(nèi)部[[Prototype]] (一個(gè)對(duì)象或 null )。

function Person() {}var person = new Person();console.log(person.__proto__ === Person.prototype); // true

于是我們更新下關(guān)系圖：

小結(jié)： 每個(gè)引用類型的隱式原型都指向它的構(gòu)造函數(shù)的顯式原型

2.3 constructor

前文提到了constructor，它與原型的關(guān)系也可以添加到這張圖里，更新下關(guān)系圖：

根據(jù)上圖的關(guān)系，下面這段的結(jié)果，大家就一目了然了：

function Person() {}var person = new Person();console.log(person.__proto__ == Person.prototype) // trueconsole.log(Person.prototype.constructor == Person) // true// 順便學(xué)習(xí)一個(gè)ES5的方法,可以獲得對(duì)象的原型console.log(Object.getPrototypeOf(person) === Person.prototype) // true

接下來(lái)我們要繼續(xù)思考實(shí)例和原型的關(guān)系：

三、實(shí)例與原型

當(dāng)讀取實(shí)例的屬性時(shí)，如果找不到，就會(huì)查找與對(duì)象關(guān)聯(lián)的原型中的屬性，如果還查不到，就去找原型的原型，一直找到最頂層為止。這樣一個(gè)查找過(guò)程

舉個(gè)例子：

function Person() {}Person.prototype.name = '老王';var person = new Person();person.name = '余光';console.log(person.name) // 余光delete person.name;console.log(person.name) // 老王

在這個(gè)例子中，我們給實(shí)例對(duì)象 person 添加了 name 屬性，當(dāng)我們打印 person.name 的時(shí)候，結(jié)果自然為 余光（is me）。

描述：

但是當(dāng)我們刪除了 person 的 name 屬性后，再次讀取 person.name，從 person 對(duì)象中找不到 name 屬性就會(huì)從 person 的原型也就是 person.proto ，也就是 Person.prototype中查找，幸運(yùn)的是我們找到了 name 屬性，結(jié)果為 老王（這…）

總結(jié)：

• 嘗試遍歷實(shí)例a中的所有屬性，但沒(méi)有找到目標(biāo)屬性；

• 查找name屬性的這個(gè)請(qǐng)求被委托給該實(shí)例a的構(gòu)造器(A)的原型，它被a.__proto__ 記錄著并且指向A.prototype；

• A.prototype存在目標(biāo)屬性，返回他的值；

但是萬(wàn)一還沒(méi)有找到呢？原型的原型又是什么呢？

四、原型的原型

在前面，我們已經(jīng)講了原型也是一個(gè)對(duì)象，既然是對(duì)象，我們就可以用最原始的方式創(chuàng)建它，那就是：

var obj = new Object();obj.name = '余光'console.log(obj.name) // 余光

其實(shí)原型對(duì)象就是通過(guò)Object構(gòu)造函數(shù)生成的，結(jié)合之前所講，實(shí)例的 __proto__ 指向構(gòu)造函數(shù)的 prototype ，可以理解成，Object.prototype()是所有對(duì)象的根對(duì)象，所以我們?cè)俅胃孪玛P(guān)系圖：

五、原型鏈

每個(gè)對(duì)象擁有一個(gè)原型對(duì)象，通過(guò) __proto__ 指針指向上一個(gè)原型 ，并從中繼承方法和屬性，同時(shí)原型對(duì)象也可能擁有原型，這樣一層一層，最終指向 null。這種關(guān)系被稱為原型鏈 (prototype chain)，通過(guò)原型鏈一個(gè)對(duì)象會(huì)擁有定義在其他對(duì)象中的屬性和方法。

這個(gè)鏈條存在著終點(diǎn)，是因?yàn)椋篛bject.prototype 的原型是——null，引用阮一峰老師的 《undefined與null的區(qū)別》 就是：

null 表示“沒(méi)有對(duì)象”，即該處不應(yīng)該有值。這句話也意味著 Object.prototype 沒(méi)有原型

我們最后更新一次關(guān)系圖，藍(lán)色線條就可以表示原型鏈這種關(guān)系。

補(bǔ)充，易錯(cuò)點(diǎn)

1.constructor
首先是 constructor 屬性，我們看個(gè)例子：

function Person() {}var person = new Person();console.log(person.constructor === Person); // true

當(dāng)獲取 person.constructor 時(shí)，其實(shí) person 中并沒(méi)有 constructor 屬性,當(dāng)不能讀取到constructor 屬性時(shí)，會(huì)從 person 的原型也就是 Person.prototype 中讀取，正好原型中有該屬性，所以：

person.constructor === Person.prototype.constructor

2.__proto__

其次是 proto ，絕大部分瀏覽器都支持這個(gè)非標(biāo)準(zhǔn)的方法訪問(wèn)原型，然而它并不存在于 Person.prototype 中，實(shí)際上，它是來(lái)自于 Object.prototype ，與其說(shuō)是一個(gè)屬性，不如說(shuō)是一個(gè) getter/setter，當(dāng)使用 obj.proto 時(shí)，可以理解成返回了 Object.getPrototypeOf(obj)。

3.真的是繼承嗎？

最后是關(guān)于繼承，前面我們講到“每一個(gè)對(duì)象都會(huì)從原型‘繼承’屬性”，實(shí)際上，繼承是一個(gè)十分具有迷惑性的說(shuō)法，引用《你不知道的JavaScript》中的話，就是：

繼承意味著復(fù)制操作，然而 JavaScript 默認(rèn)并不會(huì)復(fù)制對(duì)象的屬性，相反，JavaScript 只是在兩個(gè)對(duì)象之間創(chuàng)建一個(gè)關(guān)聯(lián)，這樣，一個(gè)對(duì)象就可以通過(guò)委托訪問(wèn)另一個(gè)對(duì)象的屬性和函數(shù)，所以與其叫繼承，委托的說(shuō)法反而更準(zhǔn)確些。

六、總結(jié)

• 使用new生成實(shí)例的函數(shù)就是構(gòu)造函數(shù)，直接調(diào)用的就是普通函數(shù)；

• 每個(gè)對(duì)象都擁有一個(gè)原型對(duì)象；

• 每個(gè)引用類型的隱式原型都指向它的構(gòu)造函數(shù)的顯式原型；

• Object.prototype是所有對(duì)象的根對(duì)象；

• 原型鏈存在終點(diǎn)，不會(huì)無(wú)限查找下去；

感謝你的閱讀，希望你對(duì)“JavaScript中從原型到原型鏈的示例分析”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！