ES6 -- 继承 · Vue&&TypeSprict--基础总结

[TOC] >[success] # es5 -- 继承 ~~~ 1.下面的案例创建一个'Food'类，创建一个'Vegetables' 类。如果想继承就让'Vegetables'的原型链等于'Food' 实例 ~~~ >[danger] ##### 继承案例 ~~~ function Food(){ this.type = 'food' } // 通过原型链给 Food 写方法 Food.prototype.getType = function(){ return this.type } function Vegetables(name) { this.name = name } // 将原型链里添加你要继承的类实例(继承) Vegetables.prototype = new Food() // 创建一个蔬菜的实例 const tomato = new Vegetables() console.log(tomato.getType()) // 打印结果：food ，继承了父类Food的getType方法 ~~~ >[success] # es6 -- 继承 ~~~ 1.es6 的'class' 是一个语法糖，也就是说明我们看到的es6 继承还是遵循了'es5'逻辑，只是写法变了 2.'es6' 的继承使用关键字'extends' 和 'super' 3.继承同样会继承父类的静态方法，但是别忘了静态方法只有类能调用，因此子类想用的时候还是需要子类去调用，别用实例去调用 ~~~ >[danger] ##### 案例 ~~~ 1.下面的案例创建了一个'Animal'类，我们创建了一个'People '类继承'Animal', 'People' 继承'Animal' 的时候使用'extends '关键字，而且在'People '构造函数中增加了'super()'他会继承父类的'构造函数' ~~~ ~~~ class Animal { constructor (name,age){ this.name = name this.age = age } speak(){ return `在${this.name}说话` } } class People extends Animal{ constructor(name,age,sex){ super(name,age) // 等同于 Animal 中的constructor this.sex = sex } getSex(){ return `${this.name} 的性别：${this.sex} 年龄${this.age}` } } const xiaoMing = new People('xiaoMing',17,'男') console.log(xiaoMing.speak()) //继承了父类方法打印结果：在xiaoMing说话 console.log(xiaoMing.getSex()) //继承了父类age属性打印结果： xiaoMing 的性别：男年龄17 ~~~ >[danger] ##### 实例跟当前类和父类关系 ~~~ 1.使用'instanceof' 运算符用来测试一个对象在其原型链中是否存在一个构造函数,注意是一个对象说否在，基本类型number 之类是有坑的，他们不是对象所以不存在判断说法举个例子: let num = 1 num instanceof Number // false // 转成了对象 num = new Number(1) num instanceof Number // true 2.利用'instanceof ' 也能说明这个class其实是语法糖，他们跟es5 一样的都在原型链上 ~~~ * 上面的案例当前实例和父类都是true 也能说明他们都在原型链上 ~~~ console.log(xiaoMing instanceof People) // true console.log(xiaoMing instanceof Animal) // true ~~~ >[danger] ##### 判断当前类的父类 -- getPrototypeOf ~~~ console.log(Object.getPrototypeOf(People) === Animal) // true ~~~ >[danger]##### super -- 作为对象/ 和函数 ~~~ 1.当'super' 是函数的时候，在'constructor' 中使用表示父类的构造函数 2.当作为对象'super作为对象',对象使用见案例 2.1.在普通方法中 -》父类的原型对象 2.2 在静态方法中 -》父类 ~~~ * 案例 ~~~ class Parent { constructor () { this.type = 'parent' } getName () { return this.type } } Parent.getType = () => { return 'is parent' } class Child extends Parent { constructor () { super() console.log('constructor: ' + super.getName()) } getParentName () { // 调用了父类的方法，这个方法是实例调用，因此说是父类的原型对象 console.log('getParentName: ' + super.getName()) } static getParentType () { // 因为静态方法只能类调用因此'super' 指代是父类 console.log('getParentType: ' + super.getType()) } } const c = new Child() c.getParentName() Child.getParentType() ~~~ >[danger] ##### __proto__ 和 prototype ~~~ 子类的__proto__指向父类本身子类的prototype属性的__proto__指向父类的prototype属性实例的__proto__属性的__proto__指向父类实例的__proto__ ~~~ >[danger] #### es5 不能继承原生构造函数es6可以 * 原生构造函数 ~~~ // Boolean // Number // String // Array // Date // Function // RegExp // Error // Object ~~~ ~~~ // Boolean // Number // String // Array // Date // Function // RegExp // Error // Object class CustomArray extends Array { constructor (...args) { super(...args) } } const arr = new CustomArray(3, 4, 5) // arr.fill('+') console.log(arr) console.log(arr.join('_')) ~~~