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();