javascript繼承的6種方法

javascript繼承的6種方法

1原型式繼承

簡介：對類式繼承的封裝，過渡對象至關於子類。

 

function inheritObject(o) {
  //聲明過渡函數對象
  function F() {}
  //過渡對象的原型繼承父類
  F.prototype = o;
  return new F();
}
//測試
var book = {
  name : "javascript",
  book : ['js','css']
};
var newbook = inheritObject(book);
newbook.name = "ajax";
newbook.book.push("Node");
var otherbook = inheritObject(book);
otherbook.name = "xml";
otherbook.book.push("React");
console.log(newbook.name);//ajax
console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
console.log(otherbook.name);//xml
console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
console.log(book.name);//javascript
console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

缺點：

和類式繼承同樣，父類對象的引用類型值被共用。

2.構造函數式繼承

function SuperClass(id) {
  this.book = ['javascript','html','css'];//引用類型共有屬性
  this.id = id;//值類型公有屬性
}
//父類聲明原型方法
SuperClass.prototype.showBooks = function() {
  console.log(this.books);
}
//聲明子類
function SubClass(id) {
  //繼承父類
  SuperClass.call(this,id);
}
//測試
var ins1 = new SubClass(1);
var ins2 = new SubClass(2);
ins1.book.push("Node");
console.log(ins1.id);//1
console.log(ins1.book);//['javascript', 'html', 'css', 'Node']
console.log(ins2.id);//2
console.log(ins2.book);//['javascript', 'html', 'css']

ins1.showBooks();//TypeError: ins1.showBooks is not a function

3.組合式繼承

function SuperClass(name) {
  this.name = name;
  this.book = ['javascript','html','css'];
}
SuperClass.prototype.getName = function () {
  console.log(this.name);
};
function SubClass(name,time) {
  //構造函數式繼承，繼承父類name屬性
  SuperClass.call(this,name);
  this.time = time;
}
//類式繼承，子類原型繼承
SubClass.prototype = new SuperClass();
//子類原型方法
SubClass.prototype.getTime = function () {
  console.log(this.time);
};
//測試
var ins1 = new SubClass('Node',2016);
ins1.book.push("Node");
console.log(ins1.book);
ins1.getName();
ins1.getTime();

var ins2 = new SubClass('React',2015);
console.log(ins2.book);
ins2.getName();
ins2.getTime();

4.原型式繼承

function inheritObject(o) {
  //聲明過渡函數對象
  function F() {}
  //過渡對象的原型繼承父類
  F.prototype = o;
  return new F();
}
//測試
var book = {
  name : "javascript",
  book : ['js','css']
};
var newbook = inheritObject(book);
newbook.name = "ajax";
newbook.book.push("Node");
var otherbook = inheritObject(book);
otherbook.name = "xml";
otherbook.book.push("React");
console.log(newbook.name);//ajax
console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
console.log(otherbook.name);//xml
console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
console.log(book.name);//javascript
console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

5.寄生式繼承


function inheritObject(o) {
  //聲明過渡函數對象
  function F() {}
  //過渡對象的原型繼承父類
  F.prototype = o;
  return new F();
}
//聲明基對象
var book = {
  name : "javascript",
  book : ['js','css']
};
function createBook(obj) {
  //經過原型繼承方式建立新對象
  var o = new inheritObject(obj);
  //拓展新對象
  o.getName = function() {
    console.log(name);
  }
  //返回拓展後的新對象
  return o;
}

var newbook = createBook(book);
newbook.name = "ajax";
newbook.book.push("Node");
var otherbook = createBook(book);
otherbook.name = "xml";
otherbook.book.push("React");
console.log(newbook.name);//ajax
console.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]
console.log(otherbook.name);//xml
console.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]
console.log(book.name);//javascript
console.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

6.寄生組合式繼承

function inheritObject(o) {
  //聲明過渡函數對象
  function F() {}
  //過渡對象的原型繼承父類
  F.prototype = o;
  return new F();
}
//寄生式繼承 繼承原型
function inheritPrototype(subClass,superClass) {
  //複製一份父類的原型副本保存在變量中
  var p = inheritObject(superClass.prototype);
  //修正由於重寫子類原型致使子類的constructor屬性被修改
  p.constructor = subClass;
  //設置子類的原型
  subClass.prototype = p;
}
function SuperClass(name) {
  this.name = name;
  this.colors = ["red","blue","green"];
}
//定義父類原型方法
SuperClass.prototype.getName = function() {
  console.log(this.name);
}
function SubClass(name,time) {
  SuperClass.call(this,name);
  this.time = time;
}
//寄生式繼承父類原型
inheritPrototype(SubClass,SuperClass);
//子類新增原型方法
SubClass.prototype.getTime = function() {
  console.log(this.time);
}
//測試
var ins1 = new SubClass("js",2014);
var ins2 = new SubClass("css",2015);
ins1.colors.push("black");
console.log(ins1.colors);
console.log(ins2.colors);
ins2.getName();
ins2.getTime();