简述js的继承

继承

继承就是让子类拥有父类的属性和方法

ES5的继承

在 ES5 里面 是用 构造函数 + 原型 模拟 类 ，如果不清楚构造函数，可以移步这儿。 我们来看ES5 继承的实现

//构造函数
function Father(name, age) {
    this.name = name;
    this.age = age;
}

//父类原型共享属性和方法
Father.prototype.eat = function () {
    // Father.prototype.constructor === Father
    return "我是父类原型方法，吃！";
}

//构造函数
function Son(name, age, No) {
    // Son.prototype.constructor === Son
    // a. 让子类继承父类所有属性。  通过call改变this指向  使之指向当前函数体  就相当于this.name=name this.age=age
     Father.call(this, name, age);
    // 子类自己的属性
    this.No = No;
}

// b. 让子类继承父类所有原型方法。  这儿就没有自己的显示原型了  
Son.prototype = Object.create(Father.prototype);

// C 还原子类构造器
Son.prototype.constructor = Son;

// 还原子类构造器之后，子类再添加属性和方法
Son.prototype.study = function () {
   return '一天不学习，浑身难受！！！'
}

// 创建子类实例对象
var s1 = new Son('张飞', 25, 1001)
console.log(s1)
console.log('s1.study()', s1.study());
console.log('s1.eat()', s1.eat());
console.log(s1 instanceof Son)
console.log(s1 instanceof Father)
console.log(s1 instanceof Object)

ES5继承步骤：

a.让子类继承父类所有属性。

b.让子类继承父类所有原型方法。 c.还原子类构造器 对照上面代码里面的a b c

ES6的继承

//父类
class Father {
    //构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // 原型方法
    eat() {
       return '父类原型方法，吃！！！';
    }
}


// 子类
class Son extends Father {
    // 构造函数
    constructor(name, age, No) {
        super(name, age);  // 继承父类属性
        this.No = No; // 自己的属性
    }
    // 子类的原型方法
    study() {
        return '我爱学习！';
    }

}

var s1 = new Son("王五", 16, 22);
console.log(s1.study());
console.log(s1.eat());
console.log(s1 instanceof Son);
console.log(s1 instanceof Father);
console.log(s1 instanceof Object);

注意

• 新建子类实例时，父类的构造函数必定会先运行一次
• 子类必须在 constructor() 方法中调用 super()，否则就会报错。

拓展

Object.create() 方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）===>MDN