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

Posted 2020-10-08 VeinYin

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

 

1 原型链

 

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

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

     1 // 第一个类型
     2 function Func1(){
     3     this.property = true;
     4 }   
     5 // 第一个类型的方法
     6 Func1.prototype.getFunc1Value = function(){
     7     return this.property;
     8 };
     9 
    10 // 第二个类型
    11 function Func2(){
    12     this.func2property = false;
    13 }
    14 
    15 // 第一个类型的实例赋给 Func2.prototype，实现继承 ( 替换原型 ) 
    16 Func2.prototype = new Func1();
    17 
    18 // 为第二个类型增加了新方法
    19 Func2.prototype.getFunc2Value = function(){
    20     return this.func2property;
    21 };
    22 
    23 // 为第二个对象创建实例
    24 var out = new Func2();
    25 
    26 // 利用该实例访问第一个对象方法、属性及第二个对象的方法、属性
    27 console.log(out.getFunc1Value());
    28 console.log(out.property);
    29 console.log(out.getFunc2Value());
    30 console.log(out.func2property);

     

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

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

 

• • A 是 B 的实例

    A instanceof B;         //返回 true 或 false

  • A 是原型

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

2 借用构造函数

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

 1 // 构造函数1
 2 function Func1(){
 3     this.colors = ["red","blue","green"];
 4 }
 5 
 6 // 构造函数2
 7 function Func2(){
 8     // 借用构造函数1
 9     Func1.call(this);
10 }
11 
12 // 创建实例
13 var out2 = new Func2();
14 out2.colors.push("black");  // 为构造函数2的实例增加一个值
15 var out1 = new Func1();
16 
17 // 输出可知每次新建实例均借用构造函数1，值不变
18 console.log(out1.colors);
19 console.log(out2.colors);
20 }

 

效果如下

3 传递参数

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

 1 // 构造函数1
 2 function Func1(name){
 3     this.name = name;
 4 }
 5 
 6 // 构造函数2
 7 function Func2(){
 8     // 借用构造函数1
 9     Func1.call(this,"Cherry");
10     this.age = 21;
11 }
12 
13 // 创建实例
14 var out2 = new Func2();
15 
16 console.log(out2.name);
17 console.log(out2.age);

 

4 组合继承

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

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

5 寄生组合式继承

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

示例：

 1 function inheritPrototype(subType, superType) {
 2     var prototype = superType.prototype;
 3     prototype.constructor = subType;
 4     subType.prototype = prototype;
 5 }
 6 
 7 function SuperType(name) {
 8     this.name = name;
 9     colors = ["red", "blue", "green"];
10 }
11 
12 SuperType.prototype.sayName = function () {
13     var out1 = document.getElementById("out1");
14     var p = document.createElement("p");
15     p.innerhtml = this.name;
16     out1.appendChild(p);
17 };
18 
19 function SubType(name, age) {
20     SuperType.call(this, name);
21     this.age = age;
22 }
23 
24 inheritPrototype(SubType, SuperType);
25 
26 SubType.prototype.sayAge = function () {
27     var out1 = document.getElementById("out1");
28     var p = document.createElement("p");
29     p.innerHTML = this.age;
30     out1.appendChild(p);
31 };
32 
33 var out1 = new SuperType("Bob");
34 var out2 = new SubType("Cherry",21);
35 
36 console.log(out1);
37 console.log(out2);
38 out1.sayName();
39 out1.sayAge();
40 out2.sayName();
41 out2.sayAge();

 

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

END~~~≥ω≤