美文网首页
ES6 学习笔记(16) Class 继承

ES6 学习笔记(16) Class 继承

作者: MrZhou_b216 | 来源:发表于2018-03-20 14:50 被阅读0次

1. 简介


Class可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

  class Point {
  }

  class ColorPoint extends Point {
  }

如果子类没有定义constructor方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor方法。

  class ColorPoint extends Point {
  }
  
// 等同于
  class ColorPoint extends Point {
    constructor(...args) {
      super(...args);
    }
  }
 // 只有调用super之后,才可以使用this关键字,否则会报错。
  class ColorPoint extends Point {
    constructor(x, y, color) {
      this.color = color; // ReferenceError
      super(x, y);
      this.color = color; // 正确
    }
  }

2. Object.getPrototypeOf()


Object.getPrototypeOf方法可以用来从子类上获取父类。可以使用这个方法判断,一个类是否继承了另一个类。

3. super 关键字


第一种情况,super作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super函数。
第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

  class A {
    p() {
      return 2;
    }
  }

  class B extends A {
    constructor() {
      super();
      console.log(super.p()); // 2
    }
  }

  let b = new B();

由于super指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super调用的。
如果属性定义在父类的原型对象上,super就可以取到。
ES6 规定,通过super调用父类的方法时,方法内部的this指向子类。
注意,使用super的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。

4. 类的 prototype 属性和proto属性


(1)子类的__proto__属性,表示构造函数的继承,总是指向父类。

(2)子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。

5. 原生构造函数的继承


原生构造函数是指语言内置的构造函数,通常用来生成数据结构。

  • ECMAScript 的原生构造函数大致有下面这些。
    Boolean()
    Number()
    String()
    Array()
    Date()
    Function()
    RegExp()
    Error()
    Object()

以前,这些原生构造函数是无法继承的,比如,不能自己定义一个Array的子类。
ES6 允许继承原生构造函数定义子类,因为 ES6 是先新建父类的实例对象this,然后再用子类的构造函数修饰this,使得父类的所有行为都可以继承。

  class MyArray extends Array {
    constructor(...args) {
      super(...args);
    }
  }

  var arr = new MyArray();
  arr[0] = 12;
  arr.length // 1

  arr.length = 0;
  arr[0] // undefined

6. Mixin 模式的实现


Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。它的最简单实现如下。

  const a = {
    a: 'a'
  };
  const b = {
    b: 'b'
  };
  const c = {...a, ...b}; // {a: 'a', b: 'b'}

下面是一个更完备的实现,将多个类的接口“混入”(mix in)另一个类。

  function mix(...mixins) {
    class Mix {}

    for (let mixin of mixins) {
      copyProperties(Mix, mixin); // 拷贝实例属性
      copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
    }

    return Mix;
  }

  function copyProperties(target, source) {
    for (let key of Reflect.ownKeys(source)) {
      if ( key !== "constructor"
        && key !== "prototype"
        && key !== "name"
      ) {
        let desc = Object.getOwnPropertyDescriptor(source, key);
        Object.defineProperty(target, key, desc);
      }
    }
  }

相关文章

  • ES6 学习笔记(16) Class 继承

    1. 简介 Class可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很...

  • react组件

    es6 的class类的继承 运用es6 class继承 通过继承React.Component类来定义一个组件

  • JavaScript继承

    es6继承 class Square extends Polygon {constructor(length) {...

  • [JavaScript] class

    ES6中的class基于原型继承创建类。 (1)class只是原型继承的语法糖 相当于: 注: class定义中...

  • JavaScript ES6 class多重继承实践与总结

    ES6中,class原生是不支持多重继承的,根据阮一峰ES6参考资料中的方法,通过以下方式即可实现class继承多...

  • ES6

    ES6是一个语言标准,不是一个框架。 ES6中的class与继承 class是创建类对象与实现类继承的语法糖,旨在...

  • ES6新特性

    ES6新特性 1.类(支持继承 extends)class TestClass { constructor(...

  • ES6 笔记 Class和继承

    定义class 通过extend来继承父类的属性和方法 Mix mix允许继承多个类的属性(实例属性和protot...

  • JS中类的继承封装和多态

    子类继承父类的属性和方法(原生继承,call继承,寄生组合继承,ES6中class类继承)原生继承:让子类的原型指...

  • Javascript原型和原型链

    JavaScript在ES6之前没有类似class,extend的继承机制,JavaScript的继承主要是通过原...

网友评论

      本文标题:ES6 学习笔记(16) Class 继承

      本文链接:https://www.haomeiwen.com/subject/mseqqftx.html