ES6中的class

ES6

ECMAScript 2015或ES2015是对JavaScript编程语言的重大更新。这是自2009年对ES5进行标准化以来对语言的首次重大更新,ES6加入很多有用的特性。因此,ES2015通常被称为ES6。

本文环境:

  • NodeJs版本:v12.13.0
  • OS:Ubuntu 18.04.4 LTS

class语法糖

首先我们先来看一下关于 ES6 中的类

1
2
3
4
5
class Persion {
say() {
console.log('hello~')
}
}

上面这段代码是 ES6 中定义一个类的写法,其实只是一个语法糖,而实际上当我们给一个类添加一个属性的时候,会调用到 Object.defineProperty 这个方法,它会接受三个参数:target 、name 和 descriptor ,所以上面的代码实际上在执行时是这样的:

1
2
3
4
5
6
7
8
function Persion() {}

Object.defineProperty(Persion.prototype, "say", {
value: function() { console.log("hello ~"); },
enumerable: false,
configurable: true,
writable: true
});

ES6中extends

ES6中可以很方便地用extends的实现继承:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Shape {
constructor(x, y) {
this.x = x;
this.y = y;
}

move(x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
}
}

class Rectangle extends Shape {
constructor() {
super(); // ES6 要求,子类的构造函数必须执行一次 super 函数,否则会报错。
}
}

要用ES5实现继承,就是用利用原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Shape - 父类(superclass)
function Shape() {
this.x = 0;
this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

参考:

您的支持将鼓励我继续创作!