JavaScript之继承

1.原型链

让一个引用类型继承另一个引用类型的属性和方法。

function SuperType(){
  this.property = true;
}

SuperType.prototype.getSuperValue = function(){
  return this.property;
}

function SubType(){
  this.Subproperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
  return this.Subproperty;
}

var instance = new SubType();
console.log(instance.getSuperValue());

缺点:

  • 通过原型链实现继承时,不能使用对象字面量创建原型方法,因为这样做会重写原型链。

例子:

function SuperType(){
  this.property = true;
}

SuperType.prototype.getSuperValue = function(){
  return this.property;
}

function SubType(){
  this.Subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
//实用字面量添加新方法会导致上一行无效
SubType.prototype={
  getSubValue:function(){
  return this.Subproperty;
  }
}
var instance = new SubType();
console.log(instance.getSuperValue());//error
  • 包含引用类型值的原型会被所用实例共享。在通过原型来实现继承时原型实际上会变成另一个类型的实例。
function Super(){
  this.colors = ["red","pink","blue"];
}

function Sub(){
}

Sub.prototype = new Super();

var instance1 = new Sub();
instance1.colors.push("white");
console.log(instance1.colors);//["red", "pink", "blue", "white"]

var instance2 = new Sub();
console.log(instance2.colors);//["red", "pink", "blue", "white"]

2.借用构造函数

  • 在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。
function Super(){
  this.colors = ["red","pink","blue"];
}

function Sub(){
  Super.call(this);
}

var instance1 = new Sub();
instance1.colors.push("white");
console.log(instance1.colors); //["red", "pink", "blue", "white"]

var instance2 = new Sub();
console.log(instance2.colors);  //["red", "pink", "blue"]

通过使用call()方法,我们实际上是在新创建的Sub实例的环境下调用了Super构造函数。这样,就会在新Sub对象上执行Super函数中定义的所有对象初始化代码。结果Sub的每个实例就具有自己的colors属性的副本。

  • 传递参数
function Super(name){
  this.name = name;
}

function Sub(){
  Super.call(this,"Tom");
  this.age = 20;
}

var instance = new Sub();
console.log(instance.name);  //Tom
console.log(instance.age);   //20

缺点:

方法都在构造函数中定义,因此函数复用就不能实现。

3.组合继承

指的是将原型链和借用构造函数的技术组合到一起,从而发挥二者之长的一种继承模式。思路是使用原型链实现对原型属性和方法的继承,而借用构造函数来实现对实例属性的继承。

function Super(name){
  this.name = name;
  this.colors = ["red","pink","blue"];
}

Super.prototype.sayName = function(){
  console.log(this.name);
}

function Sub(name,age){
  Super.call(this,name);
  this.age = age;
}

Sub.prototype = new Super();
Sub.prototype.constructor = Sub;
Sub.prototype.sayAge = function(){
  console.log(this.age);
}

var instance1 = new Sub("Tom",20);
instance1.colors.push("white")
console.log(instance1.colors);  //["red", "pink", "blue", "white"]
instance1.sayName();  //"Tom"
instance1.sayAge();  //20

var instance2 = new Sub("Grey",22);
console.log(instance2.colors);  //["red", "pink", "blue"]
instance2.sayName();  //"Grey"
instance2.sayAge();  //22

4.原型式继承

借助原型可以基于以有的对象创建新对象,同时还不必因此创建自定义类型。

var person = {
  name:'Tom',
  hobby:['readBook','swimming','running']
}

var anotherPerson = Object.create(person);
anotherPerson.name = 'Marry';
anotherPerson.hobby.push('play-games');

var yetPerson = Object.create(person,{
  name:{
    value:'Linda'
  }
});
yetPerson.hobby.push('sleep');

console.log(person.hobby);   //["readBook", "swimming", "running", "play-games", "sleep"]

Object.create()方法的第二个参数的格式是json格式:每个属性都是通过自己的描述定义的。以这种方式指定的任何属性都回覆盖原型对象上的同名属性。

5.寄生式继承

function createAnother(original){
  var clone = Object(original);
  clone.sayHi = function(){
    console.log('hi');
  }
  return clone;
}

var person = {
  name:'Tom',
  hobby:['readBook','swimming','running']
}

var anotherPerson = createAnother(person);
console.log(anotherPerson.name);   //'Tom'
anotherPerson.sayHi();  //'hi'

缺点:

使用寄生式继承来为对象添加函数,不能做到函数复用。

你可能感兴趣的:(JavaScript之继承)