JS物件繼承使用案例詳解

這次帶給大家JS物件繼承使用案例詳解，JS物件繼承使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

修改非自己擁有的物件是解決某些問題很好的方案。在一種「無公害」的狀態下，它通常不會發生；發生的原因可能是開發者遇到了一個問題，然而又透過修改物件解決了這個問題。儘管如此，解決一個已知問題的方案總是不只一種的。大多是電腦科學知識已經在靜態型別語言環境中演化出了解決難題方案，如Java。可能有一些方法，所謂的設計模式，不直接修改這些物件而是擴展這些物件。

在JS之外，最受歡迎的物件擴充的形式是繼承。如果一種類型的物件已經做到了你想要的大多數工作，那麼繼承自它，然後再新增一些功能。在JS中有兩種基本的形式：基於物件的繼承和基於類型的繼承。

在JS中，繼承仍然有一些很大的限制。首先，不能從DOM或BOM物件繼承。其次，由於陣列索引和length屬性之間錯綜複雜的關係，繼承自Array是不能正常運作的。

基於物件的繼承

在基於物件的繼承中，也常叫做原型繼承，一個物件繼承另外一個物件是不需要呼叫建構函式的。 ES5的Object.create()方法是實現這種繼承的最簡單的方式。例如：

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"

這個範例建立了一個新物件myPerson，它繼承自person。這種繼承方式就如同myPerson的原型設定為person，從此myPerson可以存取person的屬性和方法，而不需要同名變數在新的物件上再重新定義一遍。例如，重新定義myPerson.sayName()會自動切斷對person.sayName()的存取：

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"

Object.create()方法可以指定第二個參數，該參數物件中的屬性和方法將新增到新的物件中。例如：

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"

這個範例所建立的myPerson物件擁有自己的name屬性值，所以呼叫sayName()顯示的是「Greg」而不是「Nicholas」。

一旦以這種方式創建了一個新對象，該新對象完全可以隨意修改。畢竟，你是該物件的擁有者，在自己的專案中你可以任意新增方法，覆蓋已存在方法，甚至是刪除方法（或阻止它們的存取）。

基於類型的繼承

基於類型的繼承和基於物件的繼承工作方式是差不多的，它從一個已存在的物件繼承，這裡的繼承是依賴原型的。因此，基於類型的繼承是透過建構函數實現的，而非物件。這意味著，需要存取被繼承物件的建構子。比起JS中原生的類型，在開發者定義了建構子的情況下，基於型別的繼承是最適合的。同時，基於類型的繼承一般需要兩步驟：首先，原型繼承；然後，構造器繼承。建構器繼承是呼叫超類別的建構子時傳入新建的物件作為其this的值。例如：

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();

這段程式碼裡，Author類型繼承自Person。屬性name其實是由Person類別管理的，所以Person.call(this, name)允許Person建構子繼續定義該屬性。 Person建構器是在this上執行的，this指向Author對象，所以最後的name定義在這個Author物件上。

對比基於物件的繼承，基於類型的繼承在建立新物件時更加靈活。定義了一個類型可以讓你建立多個實例對象，所有的對像都是繼承自一個通用的超類別。新的類型應該明確定義需要使用的屬性和方法，它們與超類別中的應該完全不同。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

web開發中如何避免空比較

#為什麼web開發中需要避免使用全域變數

以上是JS物件繼承使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！