ES5的继承语法

<script>    
    ES5 的继承语法
    作用也是为了优化代码,防止重复的代码内容的产生

    语法1:原型继承
    语法2:借用构造函数继承
    语法3:组合继承
    

    
    ******原型继承***************
    /*        所谓的原型继承,是通原型链来继承父级构造函数的内容
            两个构造函数,没办法直接相互关联,必须要通过构造函生成的实例化对象
            在 子级构造函数的 prototype 中,添加父级构造函数,生成的实例化对象
            子级构造函数的 属性 就是 实例化对象 中定义的属性
            子级构造函数的 方法 就是 父级构造函数 中定义的方法
    */

    function Father(name,age){
        this.name = name;
        this.age = age;
    }
    Father.prototype.f1 = function(){
        console.log(this.name,this.age);
    }

    // 使用父级构造函数生成实例化对象
    const obj = new Father('张三',18);

    // 定义一个空的子级构造函数 -- 空函数
    function Son(){}

    // 在子级构造函数中,添加父级生成的实例化对象
    Son.prototype = obj;

    console.dir(Son);

    // 总结
    // 1,定义一个父级构造函数
    // 2,变量声明父级构造函数的实例化对象
    // 3,定义一个空的子级构造函数
    // 4,在子级构造函数的 prototype 中,添加父级构造函数,生成的实例化对象

    // 结果
    // 子级构造函数中,具有通过父级构造函数,添加的属性和方法

    // 原理:
    // 原型链: 构造函数,生成的实例化对象,实例化对象__proto__指向的是构造函数
    // 实例化对象---通过原型链---可以找到构造函数

    // 子级构造函数---需要找到父级构造函数   没办法直接建立关联
    // 子级构造函数---关联实例化对象---实例化对象关联父级构造函数
    // 通过 实例化对象 将两个 构造函数 使用原型链的方式,关联起来
    // 子级构造函数,可以调用父级构造函数中,定义的属性和方法

    // 属性是定义在实例化对象中的属性
    // 方法是定义在父级构造函数中的方法


    ****借用构造函数继承********************************
    // 主要是继承属性,不继承方法


    // 父级构造函数
    function Father(name,age){
        this.name = name;
        this.age = age;
    }
    Father.prototype.f1 = function(){
        console.log(this.name,this.age);
    }  
    
    const objF = new Father('lili' , 20)

    function Son(sex){
        // 调用 父级构造函数 父级构造函数的this,默认执行的是父级构造函数生成的实例化对象
        // 在子级构造函数中,this应该执行的是子级构造函数生成的实例化对象 ojbS
        // 使用 call 语法 来改变Father() 构造函数,this 的指向
        // 让 Father() 执行是 Son() 的指向,也就是 设定 Father() 的this 和 Son() 的 this 是同一个this
        // 当前在 Son() 中 this 就是 Son() 的this , 将 this 设定为 call() 的第一个参数,就是设定 Father() 的this 就是 Son() 的this
        // 之后的两个实参,是Father()本身执行时,应该输入的实参
        Father.call(this, '张三' , 18);
    //     // 子级自定义属性
        this.sex = sex;
    }
    // 自己构造函数,生成的实例化对象,就有两个从父级继承的属性
    // name,age,通过 call 从父级继承来,只要输入一个sex的实参就可以了
    const objS = new Son('男');
    console.log(objS);     // Son {name: "张三", age: 18, sex: "男"}


    *****所谓的组合继承,就是原型继承和借用构造函数继承,结合使用************************


    // 父级构造函数
    function Father(name,age){
        this.name = name;
        this.age = age;
    }
    Father.prototype.f1 = function(){
        console.log(this.name,this.age);
    }  

    // 通过父级构造函数,生成实例化对象
    const objF = new Father('张三',18);

    // 定义子级构造函数
    function Son(sex){
        // 通过call语法,设定 父级构造函数Father()的this为子级构造函数Son()的this
        // 并且定义 父级构造函数Father() 原有形参赋值实参
        Father.call( this , '李四' , 20);
        // 自定义的子级构造函数的属性
        this.sex = sex;
    }

    // 在子级构造函数的 prototype 中,添加父级构造函数生成的实例化对象
    Son.prototype = objF;
    
    // 使用子级构造函数,定义实例化对象
    const objS = new Son('男');

    console.log(objS);        // Son {name: "李四", age: 20, sex: "男"}


    ***总结********************************************
    
    ES6
        1,有两个关键词
            extends 指定继承的父级
            在构造器constructor 中使用的 super 指定属性从父级继承
        2,属性可以都从父级继承而来
        从父级继承属性,自定义数值数据
        自定义属性和属性值
        3,父级方法一定会继承,也可以自定义方法


    ES5
        1,原型继承
            定义父级构造函数
            定义子级空构造函数
            在子级 prototype 中 添加父级构造函数生成的实例化对象
            原理 : 通过 实例化对象 将两个 构造函数 通过 原型链 关联起来
            子级的属性是 实例化对象的属性
            子级的方法是 父级构造函数的方法

        2,借用构造函数继承
            只能继承属性不能继承方法
            通过 call函数 来改变父级构造函数的的this 指向
            让父级 构造函数的this指向,是子级构造函数的this指向
            父级构造函数,属性,也就是变成了子级构造函数的属性

        3,组合继承
            将 原型继承和 结构构造函数继承 组合在一起使用
</script>