快捷導(dǎo)航

JS中的繼承操作實(shí)例總結(jié)

更新時(shí)間：2020年06月06日 10:27:58 作者：Jacano

這篇文章主要介紹了JS中的繼承操作,結(jié)合實(shí)例形式總結(jié)分析了JS中的原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、class繼承等常見(jiàn)繼承操作實(shí)現(xiàn)技巧,需要的朋友可以參考下

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ò)。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: