JavaScript繼承基礎強化筆記分享

出於安全考慮，本地類別和宿主類別不能繼承，其他都可以繼承。 ECMAScript並沒有嚴格的定義抽象類別，但是存在一些不允許使用的類別。子類別將繼承超類別的所有屬性和方法，包括建構函式及方法的實作。記住，所有屬性和方法都是公用的，因此子類別可直接存取這些方法。子類別還可 新增 超類別中沒有的新屬性和方法，也可以 覆寫 超類別的屬性和方法。

JavaScript 中的繼承機制並不是明確規定的，而是透過 模仿 實現的。這意味著所有的繼承細節並非完全由解釋程序處理。

物件冒充

• #說白了就是先寫一個超類別A的建構方法。再寫一個類別B的建構方法；

• 然後在B的方法中引用A的建構方法；

• 使用之後再刪除ClassA的引用。

• 定義子類別屬性（所有的子類別新屬性在刪除引用後定義）

<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>

物件冒充可以實作多重繼承

一個類別可以繼承多個超類別。
ClassX 和 ClassY，ClassZ 想繼承這兩個類別。

如果存在兩個類別 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優先權。
因為它從後面的類別繼承。

<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>

---

call()方法

#call() 方法是與經典的物件冒充方法最相似。
一個參數用來當作 this 的物件。其他參數都直接傳遞給函數本身。

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

---

apply() 方法

#兩個參數，用作this 的物件和要傳遞給函數的參數的陣列。
apply第二個參數只能是陣列

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  // 引用ClassA构造方法<br/>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br/>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br/>  // ClassA.apply(this, arguments);<br/>  // ClassB 自己的属性<br/>  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

---

原型鏈（prototype chaining）

繼承這個形式在ECMAScript 中原本是用於原型鏈的。

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br/>  //要求为空，全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br/>ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性，需要出现在继承之后ClassB.prototype.name = "";<br/>ClassB.prototype.sayName = function () {<br/>  alert(this.name);<br/>};</span>

關於 instanceof 運算

在原型鏈中，instanceof 運算子的運作方式也很獨特。對於 ClassB 的所有實例，instanceof 為 ClassA 和 ClassB 都會傳回 true。

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>

---

混合方式

<span style="font-size: 14px;">// ClassA的构造方法,只写属性，不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA，继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>

• ClassB 建構函式中，用物件冒充繼承ClassA 類別的sColor屬性。

• 在第二行反白顯示的程式碼中，用原型鏈繼承 ClassA 類別的方法。

JavaScript基礎強化筆記-繼承

#出於安全性考慮，本地類別和宿主類別不能繼承，其他都可以繼承。

ECMAScript並沒有嚴格的定義抽象類，但是存在一些不允許使用的類別。

子類別將繼承超類別的所有屬性和方法，包括建構函式及方法的實作。記住，所有屬性和方法都是公用的，因此子類別可直接存取這些方法。子類別還可 新增 超類別中沒有的新屬性和方法，也可以 覆寫 超類別的屬性和方法。

JavaScript 中的繼承機制並不是明確規定的，而是透過 模仿 實現的。這意味著所有的繼承細節並非完全由解釋程序處理。

---

物件冒充

• #說白了就是先寫一個超類別A的建構方法。再寫一個類別B的建構方法；

• 然後在B的方法中引用A的建構方法；

• 使用之後再刪除ClassA的引用。

• 定義子類別屬性（所有的子類別新屬性在刪除引用後定義）

<span style="font-size: 14px;">// 超类ClassA的构造方法function ClassA(sColor) {<br/>    this.color = sColor;    this.sayColor = function () {、<br/>        alert(this.color);<br/>    };<br/>}// 子类ClassB的构造方法function ClassB(sColor, sName) {<br/>    // 引用ClassA的构造方法<br/>    this.newMethod = ClassA;    // 使用ClassA的构造方法够照ClassB<br/>    this.newMethod(sColor);    // 删除对ClassA的引用<br/>    delete this.newMethod;    /* 所有的子类新属性在删除引用后定义 */<br/>    // 子类属性<br/>    this.name = sName;    this.sayName = function () {<br/>        alert(this.name);<br/>    };<br/>}</span>

物件冒充可以實作多重繼承

一個類別可以繼承多個超類別。
ClassX 和 ClassY，ClassZ 想繼承這兩個類別。

如果存在兩個類別 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優先權。
因為它從後面的類別繼承。

<span style="font-size: 14px;">function ClassZ() {<br/>  // 继承ClassX<br/>  this.newMethod = ClassX;  this.newMethod();  delete this.newMethod;  //继承ClassY<br/>  this.newMethod = ClassY;  this.newMethod();  delete this.newMethod;<br/>}</span>

---

call()方法

call() 方法是与经典的对象冒充方法最相似。
一个参数用作 this 的对象。其他参数都直接传递给函数自身。

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br/>  /*<br/>  将classB付给ClassA中的this<br/>  这时classA中的this实际指向是ClassB<br/>  */<br/>  ClassA.call(this, sColor);  this.name = sName;  this.sayName = function () {<br/>    alert(this.name);<br/>  };<br/>}</span>

---

apply() 方法

两个参数，用作 this 的对象和要传递给函数的参数的数组。
apply第二个参数只能是数组

<span style="font-size: 14px;">function ClassB(sColor, sName) {<br>  // 引用ClassA构造方法<br>  ClassA.apply(this, new Array(sColor));  // 也可以使用arguments<br>  // 只有超类中的参数顺序与子类中的参数顺序完全一致时才可以传递参数对象<br>  // ClassA.apply(this, arguments);<br>  // ClassB 自己的属性<br>  this.name = sName;  this.sayName = function () {<br>    alert(this.name);<br>  };<br>}</span>

---

原型链（prototype chaining）

继承这种形式在 ECMAScript 中原本是用于 原型链 的。

<span style="font-size: 14px;">// ClassA的构造方法function ClassA() {<br>  //要求为空，全部写在prototype上}// ClassA的属性ClassA.prototype.color = "blue";<br>ClassA.prototype.sayColor = function () {<br>  alert(this.color);<br>};// ClassB的构造方法function ClassB() {}// 继承ClassA的属性ClassB.prototype = new ClassA();// ClassB自己的属性，需要出现在继承之后ClassB.prototype.name = "";<br>ClassB.prototype.sayName = function () {<br>  alert(this.name);<br>};</span>

关于 instanceof 运算

在原型链中，instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例，instanceof 为 ClassA 和 ClassB 都返回 true。

<span style="font-size: 14px;">var objB = new ClassB();<br/>alert(objB instanceof ClassA);  //输出 "true"alert(objB instanceof ClassB);  //输出 "true"</span>

---

混合方式

<span style="font-size: 14px;">// ClassA的构造方法,只写属性，不写函数function ClassA(sColor) {<br/>  this.color = sColor;<br/>}// 使用原型给ClassA赋予函数ClassA.prototype.sayColor = function () {<br/>  alert(this.color);<br/>};// ClassB的构造方法function ClassB(sColor, sName) {<br/>  // 先调用ClassA，继承ClassA的属性<br/>  ClassA.call(this, sColor);  this.name = sName;<br/>}// 再通过原型链继承ClassA的函数ClassB.prototype = new ClassA();// 通过原型链定义自己的函数ClassB.prototype.sayName = function () {<br/>    alert(this.name);<br/>};</span>

• ClassB 构造函数中，用对象冒充继承 ClassA 类的 sColor 属性。

• 在第二行突出显示的代码中，用原型链继承 ClassA 类的方法。

相关推荐：

javascript继承体系详解

JavaScript继承之原型式继承、寄生式继承、寄生组合式继承用法实例详解

javascript继承方式详解

以上是JavaScript繼承基礎強化筆記分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！