es6中class类(还需完善)

桃扇骨 2022-10-16 08:49 176阅读 0赞

js语言当中，生成实例对象的传统方法是通过构造函数。

### 如何理解es6内的class ###

class作为对象的模板，通过class关键字，可以定义类。

### 基本 ###

基本上在es6上都会查看阮一峰老师的入门教程

[es6中class类的全方面理解（一） - 简书 (jianshu.com)][es6_class_ - _ _jianshu.com]

class的作用是  通过`class`关键字，可以定义类。 ES6的class可以看作是一个语法糖，新的`class`写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

传统构造函数：

function Point(x, y) {
      this.x = x;
      this.y = y;
    }
    
    Point.prototype.toString = function () {
      return '(' + this.x + ', ' + this.y + ')';
    };
    
    var p = new Point(1, 2);

上述构造函数生成实例的执行过程：

1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
    2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
    3.执行构造函数的代码。
    4.返回新对象（后台直接返回）;

class的写法：

class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }
    var p = new Point(1, 2);
    
    typeof Point // "function"
    Point === Point.prototype.constructor // true

上面两张写法最后的性质是一致的，写法不同

上方的class写法：可以看到constructor()方法，这就是构造方法，而this关键字代表实例对象。

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。

使用的时候，也是直接对类使用`new`命令，跟构造函数的用法完全一致。

实现class的注意点：

1.  在类中声明方法的时候，千万不要给该方法加上function关键字
2.  方法之间不要用逗号分隔，否则会报错

## 注意： ##

**1.严格模式**

类和模块的内部，默认就是严格模式，所以不需要使用`use strict`指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。

**2.不存在提升**

类不存在变量提升（hoist），这一点与 ES5 完全不同。

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

**3.name 属性**

由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被`Class`继承，包括`name`属性。

class Point {}
    Point.name // "Point"

`name`属性总是返回紧跟在`class`关键字后面的类名。

参考：

[js构造函数的定义 - 简书 (jianshu.com)][js_ - _ _jianshu.com]

[es6中class类的全方面理解（一） - 简书 (jianshu.com)][es6_class_ - _ _jianshu.com]

[Class 的基本语法 - ECMAScript 6入门 (ruanyifeng.com)][Class _ - ECMAScript 6_ _ruanyifeng.com]

[es6_class_ - _ _jianshu.com]: https://www.jianshu.com/p/86267fab4878
[js_ - _ _jianshu.com]: https://www.jianshu.com/p/7e21e23ffba9
[Class _ - ECMAScript 6_ _ruanyifeng.com]: https://es6.ruanyifeng.com/#docs/class