菜鸟看前端（继承）

继承

Es5 原型链继承

 function Fun(name,sex){
        this.name = name
        this.sex = sex
        this.say = ()=>{
            console.log(`我叫${this.name},性别${this.sex}`)
        }
    }
    Fun.prototype.test = function(){
        console.log('我会飞')
    }
    
    function Son(age){
        this.age = age
    }
    
    Son.prototype =  new Fun('小高','女')
    var son = new Son('18')  // 不能传参 ,
    
    son.say()  //   可以调用实例中的方法
    son.test()  // 可以调用原型中的方法
    console.log(son)

输出结果

原型链继承特点

父类的实例作为子类的原型
可以使用原型中的方法
不能进行传参

Es5构造函数继承

 function Fu(name,age){
        this.age = age
        this.name = name
        this.say = function(){
            console.log(`名字${this.name},年龄${this.age}`)
        }
    }
    Fu.prototype.test = function(){
        console.log('父级原型的方法')
    }
    var fu = new Fu('小米',18)
   
    
    
    function Zi(name,age){
        //在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内.
        Fu.call(this)
        this.age = age
        this.name = name
    
    }
    
    var zi = new Zi('大米',20)  // 可以进行传参
    
    zi.say() // 调用实例中的方法
    
    zi.test() // 调用父级原型方法报错  继承.html:92 Uncaught TypeError: zi.test is not a function

输出结果

构造函数继承

在子类内使用call()调用父类方法，将父类的this修改为子类的this，相当于把实例属性复制一份放到子类函数内
可以传参
不能使用父类原型中的方法

组合继承

   function Fu(name, age) {
            this.name = name
            this.age = age
            this.say = function () {
                console.log(`姓名：${this.name},年龄：${this.age}`)
            }
        }
    
        Fu.prototype.skill = function () {
            console.log('父函数原型的方法')
        }
    
        // 子
        function Zi(name, age, sex) {
    
            // 构造函数继承
            Fu.call(this, name, age)
            this.sex = sex
        }
    
        // 原型链继承
        Zi.prototype = new Fu()
    
        // 实例化子对象
        var zi = new Zi('小明',20,'男')
    
        console.log(zi)
        zi.say() // 实例中的方法也可以调用
        zi.skill() // 原型中的方法也可以调用 

输出结果

组合继承

既可以使用父类实例的属性，也可以使用父类原型的属性

Es6类继承

class People {
        constructor(name = 'wang', age = '27') {
            this.name = name;
            this.age = age;
        }
        eat() {
            console.log(`${this.name} ${this.age} eat food`)
        }
    }
    //子类 通过extends 继承父类
    class Woman extends People {
        constructor(name = 'ren', age = '27') {
            //继承父类属性
            super(name, age);
        }
        eat() {
            //继承父类方法
            super.eat()
        }
    }
    let wonmanObj = new Woman('xiaoxiami');
    wonmanObj.eat();

输出结果

class继承需要通过extends关键字来继承，通过super来调用父类的方法

原型链

每一个构造函数都有一个prototype，为显示原型
每一个实例都有一个__proto__，为隐式原型
实例化的隐式原型指向构造函数的显示原型

in和hasOwnProperty区别

hasOwnProperty :hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。

in:只要是对象能访问到的值就返回true ，无论该属性存在于实例中还是原型中

判断属性是否是原型的属性

function Fun(name,age){
    this.name = name
    this.age = age
}
Fun.prototype.sex = '男'

var fun = new Fun('小高',18)

console.log(fun)

console.log("sex" in fun) //true
console.log(fun.hasOwnProperty("sex")) //false

if("sex" in fun == true || fun.hasOwnProperty("sex") == false){
    console.log('原型中的属性')
}