ES6-class

Posted lu0511

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6-class相关的知识,希望对你有一定的参考价值。

1、ES6中的类完全可以看作构造函数的另一种写法。

class Point{
    //..
  }
  typeof Point //‘function‘
  Point === Point.prototype.constructor // true

类的数据类型就是函数,类本身指向构造函数

 

   class Point{
    //..
    constructor(){

    }
    toString(){

    }
    toValue(){

    }
  }
  // 等同于
 Point.prototype = {
  constructor(){},
  toString(){},
  toValue(){}
 } 

Object.assign方法可以很方便的一次向类添加多个方法。

 Object.assign(Point.prototype,{
  toString(){},
  toValue(){}
 })

类的内部定义的所有方法都是不可枚举的

2、constructor

constructor 方法是类的默认方法,通过new命令生成对象实例时自动调用该方法。一个类必须有constructor方法,如果没有显示定义,空的constructor会被添加。

3、实例对象

使用new

类的所有实例共享一个原型对象

 var p1 = new Point(2,3);
 var p2 = new Point(3,3);
 p1.__proto__ = p2.__proto__

4、不存在变量提升

class不存在变量提升

5、class 的继承

class 之间可以通过extends关键字实现继承

 class colorpoint extends point {}

super 关键字,指代父类的实例(即父类的this对象)

子类必须在constructor方法中调用super方法,否则新建实例时会报错,因为子类没有自己的this对象。

ES6的继承机制完全不同,实质上是先创造父类的实例对象this,然后再用子类的构造函数修改this

只有调用super之后,才可以使用this关键字

6、类的prototype属性和__proto__属性

在ES5中,每一个对象都有__proto__属性,指向对应的构造函数的prototype属性。

ES5:

1.对象有属性__proto__,指向该对象的构造函数的原型对象。
2.方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。

class 作为构造函数的语法糖,同时有prototype属性和__proto__属性

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

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

 class B extends A {

 }
 B.__proto__ === A//true
 B.prototype.__proto__ === A.prototype // true

 


// B 的实例继承 A 的实例

Object.setPrototypeOf(B.prototype, A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;
// B 的实例继承 A 的静态属性
Object.setPrototypeOf(B, A); // 等同于 B.__proto__ = A;

这两条继承链,可以这样理解:作为一个对象,子类(B)的原型(__proto__属性)是父类(A);作为一个构造函数,子类(B)的原型对象(prototype属性)是父类的原型对象(prototype属性)的实例。

7、实例的__proto__属性

子类实例的__proto__属性的__proto__属性,指向父类实例的__proto__属性。也就是说,子类的原型的原型,是父类的原型

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, ‘red‘);

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

8、class 的静态方法

如果在一个方法前加上static关键字,就表示该方法不会被实例继承,而是直接通过类调用,称为静态方法。

父类的静态方法可以被子类继承

 

以上是关于ES6-class的主要内容,如果未能解决你的问题,请参考以下文章

es6-class

ES6-class类

es6-class

es6-class

微信小程序代码片段

VSCode自定义代码片段——CSS选择器