你真的明白javascript中的原型和原型鏈了嗎

Harpsichord1207 發布于2019-08-23 15:37 / 3365人閱讀

摘要：補充的知識這個是原型中的自帶屬性，指向構造函數這個屬性其實是瀏覽器實現的，不是標準的訪問原型的方式中規定的正式方法是以上知識，最終的圖如下思考題在文章開頭我們說過函數也是對象，既然是對象就有原型，那的原型指向誰呢是嗎

文章開頭說的話

首先你必須明白(或者記住)的JavaScript常識：

在JavaScript中每個函數都有一個prototype屬性

在JavaScript中每個對象都有一個__proto__屬性

在JavaScript中函數是一等公民，即函數也是對象

prototype和__proto__

prototype到底是個啥呢？下面看下這段代碼，我們慢慢來

// Animal是個構造函數，所以有prototype屬性
function Animal(){}
// 在prototype上定義eat方法
Animal.prototype.eat = function(food){
  console.log("it is eating " + food);  
}
// 構造函數實例化a1
const a1 = new Animal();
// 構造函數實例化a2
const a2 = new Animal();
// 調用實例的方法
a1.eat("food");
a2.eat("food");

從上面的代碼中，我們可以看到：

函數的prototype指向一個對象

函數實例化后的對象可以獲取prototype指向對象的方法(和屬性)

那他們之前的關系是怎么樣的呢？

從圖中我們可以看到：

Animal的prototype指向一個對象

Animal的實例通過__proto__關聯到Animal的prototype指向的對象

用官方術語說，就是：

函數的prototype所指向的對象就是該函數創建的實例的原型(即：a2和a2的原型是Animal.prototype)

那么問題來了，什么是原型呢？
在JavaScript中，每個對象(null除外)在創建的時候都會與之關聯另外一個對象，對象和原型之間通過__proto__進行關聯

原型的作用

在上面的代碼中，我們可以看到實例對象中并沒有eat方法，但是每個實例對象都可以調用eat方法，那中間的過程是怎樣的呢？

當我們調用實例對象(a1和a2)的方法(eat)的時候，如果找到則直接調用實例對象的方法或者屬性；如果找不到，就會查找與之關聯的原型上是否有這個方法，如果這個原型沒有，就會繼續向上查找該原型的原型(原型的原型后面探討)

原型的原型

在上面我們提到了如果在原型上找不到相應的屬性或者方法，就會在原型的原型上查找，那么什么是原型的原型呢？

首先在文章開頭我們說每個對象都有原型，而原型也是對象，所以原型也是有原型的(聽起來有點繞)

那之前代碼的Animal.prototype的原型指向哪里呢(即Animal.prototype.__proto__)指向誰呢？這里Animal.prototype是JavaScript內置構造函數Object生成的呢，那是不是應該指向Object.prototype呢？答案是是的。

那Object.prototype也是對象，它的原型呢？Object.prototype.__proto__指向哪個對象呢？答案是：null;即：

Object.prototype.__proto__ === null // true
// 表示如果查找屬性的時候到Object.prototype時還是沒有就停止，沒有了

最后畫張圖：

原型鏈

注意到上圖中的藍色線條部分了嗎，這就是大名鼎鼎的原型鏈。

補充的知識

constructor: 這個是原型中的自帶屬性，指向構造函數

__proto__: 這個屬性其實是瀏覽器實現的，不是標準的訪問原型的方式；ES5中規定的正式方法是：Object.getPrototypeOffang"fa

Object.getPrototypeOf(a1) === Animal.prototype // true

以上知識，最終的圖如下：

思考題：

在文章開頭我們說過函數也是對象，既然是對象就有原型，那Animal的原型指向誰呢？

Function.prototype === Function.__proto__ 是true嗎？

GPU云服務器云服務器 javascript原型原型原型鏈基于原型原型方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102328.html

你真的弄明白 new 了嗎

摘要：如果構造函數有返回值呢一般情況下構造函數沒有返回值，但是我們依舊可以得到該對象的實例如果構造函數有返回值，憑直覺來說情況應該會不一樣。歡迎光臨小弟博客我的博客原文你真的弄明白了嗎參考再談面向對象編程的實例化與繼承請停止使用關鍵字好久沒有寫點東西了，總覺得自己應該寫點牛逼的，卻又不知道如何下筆。既然如此，還是回歸最基本的吧，今天就來說一說這個new。關于javascript的new關鍵...

tolerious 2019-08-21 10:31 評論0 收藏0
徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構造函數繼承，在中是一種關鍵的實現的繼承方法，相信你已經很好的掌握了。你應該知道，JavaScript是一門基于原型鏈的語言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關。甚至可以說，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構造函數，原型屬性與實例對象要搞清楚如何在JavaScript中實現繼承，...

_ivan 2019-08-21 17:48 評論0 收藏0
javascript對象詳解：__proto__和prototype的區別和聯系

摘要：當這步完成，這個對象就與構造函數再無聯系，這個時候即使構造函數再加任何成員，都不再影響已經實例化的對象了。此時，對象具有了和屬性，同時具有了構造函數的原型對象的所有成員，當然，此時該原型對象是沒有成員的。前言本篇文章用來記錄下最近研究對象的一些心得，做一個記錄與總結，以加深自己的印象，同時，希望也能給正在學習中的你一點啟發。本文適合有一定JavaScript基礎的童鞋閱讀。原文戳這...

chavesgu 2019-08-21 11:41 評論0 收藏0
如何優雅的理解ECMAScript中的對象

摘要：標準對象，語義由本規范定義的對象。這意味著雖然有，本質上依然是構造函數，并不能像那樣表演多繼承嵌套類等高難度動作。不過這里的并不是我們所說的數據類型，而是對象構造函數。序 ECMAScript is an object-oriented programming language for performing computations and manipulating computat...

why_rookie 2019-08-20 17:31 評論0 收藏0