【翻譯】javascript中的prototype

lentrue 發布于2019-08-22 10:50 / 1199人閱讀

摘要：構造函數就是一個具有屬性的方法，該屬性被稱作標識具有一個屬性，但是沒有用戶定義它。然而，構造函數的屬性可以被改變，并且將影響用這個原型創建的對象。

原文地址：http://dailyjs.com/2012/05/20/js101-prototype/

在花費了很多年研究面向對象編程之后，想在javascript使用是令人失望的。主要是從根源上缺少一個class這樣的關鍵詞。然而，javascript的設計不會成為阻礙 -- 精通它基于原型的繼承，將會加深你對該語言的理解。

首先我們需要弄清楚面向對象與面向類編程的區別。Javascript提供了我們需要的工具來完成大多數語言的類可以做的事情 -- 我們只需要學習如何正確使用它。

我們簡單的看一下prototype屬性，看它如何深化我們對javascript的了解。

prototype屬性（The prototype Property）

prototype屬性是一個內部屬性，它被用于實現繼承。我們這里的“繼承”是一種特定的繼承形式。因為狀態和方法都由對象承載，所以我們可以說結構、行為和狀態都是繼承的。這與基于類的語言形成對比，其狀態由實例承載，而方法由類承載。

構造函數就是一個具有屬性的方法，該屬性被稱作prototype:

function Animal() {
    
}
console.log(Animal.prototype);

{}標識Animal具有一個prototype屬性，但是沒有用戶定義它。我們可以隨意添加值和方法:

function Animal() {  
}

Animal.prototype.type = "Unknown";  
Animal.prototype.weight = 0;  
Animal.prototype.weightUnits = "kg";

Animal.prototype.toString = function() {  
  return this.type + ", " + this.weight + this.weightUnits;
};

var molly = new Animal();  
molly.type = "Dog";  
molly.weight = 28;

console.log(molly.toString());  // Dog, 28kg

這將會輸出"Dog, 28kg"。我們可以使用對象字面量將這些賦值分組：

function Animal() {  
}

Animal.prototype = {  
  type: "Unknown",
  weight: 0,
  weightUnits: "kg",

  toString: function() {
    return this.type + ", " + this.weight + this.weightUnits;
  }
};

這樣就和你熟悉的類的方式差異不是很大。

動態原型（Dynamic Prototypes）

通過指定值可以給對象動態的添加屬性。

var molly = new Animal()  
  , harley = new Animal();

molly.type = "Dog";  
molly.weight = 28;

harley.type = "Dog";  
harley.weight = 38;  
harley.name = "Harley";

console.log(molly);  
console.log(harley);

// { type: "Dog", weight: 28 }
// { type: "Dog", weight: 38, name: "Harley" }

在這里添加name屬性只影響了實例。然而，構造函數的屬性可以被改變，并且將影響用這個原型創建的對象。

Animal.prototype.weightUnits = "oz";

console.log(molly.toString())  
// Now displays "Dog, 28oz"

這就是為什么人們只會擴展自己的庫而不去改變內置原型，或者說只有這么做才是安全的。我們完全有可能改變對象，例如使用String的內置方法做一些不安全的事情：

String.prototype.match = function() {  
  return true;
};

console.log("alex".match(/1234/));

輸出為true,所以現在我成功的破壞了很多程序都在依賴的基礎方法。
改變內置原型也不一定全部是壞的；我們使用它有用的東西，如修補支持更舊版本的ECMAScript在舊版的瀏覽器。

如果我們替換prototype屬性會發生什么？

var molly = new Animal()  
  , harley;

molly.type = "Dog";  
molly.weight = 28;

Animal.prototype = {  
  toString: function() {
    return "...";
  }
};

harley = new Animal;  
harley.type = "Dog";  
harley.weight = 38;

console.log(molly.toString());  
console.log(harley.toString());

// Dog, 28kg
// ...

盡管事實上改變原型會影響所有實例，但是完全替換構造函數的原型不會影響舊實例。為什么？實例具有對原型的引用，而不是離散拷貝。想象它就是這樣：使用new關鍵字創建的每個實例都鏈接到原始原型。

云服務器 GPU云服務器 javascript_prototype javascript中的 javaScript中的this javascript中的函數

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

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

Javascript中的的對象——原型模式(Prototype)

摘要：使用原型模式添加方法和屬性在前面的章節中，已經學習過了如何定義一個構建新對象時使用的構造函數。向構造函數的中添加方法和屬性是在對象被創建的時候為對象添加功能的另一種方式。讓我們繼續使用對象作為構造函數的原型屬性。本文原文來源：《Object-Oriented JavaScript》By Stoyan Stefanov本文翻譯來源：赤石俊哉原創翻譯版權申明：如果您是原文的原作者并且...

岳光 2019-08-20 14:44 評論0 收藏0
JavaScript中的this陷阱的最全收集--沒有之一

摘要：提及的精髓，閉包作用域鏈函數是當之無愧的。博客的標題是中的陷阱的最全收集沒有之一，很顯然這篇博客闡述的是。這是造成很多不熟悉的人深陷陷阱的根源。你應該避免在構造函數里面返回任何東西，因為這可能代當有人問起你JavaScript有什么特點的時候，你可能立馬就想到了單線程、事件驅動、面向對象等一堆詞語，但是如果真的讓你解釋一下這些概念，可能真解釋不清楚。有句話這么說：如果你不能向一個6歲...

KitorinZero 2019-08-21 10:28 評論0 收藏0
30秒就能理解的 Javascript 代碼片段 --- Array篇

摘要：而這個秒就能理解的代碼片段，摒棄了許多不必要的代碼，只實現了最核心的部分，不像和那樣，考慮參數邊界值問題，例如，參數的類型是否符合預期等。使用根據斷言函數對數組進行過濾，返回條件為真值的對象。之前翻譯過一篇文章，《我喜歡的5個編程技巧》，里面的一個技巧是借鑒一個網站的代碼片段，好奇的小手點下鏈接后，發現是一個有 47000 多star的倉庫，30-seconds-of-code。倉...

fox_soyoung 2019-08-26 10:26 評論0 收藏0
45個實用的JavaScript小貼士、小技巧和最佳實踐

摘要：翻譯正文第一次聲明變量時，請不要忘記使用關鍵字聲明使用代替空字符串轉成布爾值都為每行代碼的末尾最好都加上個分號最好給對象都添加上構造函數在使用和盡量小心。翻譯介紹翻譯標題：45 Useful JavaScript Tips, Tricks and Best Practices 翻譯來源：http://modernweb.com/2013/12/23/45-useful-java...

Moxmi 2019-08-14 11:56 評論0 收藏0
翻譯：Javascript最佳搭檔：強大的join與split

摘要：不幸的是，這種方法在中失效，因為他們從中錯誤的去掉了第一個空成員。假設競走的比賽結果需要保存到數組中。目的就是將競賽者與他們的記錄時間交替的放在數組中。結論我希望我列出的這幾條應用足以說明與是最佳搭檔。原文地址：http://javascriptweblog.wordpress.com/2010/11/08/javascripts-dream-team-in-praise-of-sp...

IntMain 2019-08-21 12:27 評論0 收藏0