溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

詳解JS中的繼承操作

發(fā)布時(shí)間：2020-07-18 10:14:34 來(lái)源：億速云 閱讀：169 作者：小豬 欄目：web開(kāi)發(fā)

這篇文章主要詳解JS中的繼承操作，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

本文實(shí)例講述了JS中的繼承操作。分享給大家供大家參考，具體如下：

1.原型鏈繼承

function SuperType() {
  this.property = true; 
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  ths.subproperty = false;
}
SubType.prototype = new SuperType();   // 實(shí)現(xiàn)繼承
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}
var instance = new SubType();
console.log(instance.getSuperValue());   // true

原理:讓SuperType的實(shí)例成為子類的原型對(duì)象，子類的實(shí)例擁有了父類的屬性和方法。但也有弊端，如果父類的屬性是引用類型，這將導(dǎo)致共享的屬性被改變的時(shí)候，全部的屬性將被改變，我們一下代碼。

function SuperType() {
  this.property = [1,2,3]; 
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  ths.subproperty = false;
}
SubType.prototype = new SuperType();   // 實(shí)現(xiàn)繼承
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}
var instance1 = new SubType();
var instance2 = new SubType();
instance1.property.push(4);
console.log(instance1.property);   // [1,2,3,4]
console.log(instance2.property);   // [1,2,3,4]

我們修改一處的實(shí)例屬性，兩個(gè)實(shí)例的屬性都會(huì)被修改，因?yàn)檫@個(gè)屬性是共享的，這也是原型鏈繼承的缺點(diǎn)。

2.構(gòu)造函數(shù)繼承

function SuperType(name) {
  this.name = name;
  this.numbers = [1,2,3];
}
function SubType() {
  SuperType.call(this,"Nicholas");
  this.age = 29;
}

var instance1 = new SubType();
var instance2 = new SubType();
instance1.property.push(4);
console.log(instance1.name);    // Nicholas
console.log(instance1.age);     // 29
console.log(instance1.numbers);   // [1,2,3,4]
console.log(instance2.numbers); // [1,2,3]

在子類中調(diào)用父類的構(gòu)造函數(shù)，每次實(shí)例化時(shí)都會(huì)新建父類的屬性放在新實(shí)例中，因此每個(gè)實(shí)例中的屬性都是不一樣的，改變一個(gè)實(shí)例的值不會(huì)造成另一個(gè)實(shí)例的值改變。這個(gè)繼承方式的缺點(diǎn)是方法的定義不能復(fù)用。

3.組合繼承

這個(gè)方法將原型鏈繼承和構(gòu)造函數(shù)繼承結(jié)合到一起，融合了他們各自的優(yōu)點(diǎn)。

function SuperType(name) {
  this.name = name;
  this.colors = ["red","blue","green"]
}
SuperType.prototype.sayName = function() {
  console.log(this.name);
}
function SubType(name,age) {
  SuperType.call(this,name);
  this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  console.log(this.age);
}

var instance1 = new SubType("Nicholas", 29);
var instance2 =new SubType("Greg", 27);
instance1.colors.push("black");
console.log(instance1.colors);    // red,blue,green,black
console.log(instance2.colors);    // red,blue,green
instance1.sayName();         // Nicholas
instance2.sayName();         // Greg
instance1.sayAge();           // 29
instance2.sayAge();           // 27

4.class繼承

ES6中可以通過(guò)class創(chuàng)建對(duì)象，通過(guò)關(guān)鍵字extends繼承。

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }
}

class ColorPoint extends Point {
 constructor(x, y, color) {
  this.color = color; // ReferenceError
  super(x, y);
  this.color = color; // 正確
 }
}

在ES6的繼承中，子類一定要重寫父類的構(gòu)造函授的方法，否則會(huì)報(bào)錯(cuò)。

看完上述內(nèi)容，是不是對(duì)詳解JS中的繼承操作有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手