JS原型鏈

neuSnail 發布于2019-08-19 18:02 / 3398人閱讀

摘要：構造函數除了以指定模式創建對象之外，構造函數也做了另一個有用的事情它自動地為新創建的對象設置一個原型對象。正式來說，如果思考一下分類的概念并且我們已經對進行了分類，那么構造函數和原型對象合在一起可以叫作類。

這篇文章是「深入ECMA-262-3」系列的一個概覽和摘要。每個部分都包含了對應章節的鏈接，所以你可以閱讀它們以便對其有更深的理解。

對象

ECMAScript做為一個高度抽象的面向對象語言，是通過對象來交互的。即使ECMAScript里邊也有基本類型，但是，當需要的時候，它們也會被轉換成對象。

一個對象就是一個屬性集合，并擁有一個獨立的prototype（原型）對象。這個prototype可以是一個對象或者null。

讓我們看一個關于對象的基本例子。一個對象的prototype是以內部的[[Prototype]]屬性來引用的。但是，在示意圖里邊我們將會使用____下劃線標記來替代兩個括號，對于prototype對象來說是：__proto__。

對于以下代碼：

var foo = {
  x: 10,
  y: 20
};

我們擁有一個這樣的結構，兩個明顯的自身屬性和一個隱含的__proto__屬性，這個屬性是對foo原型對象的引用：

這些prototype有什么用？讓我們以原型鏈（prototype chain）的概念來回答這個問題。

原型鏈

原型對象也是簡單的對象并且可以擁有它們自己的原型。如果一個原型對象的原型是一個非null的引用，那么以此類推，這就叫作原型鏈。

原型鏈是一個用來實現繼承和共享屬性的有限對象鏈。

考慮這么一個情況，我們擁有兩個對象，它們之間只有一小部分不同，其他部分都相同。顯然，對于一個設計良好的系統，我們將會重用相似的功能/代碼，而不是在每個多帶帶的對象中重復它。在基于類的系統中，這個代碼重用風格叫作類繼承－你把相似的功能放入類A中，然后類B和類C繼承類A，并且擁有它們自己的一些小的額外變動。

ECMAScript中沒有類的概念。但是，代碼重用的風格并沒有太多不同（盡管從某些方面來說比基于類（class-based）的方式要更加靈活）并且通過原型鏈來實現。這種繼承方式叫作委托繼承(delegation based inheritance)（或者，更貼近ECMAScript一些，叫作原型繼承(prototype based inheritance)）。

跟例子中的類A，B，C相似，在ECMAScript中你創建對象：a，b，c。于是，對象a中存儲對象b和c中通用的部分。然后b和c只存儲它們自身的額外屬性或者方法。

var a = {
      x: 10,
    calculate: function (z) {
        return this.x + this.y + z
      }
};

var b = {
  y: 20,
  __proto__: a
};

var c = {
  y: 30,
  __proto__: a
};

// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80

足夠簡單，是不是？我們看到b和c訪問到了在對象a中定義的calculate方法。這是通過原型鏈實現的。

規則很簡單：如果一個屬性或者一個方法在對象自身中無法找到（也就是對象自身沒有一個那樣的屬性），然后它會嘗試在原型鏈中尋找這個屬性/方法。如果這個屬性在原型中沒有查找到，那么將會查找這個原型的原型，以此類推，遍歷整個原型鏈（當然這在類繼承中也是一樣的，當解析一個繼承的方法的時候－我們遍歷class鏈（ class chain））。第一個被查找到的同名屬性/方法會被使用。因此，一個被查找到的屬性叫作繼承屬性。如果在遍歷了整個原型鏈之后還是沒有查找到這個屬性的話，返回undefined值。

注意，繼承方法中所使用的this的值被設置為原始對象，而并不是在其中查找到這個方法的（原型）對象。也就是，在上面的例子中this.y取的是b和c中的值，而不是a中的值。但是，this.x是取的是a中的值，并且又一次通過原型鏈機制完成。

如果沒有明確為一個對象指定原型，那么它將會使用__proto__的默認值－Object.prototype。Object.prototype對象自身也有一個__proto__屬性，這是原型鏈的終點并且值為null。

下一張圖展示了對象a，b，c之間的繼承層級：

注意： ES5標準化了一個實現原型繼承的可選方法，即使用 Object.create 函數：

var b = Object.create(a, {y: {value: 20}});
var c = Object.create(a, {y: {value: 30}});

你可以在對應的章節獲取到更多關于ES5新API的信息。 ES6標準化了 __proto__屬性，并且可以在對象初始化的時候使用它。

通常情況下需要對象擁有相同或者相似的狀態結構（也就是相同的屬性集合），賦以不同的狀態值。在這個情況下我們可能需要使用構造函數(constructor function)，其以指定的模式來創造對象。

構造函數

除了以指定模式創建對象之外，構造函數也做了另一個有用的事情－它自動地為新創建的對象設置一個原型對象。這個原型對象存儲在ConstructorFunction.prototype 屬性中。

換句話說，我們可以使用構造函數來重寫上一個擁有對象b和對象c的例子。因此，對象a（一個原型對象）的角色由Foo.prototype來扮演：

// a constructor function
function Foo(y) {
  // which may create objects
  // by specified pattern: they have after
  // creation own "y" property
  this.y = y;
}

// also "Foo.prototype" stores reference
// to the prototype of newly created objects,
// so we may use it to define shared/inherited
// properties or methods, so the same as in
// previous example we have:

// inherited property "x"
Foo.prototype.x = 10;

// and inherited method "calculate"
Foo.prototype.calculate = function (z) {
  return this.x + this.y + z;
};

// now create our "b" and "c"
// objects using "pattern" Foo
var b = new Foo(20);
var c = new Foo(30);

// call the inherited method
b.calculate(30); // 60
c.calculate(40); // 80

// let"s show that we reference
// properties we expect

console.log(

  b.__proto__ === Foo.prototype, // true
  c.__proto__ === Foo.prototype, // true

  // also "Foo.prototype" automatically creates
  // a special property "constructor", which is a
  // reference to the constructor function itself;
  // instances "b" and "c" may found it via
  // delegation and use to check their constructor

  b.constructor === Foo, // true
  c.constructor === Foo, // true
  Foo.prototype.constructor === Foo // true

  b.calculate === b.__proto__.calculate, // true
  b.__proto__.calculate === Foo.prototype.calculate // true

);

這個代碼可以表示為如下關系：

這張圖又一次說明了每個對象都有一個原型。構造函數Foo也有自己的__proto__，值為Function.prototype，Function.prototype也通過其__proto__屬性關聯到Object.prototype。因此，重申一下，Foo.prototype就是Foo的一個明確的屬性，指向對象b和對象c的原型。

正式來說，如果思考一下分類的概念（并且我們已經對Foo進行了分類），那么構造函數和原型對象合在一起可以叫作「類」。實際上，舉個例子，Python的第一級（first-class）動態類（dynamic classes）顯然是以同樣的屬性/方法處理方案來實現的。從這個角度來說，Python中的類就是ECMAScript使用的委托繼承的一個語法糖。

注意: 在ES6中「類」的概念被標準化了，并且實際上以一種構建在構造函數上面的語法糖來實現，就像上面描述的一樣。從這個角度來看原型鏈成為了類繼承的一種具體實現方式：

// ES6
class Foo {
  constructor(name) {
    this._name = name;
  }

  getName() {
    return this._name;
  }
}

class Bar extends Foo {
  getName() {
    return super.getName() + " Doe";
  }
}

var bar = new Bar("John");
console.log(bar.getName()); // John Doe

轉自 JavaScript. The core.

全面的課程內容，只為打造企業最需要的WEB前端工程師，最新前端視頻分享，請關注微信公眾號“一起玩前端”或掃描二維碼關注。

回復以下內容，即可獲取對應最新視頻。

001------ HTML

002------ CSS

003------ DIV+CSS

004------ HTML5

005------ CSS3

006------ Web響應式布局

007------JavaScript視頻教程

GPU云服務器云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

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

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

JS基礎-原型、原型鏈真的不能一知半解

摘要：原型鏈和對象的原型是對象實例和它的構造函數之間建立的鏈接，它的值是構造函數的。對象的原型根據上文提到的構造調用函數的時候會創建一個新對象，自動將的原型指向構造函數的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清...

changfeng1050 2019-08-26 11:00 評論0 收藏0
從實現角度分析js原型鏈

摘要：從實現角度分析原型鏈歡迎來我的博客閱讀從實現角度分析原型鏈網上介紹原型鏈的優質文章已經有很多了，比如說作為補充，就讓我們換個角度，從實現來分析一下吧本文假設你對原型鏈已經有所了解。從實現角度分析js原型鏈歡迎來我的博客閱讀：《從實現角度分析js原型鏈》網上介紹原型鏈的優質文章已經有很多了，比如說： https://github.com/mqyqingfeng/Blog/issu...

CompileYouth 2019-08-20 19:04 評論0 收藏0
理解js的原型與繼承

摘要：相當于在用原型繼承編寫復雜代碼前理解原型繼承模型十分重要。同時，還要清楚代碼中原型鏈的長度，并在必要時結束原型鏈，以避免可能存在的性能問題。 js是一門動態語言,js沒有類的概念,ES6 新增了class 關鍵字，但只是語法糖，JavaScript 仍舊是基于原型。至于繼承,js的繼承與java這種傳統的繼承不一樣.js是基于原型鏈的繼承. 在javascript里面,每個對象都有一...

wthee 2019-08-20 12:25 評論0 收藏0
js 的原型原型鏈原型鏈的繼承

摘要：圖片描述缺點是無法實現多繼承可以在構造函數中，為實例添加實例屬性。對象的方法 Object.assign() 對象可以簡寫，如果 key 和 value 相等則可以簡寫 let name = xm; let age = 2; let obj = { name， age, fn(){ // 可以省略函數關鍵字和冒號： console.log(2...

soasme 2019-08-26 10:13 評論0 收藏0
js原型鏈

摘要：構造函數，實例，原型三者的關系如下圖構造函數是構成整個原型鏈的關鍵，是他利用將原型傳給了后代。因此，通過操縱構造函數的，就能夠操縱原型鏈，從而對原型鏈進行自在的拼接。要理解js的原型鏈主要就是理清楚以下三者的關系：構造函數的protitype屬性對象的__proto__屬性對象的constructor屬性在js中，函數作為一等公民，它是一個對象，可以擁有自己的屬性，可...

NervosNetwork 2019-08-22 17:59 評論0 收藏0
【前端基礎進階】JS原型、原型鏈、對象詳解

摘要：二構造函數我們先復習一下構造函數的知識上面的例子中和都是的實例。這兩個實例都有一個構造函數屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 評論0 收藏0