ES6学习笔记(五):Class和Module

时间:2023-03-08 16:37:15
ES6学习笔记(五):Class和Module

Class

Class

只是一个语法糖,其功能用es5也能实现,但是比es5更符合类的期待

定义:

constructor代表构造方法,而this指向new 生成的实例

定义类方法时,可以不使用function

注意:类的内部所有定义的方法,都是不可枚举的(non-enumerable)。

//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
} toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}

使用

new Point(x,y)

constructor

类的默认方法,new生成对象实例的时候执行的就是这个方法

一个类必须有constructor方法

constructor默认返回实例对象

Class不存在变量提升

new Foo(); // ReferenceError
class Foo {}

Class的继承

extends关键字

class ColorPoint extends Point {}

注意:

1.子类必须调用super,子类本身没有this,super是父类的构造函数,调用super,子类才有this

这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。

类的prototype属性和__proto__属性

1.子类的__proto__指向父类

2.子类的prototype的__proto__指向父类的.prototype

class A {
} class B extends A {
} B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

super关键字

1.调用super方法时,super代表父类的constructor方法

2.作为属性super调用时,super代表父类本身

ES6改变了Object构造函数的行为,一旦发现Object方法不是通过new Object()这种形式调用,ES6规定Object构造函数会忽略参数。

getter和setter

Generate方法

直接在方法属性前加*

静态方法static

一个方法前加static,则该方法不会被继承,而是通过类来直接调用

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

静态方法也可以从super上调用,因为super指向父类本身

注意:Class内部只有静态方法,没有静态属性。

new.target

(在构造函数中)返回new命令作用于的那个构造函数。

mixin模式

???

Module

严格模式

es6的模块自动使用严格模式

export

as

通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

function v1() { ... }
function v2() { ... } export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};

export命令必须处于模块顶层。

export命令规定的是对外的接口。

import

import具有变量提升效果,会提升到模块头部执行

default

import和export的默认变量名

es6模块加载与CommonJS

CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。

CommonJS一旦输出一个值,模块内部的变化就影响不到这个值。

ES6模块原始值变了,import输入的值也会跟着变。