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

最新推荐文章于 2024-04-09 10:36:01 发布

圆周率呀

最新推荐文章于 2024-04-09 10:36:01 发布

阅读量432

点赞数 2

文章标签： es6 javascript 原型模式

本文链接：https://blog.csdn.net/qq_43532275/article/details/134286027

版权

类声明

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; // 正确
}
}