继承有类式继承，构造函数继承人，组合继承

Posted 2020-10-09 蓝海域的春天

1：类式继承：

// 声明父类

function Parent(){ this.parentValue = true; }

// 为父类添加共有方法

Parent.prototype.getParentValue = function(){ return this.parentValue; }

// 声明子类

function Child(){ this.childValue = false; }

// 继承父类

Child.prototype = new Parent();

// 为子类添加共有方法

Child.prototype.getChildValue = function(){ return this.childValue; }

类的原型对象的作用是为类的原型添加共有属性和方法，

但类必须通过原型prototype来访问这些属性和方法。

当实例化一个父类时，

新建对象复制了父类构造函数内的属性和方法，并且将原型__proto__指向了父类的原型对象，

这样就拥有了父类原型对象上的属性和方法，新建对象可以直接访问父类原型对象的属性和方法，

接着将这个新建的对象赋值给子类的原型，那么子类的原型就可以访问父类的原型属性和方法。

将这个对象赋值给子类的原型，那么这个子类就可以访问父类原型上的属性和方法，并且可以访问从父类构造函数中复制的属性和方法。我们可以来测试一下：

 var child = new Child();

console.log(child.getParentValue()); // true

console.log(child.getChildValue()); // false

console.log(child instanceof Parent); // true

console.log(child instanceof Child); // true

console.log(Child instanceof Parent); // false

 

但这种继承方式有2个缺点：

• 由于子类是通过其原型prototype对父类实例化，如果父类中的共有属性是引用类型，会被所有实例所共享，一个子类的实例修改了该属性会直接影响到所有实例。例如：

  function Parent(){
  this.values = [‘A‘,‘B‘,‘C‘];
  }
  function Child(){}
  Child.prototype = new Parent();
  var child1 = new Child();
  var child2 = new Child();
  console.log(child2.values);    // ["A","B","C"]
  child1.values.push(‘D‘);
  console.log(child2.values);    // ["A","B","C","D"]

• 创建父类实例时，是无法向父类传递参数的，也就是无法对父类构造函数内的属性进行初始化。例如这种错误的继承方式：

  function Parent(name){
  this.name = name;
  }
  function Child(){}
  Child.prototype = new Parent(‘name‘);    // 错误

构造函数继承

// 声明父类
function Parent(name){
    this.name = name;
    this.values = [‘A‘,‘B‘,‘C‘];
}
Parent.prototype.showName = function(){
    console.log(this.name);
}
// 声明子类
function Child(name){
    Parent.call(this,name);
}
var child1 = new Child(‘one‘);
var child2 = new Child(‘two‘);
child1.values.push(‘D‘);
console.log(child1.name);   // one
console.log(child1.values); // ["A","B","C","D"]
console.log(child2.name);   // two
console.log(child2.values); // ["A","B","C"]
child1.showName();          // TypeError

语句Parent.call(this,name);是构造函数继承的精华，call方法可以更改函数的作用环境，在子类中执行该方法相当于将子类的变量在父类中执行一遍，此时父类方法中的this属性指的是子类中的this，由于父类中是给this绑定属性的，所以子类也就继承了父类的属性和方法。构造函数继承并没有涉及原型prototype，所以父类的原型方法不会被子类继承，子类的每个实例会单独拥有一份父类的属性方法而不能共用，如果想被子类继承就必须放在构造函数中，要实现这样的效果可以采用组合继承的方式。

组合继承

类式继承是通过子类的原型prototype对父类实例化来实现的，构造函数继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的，而组合继承则同时做到这两点。

// 声明父类
function Parent(name){
    this.name = name;
    this.values = [‘A‘,‘B‘,‘C‘];
}
Parent.prototype.getName = function(){
    console.log(this.name);
}
// 声明子类
function Child(name,id){
    Parent.call(this, name);
    this.id = id;
}
Child.prototype = new Parent();
Child.prototype.getId = function(){
    console.log(this.id);
}

var child1 = new Child(‘child1‘, 1);
child1.values.push(‘D‘);
console.log(child1.values); // ["A", "B", "C", "D"]
child1.getName();           // child1
child1.getId();             // 1

var child2 = new Child(‘child2‘, 2);
console.log(child2.values);    // ["A", "B", "C"]
child2.getName();              // child2
child2.getId();                // 2

子类的实例中更改父类继承下来的引用类型属性，不会影响到其它实例，并且子类实例化过程中又能将参数传递到父类的构造函数中。

多态

多态就是同一个方法多种调用方式，javascript可以通过对传入的参数列表arguments进行判断来实现多种调用方式。例如：

function Add(){
    // 无参数
    function zero(){
        return 0;
    }
    // 一个参数
    function one(num){
        return num;
    }
    // 两个参数
    function two(num1, num2){
        return num1 + num2;
    }

    this.add = function(){
        // 获取参数列表及参数个数
        var arg = arguments,
            len = arg.length;
        switch(len){
            case 0:
                return zero();
            case 1:
                return one(arg[0]);
            case 2:
                return two(arg[0], arg[1]);
        }
    }
}

var A = new Add();
console.log(A.add());       // 0
console.log(A.add(1));      // 1
console.log(A.add(1,2));    // 3

当调用add进行运算时，会根据参数列表的不同做相应的运算，这就是JavaScript的多态实现方式。

总结

面向对象设计方法的应用解决了传统结构化开发方法中客观世界描述工具与软件结构的不一致性问题，缩短了开发周期，解决了从分析和设计到软件模块结构之间多次转换映射的繁杂过程，是一种高效率的软件开发方式，特别是在多人协作开发的情况下，可以提高代码的可复用性和维护性，使开发更有效率。