《JavaScript高级程序设计（第3版）》学习笔记23：chapter_6 - 3 继承之借用构造函数、组合、原型式、寄生式和寄生组合式继承

本文链接：https://blog.csdn.net/weixin_44582681/article/details/100768416
这是第23篇笔记！
让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <script>
    
	// 一，借用构造函数
    /*
    借用构造函数（伪造对象或者经典继承） --> 在子类型构造函数的内部调用超类型构造函数

    
    */    
    function SuperType(name){
        this.name = name;

    }    
    function SubType(){
        SuperType.call(this, 'Kai');
        this.age = 29;
    // 1, 为了避免构造函数重写子类型的属性，应该在调用超类型构造函数后，再添加应该在子类型中定义的属性
    // 2, 在SubType构造函数内部调用SuperType构造函数时，实际上是为SubType的实例设置了name属性
    }
    
    var instance = new SubType();
    console.log(instance.name);
    console.log(instance.age);

    // 很少单独使用！！！ --> 函数复用问题
        
       

     // 二，组合继承
	
	/*
    组合继承（伪经典继承）：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
    
    
    */    
    function SuperType(name){
        this.name = name;
        this.colors = ['black', 'red', 'orange'];

    }    

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


    function SubType(name, age){
        // 继承属性
        SuperType.call(this, name);
        this.age = age;
   
    }
   // 继承方法
    SubType.prototype = new SuperType();

    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }

    console.dir(SuperType);
    console.dir(SubType);

    var instance1 = new SubType('kai', 32);
    instance1.colors.push('green');
    console.log(instance1.colors);  // ["black", "red", "orange", "green"]
    instance1.sayAge();
    instance1.sayName();

    var instance2 = new SubType('lice', 23);
    instance2.colors.push('blue');  
    console.log(instance2.colors);  // ["black", "red", "orange", "blue"]
        
        
    // 【注意】最常用的继承模式！！！




	// 三，原型式继承
// 1,
    // 原型式继承: 在object函数内部，先创建了一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例
    // 本质上：object()对传入其中的对象执行了一次“浅复制”！！
    // function object(o){
    //     function F(){}
    //     F.prototype = o;
    //     return new F();
    // }  // 共享
        
    // var person = {
    //     name:'Kai',
    //     friends:['lili', 'jiji', 'liweri']
    // };
    
    // 原型式继承：必须有一个对象（person）可以作为另一个对象(anotherPerson, yetAnotherPerson)的基础
    // 如本次：person对象传入到object函数中，然后该函数返回一个新对象（其将person作为原型）
    // var anotherPerson = object(person);
    // anotherPerson.name = 'greg';
    // anotherPerson.friends.push('kaiaki');

    // var yetAnotherPerson = object(person);
    // yetAnotherPerson.name = 'sisi';
    // yetAnotherPerson.friends.push('aiai');

    // console.log(person.friends);  // ["lili", "jiji", "liweri", "kaiaki", "aiai"]
    
    // 2, Object.create()：2个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象
    //                     
    // 该方法规范化了原型式继承

    // (1) 传入一个参数  --> 与上边的object()构造函数的行为相同
    // var person = {
    //     name:'Kai',
    //     friends:['lili', 'jiji', 'liweri']
    // };


    // var anotherPerson = Object.create(person);
    // anotherPerson.name = 'greg';
    // anotherPerson.friends.push('kaiaki');
        
    // var yetAnotherPerson = Object.create(person);
    // yetAnotherPerson.name = 'sisi';
    // yetAnotherPerson.friends.push('aiai');
    // console.log(person.friends);   
        
 // (2) 传入两个参数  --> 第二个参数跟Object.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的
    var person = {
            name:'Kai',
            friends:['lili', 'jiji', 'liweri']
        };

    var anotherPerson = Object.create(person, {
        name:{
            value:'Lai'
        }
    });

    console.log(anotherPerson.name);

    // 【总结】 仅仅想要让一个对象与另一个对象保持类似的情况，使用“原型式继承”完全足矣！！





	// 四，寄生式继承
// 原型式继承的函数写法
    function object(o){  
        function F(){}
        F.prototype = o;
        return new F();
    }  // 共享

    // 寄生式继承: 创建一个仅仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，
    //            最后返回对象
    function createAnother(original){
        var clone = object(original);  // 通过调用函数创建一个新对象
        clone.sayHi = function(){      // 以某种方式来增强这个对象
            console.log('hi');
        }
        return clone;          // 返回这个对象
    }
        
    var person = {
        name:'Kai',
        friends:['lili', 'jiji', 'liweri']
    };
        
    var aontherPerson = createAnother(person);
    aontherPerson.sayHi();  // hi
    console.dir(aontherPerson);
    // 新对象aontherPerson不仅具有person的所有属性和方法，而且还有自己的sayHi()方法
        
    // 【总结】 在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式






	// 五，寄生组合式继承
      // 组合继承的问题：无论什么情况下，都会调用两次的超类型构造函数
    //               1, 在创建子类型原型的时候
    //               2, 在子类型构造函数的内部
    // 子类型最终会包含超类型对象的全部实例属性，而我们又不得不在调用子类型构造函数时重写这些属性

    function SuperType(name){
        this.name = name;
        this.colors = ['red', 'green', 'black'];

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

    // 【改进！！】

    // 寄生组合式继承：通过借用构造函数来继承属性，通过原型链的“混成形式”来继承方法
    // 思路：
    
    function inheritPrototype(subType, superType){
        var prototype = Object(superType.prototype);  // 创建对象
        prototype.constructor = subType;   // 增强对象
        subType.prototype = prototype;  // 指定对象

    }

    function SuperType(name){
        this.name = name;
        this.colors = ['red', 'green', 'black'];

    }
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    
    function SubType(name, age){
        SuperType.call(this, name);  
        this.age = age;
    }
    
    inheritPrototype(SubType, SuperType);
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    
    // 【优化】该例子只调用了一次SuperType()构造函数，而且避免了在SubType.prototype上面创建不必要的、多余的属性
    
        
    </script>


</body>
</html>```