JS基础知识day17-关于继承

改变this指向

call() 用于改变this指向

第一次参数表示要改变成的那个this指向，后面的参数表示该函数的参数

fn() -> fn.call()

 

bind() 用于改变this指向

          bind 只会改变this指向，但不会调用函数  -- 返回了这个函数

apply() 用改变this指向

apply 的第二个参数必须是一个数组(原函数的参数)

构造函数的继承

        --- 可以调用父类的构造函数然后改变他的this指向

        缺点：无法继承父类的原型对象的属性和方法

        function Person(name , age) {  
            this.name = name ; 
            this.age = age ;
            this.type = '人' ; 
        }

        Person.prototype.say = function () {  
            console.log('我是人');
        }


        function YellowPerson(name , age) {  
            // 调用了一个函数，改变了它的this指向
            Person.call(this , name , age) ;

            this.color = 'yellow' ;
            
            this.talk = function () {  
                console.log('我黄种人');
            }
        }


        const y = new YellowPerson('cc' , 18) ;

        console.log(y);

原型继承  

        ---  实例化父类，把他放在子类的原型对象上

        缺点：无法向父类传参

     function Person(name , age) {  
            this.name = name ; 
            this.age = age ;
            this.type = '人' ; 
        }

        Person.prototype.say = function () {  
            console.log('我是人');
        }



        function YellowPerson(name , age) {  
            this.color = 'yellow' ;
            this.talk = function () {  
                console.log('我黄种人');
            }
        }

        YellowPerson.prototype = new Person('cc' , 18) ;


        const y = new YellowPerson('yy' , 6) ;
        console.log(y);

        console.log(y.type);
        y.say()

组合继承：

        构造函数继承 + 原型继承

        缺点：原型链上出现了多余的属性

    function Person(name , age) {  
            this.name = name ; 
            this.age = age ;
            this.type = '人' ; 
        }

        Person.prototype.say = function () {  
            console.log('我是人');
        }



        function YellowPerson(name , age) {  
            Person.call(this , name , age) ;
            this.color = 'yellow' ;
            this.talk = function () {  
                console.log('我黄种人');
            }
        }

        YellowPerson.prototype = new Person('cc' , 18) ;


        const y = new YellowPerson('yy' , 6) ;
        console.log(y);

        console.log(y.type);
        y.say()

        console.log(y.name);

原型对象的继承

          原型对象的深复制

function Person(name , age) {  
            this.name = name ; 
            this.age = age ;
            this.type = '人' ; 
        }

        Person.prototype.say = function () {  
            console.log('我是人');
        }



        function YellowPerson(name , age) {  
            this.color = 'yellow' ;
            this.talk = function () {  
                console.log('我黄种人');
            }
        }

        // 地址共享
        // YellowPerson.prototype = Person.prototype ;

        // YellowPerson.prototype.aa = 'a' ;


        // const y = new YellowPerson('yy' , 19) ;
        // console.log(y);


        // console.log(Person.prototype);

        // 把父类的原型对象进行深复制
        // for(let key in Person.prototype) {
        //     YellowPerson.prototype[key] = Person.prototype[key]
        // }

        YellowPerson.prototype = {...Person.prototype} ;

        YellowPerson.prototype.aa = 'a' ;


        const y = new YellowPerson('yy' , 19) ;
        console.log(y);


        console.log(Person.prototype);

组合继承：

          原型对象的继承 + 构造函数的继承

          原型对象的深复制

        function Person(name , age) {  
            this.name = name ; 
            this.age = age ;
            this.type = '人' ; 
        }

        Person.prototype.say = function () {  
            console.log('我是人');
        }



        function YellowPerson(name , age) {  
            Person.call(this , name , age)
            this.color = 'yellow' ;
            this.talk = function () {  
                console.log('我黄种人');
            }
        }

      

        YellowPerson.prototype = {...Person.prototype} ;

        YellowPerson.prototype.aa = 'a' ;


        const y = new YellowPerson('yy' , 19) ;
        console.log(y);


        console.log(Person.prototype);

寄生式继承

           --- 中间件继承  -- 继承原型对象上的属性和方法

           创建一个空的构造函数，让这个构造函数的原型对象指向父类的原型对象

           也就是说这个构造函数就有了父类的原型对象上的属性和方法

           new Fn()  

 function Person(name , age) {  
            this.name = name ; 
            this.age = age ;
            this.type = '人' ; 
        }

        Person.prototype.say = function () {  
            console.log('我是人');
        }



        function YellowPerson(name , age) {  
            // Person.call()
            this.color = 'yellow' ;
            this.talk = function () {  
                console.log('我黄种人');
            }
        }

        
        // 创建一个空的构造函数
        function Fn() {  } 

        Fn.prototype = Person.prototype ;   // 地址共享 

        // 实际上只继承了父类的原型对象
        YellowPerson.prototype = new Fn() ;

      

        const y = new YellowPerson('yy' , 18) ;
        console.log(y);

        构造函数的继承   ，调用构造函数，改变this指向  

           无法继承父类的原型对象的属性和方法

        原型继承--实例化父类，添加在子类的原型对象上

          无法向父类传参

        寄生式继承和原型对象的继承

          只是继承了原型对象的属性和方法

        组合继承

          构造函数的继承  +  原型对象(中间件或者深复制)

Es6的继承

        class Person {
            // 相当于构造函数
            constructor(name , age) {
                this.name = name ; 
                this.age = age ; 
                this.type = '人'
            }
            say() {
                console.log('人');
            }
        }

        // extends 继承
        class YellowPerson extends Person {
            constructor(name , age) {
                //  super 继承父类的属性和方法  ，
                // 这个函数类似于 Person.call(this , name , age) + 原型对象的继承
                super(name , age) ;  // 向父类传参
                this.color = 'yellow' ;
            }
           
            talk() {
                console.log('我是黄种人');
            }

        }

        const y = new YellowPerson('yy' , 20) ;
        console.log(y);