ES6中Class类的用法以及和ES5函数声明的区别

- 日理万妓 2024-02-19 10:01 49阅读 0赞

##### 类声明 #####

###### Class由来 ######

Class写法更接近传统的面向对象语言的语法，它的绝大部分功能，ES5都可以实现，只是为了在写法上更加清晰、更像面向对象语言的语法。其思想和 ES5 是一致的。

###### Class语法 ######

> // es5  
> function Point(x, y) \{  
> this.x = x;  
> this.y = y;  
> \}
> 
> Point.prototype.toString = function() \{  
> return '(' + this.x + ',' + this.y + ')';  
> \}
> 
> const p = new Point(1,2);

等同于

> //es6  
> class Point \{  
> constructor(x, y) \{  
> this.x = x;  
> this.y = y;  
> \}
> 
> toString() \{  
> return '(' + this.x + ',' + this.y + ')';  
> \}  
> \}  
> const p = new Point(1,2); // 生成类的实例的写法，与 ES5 完全一样，也是使用\`new\`命令

其中 constructor 方法是类的构造函数，是一个默认方法。通过 new 命令创建对象实例时，会自动调用该方法。一个类必须有 constructor 方法，如果没有显式定义，会自动添加一个默认的consructor方法。所以即使你没有添加构造函数，也是会有一个默认的构造函数的。一般 constructor 方法返回实例对象 this ，但是也可以指定 constructor 方法返回一个全新的对象，让返回的实例对象不是该类的实例。

constructor 方法中的this指向实例对象p，参数x,y的值是创建实例时，通过new Point(1,2)传递进来的。x,y相当于是给p对象的x,y属性设置初始值。创建实例时，可以不传x,y参数，默认为undefiend。

> // 不设置初始值  
> const p = new Point(); // p:\{x: undefined, y: undefined\}  
> // 设置初始值  
> const p = new Point(1,2); // p:\{x: 1, y: 2\}

在Class中定义的所有方法都定义在类的prototype属性上面。

> class Point \{  
> constructor() \{  
> // ...  
> \}
> 
> toString() \{  
> // ...  
> \}
> 
> toValue() \{  
> // ...  
> \}  
> \}

// 等同于

> Point.prototype = \{  
> constructor() \{\},  
> toString() \{\},  
> toValue() \{\},  
> \};

与 ES5 一样，类的所有实例共享一个原型对象。也共享原型上的属性。

静态属性和静态方法  
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

静态属性指的是 Class 本身的属性。同理，如果在一个属性前，加上static关键字，就代表该属性是 Class 本身的属性。该属性也不会被实例继承。

> class Foo \{  
> static myStaticProp = 42;  
> static classMethod() \{  
> return 'hello';  
> \}  
> \}
> 
> Foo.myStaticProp // 42  
> Foo.classMethod() // 'hello'
> 
> var foo = new Foo();  
> foo.myStaticProp;  
> // undefined  
> foo.classMethod()  
> // TypeError: foo.classMethod is not a function

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。所以，静态方法中this调用的只能是静态属性和静态方法。

> class Foo \{  
> static bar() \{  
> this.baz();  
> \}  
> static baz() \{  
> console.log('hello');  
> \}  
> baz() \{  
> console.log('world');  
> \}  
> \}
> 
> Foo.bar() // hello

上面代码中，静态方法bar调用了this.baz，这里的this指的是Foo类，而不是Foo的实例，等同于调用Foo.baz。另外，从这个例子还可以看出，静态方法可以与非静态方法重名。

##### ES5函数声明与ES6类声明的区别 #####

###### 1.枚举性 ######

ES6类内部定义的方式，是不可枚举的；

> Object.keys(Point.prototype)  
> // \[\]

ES5 的写法，toString()方法就是可枚举的。

> Object.keys(Point.prototype)  
> // \["toString"\]

######    2.变量提升 ######

函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会。你首先需要声明你的类，然后再访问它，否则类似以下的代码将抛出ReferenceError：

> let p = new Rectangle(); // ReferenceError
> 
> class Rectangle \{\}

######    3.严格模式 ######

使用类声明，在其内部采用的是严格模式，而函数声明不是。

在函数声明中，未声明变量count不会报错：

> function Foo () \{  
> count = 1  
> \}  
> const foo = new Foo()  
> console.log(foo)

使用class声明的方式

> class Bar \{  
> constructor () \{  
> count = 2 // Uncaught ReferenceError: count is not defined  
> \}  
> \}  
> const bar = new Bar()  
> console.log(bar)

######    4.new创建实例 ######

类声明必须通过new命令创建实例，而函数声明可以不使用new命令创建实例

> function Foo()\{  
> console.log('函数声明')  
> \}  
> const foo = Foo();  
> class Bar\{  
> constructor()\{  
> console.log('类声明')  
> \}  
> \}  
> const bar = Bar();  
> // Uncaught TypeError: Class constructor Bar cannot be invoked without 'new'

###### 5.重写类名 ######

类声明class内部无法重写类名，而函数声明可以重写类名。

> function Foo()\{  
> Foo = 'abc'  
> \}  
> new Foo()  
> // 重写类名报错  
> class Bar\{  
> constructor()\{  
> Bar = 'def' // Uncaught TypeError: Assignment to constant variable.  
> \}  
> \}  
> new Bar()

##### 类继承 #####

###### Class继承语法 ######

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

> class Point \{  
> \}
> 
> class ColorPoint extends Point \{  
> \}

#####    Super关键字 #####

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

> class Point \{ /\* ... \*/ \}
> 
> class ColorPoint extends Point \{  
> constructor() \{  
> \}  
> \}
> 
> let cp = new ColorPoint(); // ReferenceError  
>

另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

> class Point \{  
> constructor(x, y) \{  
> this.x = x;  
> this.y = y;  
> \}  
> \}
> 
> class ColorPoint extends Point \{  
> constructor(x, y, color) \{  
> this.color = color; // ReferenceError  
> super(x, y);  
> this.color = color; // 正确  
> \}  
> \}  
>

##### 父类的静态方法，也会被子类继承。 #####

ES5与ES6继承的区别  
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。

ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。