Class的使用，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字，类的继承

Posted 2020-11-23 jiazhaolong

s6新增了一种定义对象实例的方法，Class（类）这个概念，作为对象的模板。class可以看作只是一个语法糖，通过class关键字，可以定义类。让对象原型的写法更加清晰、更像面向对象编程的语法。

 

 

一.  Class的基本用法

1.  constructor方法

 1 //定义类
 2 class Point {
 3   constructor(x, y) {
 4     this.x = x;
 5     this.y = y;
 6   }
 7  
 8   toString() {
 9     return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
10   }

ES6的类，完全可以看作构造函数的另一个写法。类的数据类型就是函数，类本身就指向构造函数。使用时候，类必须使用new调用。

 1 class Point {
 2   // ...
 3 }
 4  
 5 typeof Point // "function"
 6 Point === Point.prototype.constructor // true   prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。
 7  
 8 class Bar {
 9   doStuff() {
10     console.log(‘stuff‘);
11   }
12 }
13  
14 var b = new Bar();
15 b.doStuff() // "stuff"

 

类的所有方法都定义在类的prototype属性上面。在类的实例上面调用方法，其实就是调用原型prototype对象上的方法，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

 

 1 class Point {
 2   constructor() {
 3   }
 4  
 5   toValue() {
 6   }
 7 }
 8  
 9 // 等同于
10  
11 Point.prototype = {
12   constructor() {},
13   toValue() {},
14 };
15  
16  
17 Object.assign(Point.prototype, {
18   toString(){},
19 })

2.class的静态属性和实例属性

2.1类的实例属性：类的实例属性可以用等式，写入类的定义之中。（Class 内部只有静态方法，没有静态属性）

1 class MyClass {
2   myProp = 42;
3  
4   constructor() {
5     console.log(this.myProp); // 42
6   }

为了可读性的目的，对于那些在constructor里面已经定义的实例属性，新写法允许直接列出。

1 class ReactCounter extends React.Component {
2   state = {
3     count: 0
4   };

2.2  类的静态属性：类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了。

1 class MyClass {
2   static myStaticProp = 42;
3  
4   constructor() {
5     console.log(MyClass.myStaticProp); // 42
6   }
7 }

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

 1 class Foo {
 2   static classMethod() {
 3     return ‘hello‘;
 4   }
 5 }
 6  
 7 Foo.classMethod() // ‘hello‘
 8  
 9 var foo = new Foo();
10 foo.classMethod()// TypeError: foo.classMethod is not a function
11  
12  
13 //如果静态方法包含this关键字，这个this指的是类，而不是实例。静态方法可以与非静态方法重名。
14 class Foo {
15   static bar () {
16     this.baz();
17   }
18   static baz () {
19     console.log(‘hello‘);
20   }
21   baz () {
22     console.log(‘world‘);
23   }
24 }
25  
26 Foo.bar() // hello   静态方法bar调用了this.baz，这里的this指的是Foo类，而不是Foo的实例，等同于调用Foo.baz。

3.1实例方法

1 /* --- 实例方法 -- */
2 function ClassA() { //定义构造函数
3 };
4 ClassA.prototype.func = function() { //在构造函数的原型上添加方法
5   console.log("This is an instance method.");
6 }
7 var instance = new ClassA(); //新建一个实例
8 ClassA.func(); // Error:ClassA.func is not a function
9 instance.func(); //This is an instance method.

 上面代码结果报错如下。。。

 

1 // 定义在某个具体对象(实例)上的方法是实例方法
2 function ClassA() { //定义构造函数
3 };
4 var instance = new ClassA(); //新建一个实例
5 instance.func = function() {
6     console.log("This is an instance method.")
7   }
8   // ClassA.func(); // Error:ClassA.func is not a function
9 instance.func(); //This is an instance method.

 

4 this和super关键字

4.1   `super`这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

第一种情况，`super`作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次`super`函数。

4.2  

面向对象语言中 this 表示当前对象的一个引用。

但在 javascript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

5 .类的继承

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

class Point {
}

class ColorPoint extends Point {
}