再来看一次JS继承

2017-07-31 本文已影响50人 7天苹果

原型链继承

理解原型链的概念

用一张图来理解原型链再合适不过了。

来自于网络

总结概括JS红宝书上对原型链的概念：每个函数都有一个prototype属性，它指向原型对象。每一个实例都有一个_ proto_ 属性，它指向该实例的原型对象。如果把一个实例的原型对象再次看作一个实例，它也就会有一个_ proto _属性，这个属性指向它的原型对象。

这样我们可以知道，JS原型链其实是靠_proto _属性来实现的。

实现继承

实现原型链继承有一种基本模式：

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();
alert(instance.getSuperValue());

上述代码的结构图

提醒：通过原型链实现继承时，不能使用对象字面量创建原型方法。这样会重写原型链。

确定原型和实例的关系

使用instanceof操作符。

alert(instance instanceof Object);   //true
alert(instance instanceof SuperType);   //true
alert(instance instanceof SubType);   //true

使用isPrototypeOf()方法

Object.prototype.isPrototypeOf(instance);  //true
SuperType.prototype.isPrototypeOf(instance);  //true
SubType.prototype.isPrototypeOf(instance);  //true

原型链的问题

对于引用类型值的原型，原型链继承的方法会导致实例共享引用类型的原型。所以属性定义最好在构造函数中而不是原型中。
在创建子类型的实例时，不能向超类型的构造函数中传递参数。

构造函数继承

实现方法

function SuperType(){
  this.colors = ["red","blue","green"];
}

function SubType(){
  //继承了SuperType
  SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);  //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors);  //"red,blue,green"

构造函数的问题

方法都在构造函数中定义，因此函数复用就无从谈起。

组合继承

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

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

SuperType.prototype.sayName = function() {
  alert(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(){
  alert(this.age);
}

var instance1 = new SubType("John",29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName();  //"John"
instance1.sayAge();  //29

var instance2 = new SubType("Greg",27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //Greg
instance2.sayAge();  //27

原型式继承

实例

var ob = {name:"小明",friends:['小明','小白']};

//原型式继承  参数o,引用类型值，实质就是一个内存地址
function object(o){
  function F(){}//创建一个构造函数F
  F.prototype = o;
  return new F();
}

var ob1 = object(ob);
ob1.name = "小小";
ob1.friends.push("小黑");

var ob2 = object(ob);
console.log(ob2.name);//小明
console.log(ob2.friends);//小明，小白，小黑

关系图

这种原型式继承，要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话，可以把它传递给object函数，然后再根据具体的需求对得到的对象加以修饰即可。

规范化

ECMAScript5通过新增Object.create()方法规范化了原型式继承。

var person = {
  name :"John",
  friends:["shelby","court","van"];
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("bob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "linda";
yetAnotherPerson.friends.push("lily");

alert(person.friends); //"shelby,court,van,bob,lily"

寄生式继承

与寄生构造函数和工厂模式类似，创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。

function createAnother(original){
    var clone = Object.create(original);    //通过调用函数创建一个新对象
    clone.sayHi = function(){               //以某种方式来增强这个对象
        alert("Hi");
    };
    
    return clone;                        //返回这个对象
}

var person = {
    name: "Bob",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

在上述例子中，createAnother函数接收了一个参数，也就是将要作为新对象基础的对象。

anotherPerson是基于person创建的一个新对象，新对象不仅具有person的所有属性和方法，还有自己的sayHi()方法。

寄生组合式继承

组合继承是js最常用的继承模式，组合继承最大的问题就是无论在什么情况下，都会调用两次构造函数：一次是在创建子类型原型时，另一次是在子类型构造函数内部。

组合继承的问题

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}

function SubType(name, age){
    SuperType.call(this, name);　　//第二次调用SuperType()
    
    this.age = age;
}
SubType.prototype = new SuperType();　　//第一次调用SuperType()
SubType.prototype.sayAge = function(){
    alert(this.age);
}

在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性： name和colors；他们都是SuperType的实例属性，只不过现在位于SubType的原型中。

当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors。

于是这两个属性就屏蔽了原型中的两个同名属性。

解决方案

寄生组合式继承就是为了解决这一问题。

通过借用构造函数来继承属性；
通过原型链来继承方法。

不必为了指定子类型的原型而调用超类型的构造函数

function inheritPrototype(subType, superType){
    var protoType = Object.create(superType.prototype);    //创建对象
    protoType.constructor = subType;                    //增强对象
    subType.prototype = protoType;                        //指定对象
}
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}

function SubType(name, age){
    SuperType.call(this, name);　　
    
    this.age = age;
}
inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function(){
    alert(this.age);
}

var instance = new SubType("Bob", 18);
instance.sayName();
instance.sayAge();

inheritPrototype函数接收两个参数：子类型构造函数和超类型构造函数。

创建超类型原型的副本。
为创建的副本添加constructor属性，弥补因重写原型而失去的默认的constructor属性
将新创建的对象（即副本）赋值给子类型的原型
这种方法只调用了一次SuperType构造函数，instanceof 和isPrototypeOf()也能正常使用。