面向对象 ( OO ) 的程序设计——继承

时间:2023-03-09 12:49:44
面向对象 ( OO ) 的程序设计——继承

本文地址:http://www.cnblogs.com/veinyin/p/7608282.html 

仅支持实现继承,且主要依靠原型链来实现,不过一般会混合构造函数一起实现继承

1 原型链

    • 继承使用原型链进行传递,类似指针一层层向上指向对应原型,构成链状

    • 在使用原型链近似实现继承时,实例中的所有属性和方法都会被继承

       // 第一个类型
      function Func1(){
      this.property = true;
      }
      // 第一个类型的方法
      Func1.prototype.getFunc1Value = function(){
      return this.property;
      }; // 第二个类型
      function Func2(){
      this.func2property = false;
      } // 第一个类型的实例赋给 Func2.prototype,实现继承 ( 替换原型 )
      Func2.prototype = new Func1(); // 为第二个类型增加了新方法
      Func2.prototype.getFunc2Value = function(){
      return this.func2property;
      }; // 为第二个对象创建实例
      var out = new Func2(); // 利用该实例访问第一个对象方法、属性及第二个对象的方法、属性
      console.log(out.getFunc1Value());
      console.log(out.property);
      console.log(out.getFunc2Value());
      console.log(out.func2property);

      继承实质为将父对象的替换为子对象的原型

      添加新方法或重写,均要放在替换原型语句后面重写是覆盖掉,原先的还在,子对象实例访问到的是重写的,父对象实例访问的是原先的方法

    • A 是 B 的实例

      A instanceof B;         //返回 true 或 false
    • A 是原型

      A.prototype.isProptotypeOf(instance);           //返回 true 或 false

2 借用构造函数

使用 call() 或 apply() 方法借用超类型 ( 父对象 ) 的构造函数

 // 构造函数1
function Func1(){
this.colors = ["red","blue","green"];
} // 构造函数2
function Func2(){
// 借用构造函数1
Func1.call(this);
} // 创建实例
var out2 = new Func2();
out2.colors.push("black"); // 为构造函数2的实例增加一个值
var out1 = new Func1(); // 输出可知每次新建实例均借用构造函数1,值不变
console.log(out1.colors);
console.log(out2.colors);
}

效果如下

面向对象 ( OO ) 的程序设计——继承

3 传递参数

借用构造函数可以在子类型构造函数中向超类型构造函数传递参数

 // 构造函数1
function Func1(name){
this.name = name;
} // 构造函数2
function Func2(){
// 借用构造函数1
Func1.call(this,"Cherry");
this.age = 21;
} // 创建实例
var out2 = new Func2(); console.log(out2.name);
console.log(out2.age);
面向对象 ( OO ) 的程序设计——继承

4 组合继承

将原型链和借用构造函数技术组合到一块,发挥二者之长。实质为使用原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承

组合继承是最常用的继承方法

5 寄生组合式继承

尽管组合继承已经十分好用了,但是由于会两次调用父类型的构造函数,导致效率较低,故提出了寄生组合式继承,仅调用一次父类型的构造函数,提高效率,是实现基于继承的最有效方式

示例:

 function inheritPrototype(subType, superType) {
var prototype = superType.prototype;
prototype.constructor = subType;
subType.prototype = prototype;
} function SuperType(name) {
this.name = name;
colors = ["red", "blue", "green"];
} SuperType.prototype.sayName = function () {
var out1 = document.getElementById("out1");
var p = document.createElement("p");
p.innerHTML = this.name;
out1.appendChild(p);
}; function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
} inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function () {
var out1 = document.getElementById("out1");
var p = document.createElement("p");
p.innerHTML = this.age;
out1.appendChild(p);
}; var out1 = new SuperType("Bob");
var out2 = new SubType("Cherry",21); console.log(out1);
console.log(out2);
out1.sayName();
out1.sayAge();
out2.sayName();
out2.sayAge();

效果如下,其中父类型构造函数没有 age ,故输出为 undefined

面向对象 ( OO ) 的程序设计——继承

END~~~≥ω≤