本文共 2705 字，大约阅读时间需要 9 分钟。

ES6之前，我们都是通过构造函数来生成实例对象：

function Point (x,y){
   	this.x = x	this.y = y}Point.prototype.sum = function(){
   	return this.x + this.y}let point = new Point(1,2)console.log(point.sum()) // 3

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。基本语法：

class Point{
         constructor(x,y){
           this.x = x        this.y = y      }      sum(){
           return this.x + this.y      }    }    let point = new Point(1,2)    console.log(point.sum()) // 3

注意：

• 定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。
• 方法之间不要加逗号，加了会报错。
• 使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
• 它的constructor方法就是B类原型的constructor方法。
• 类的所有方法都定义在类的prototype属性上面。
• 类的内部所有定义的方法，都是不可枚举的
• Object.assign方法可以很方便地一次向类添加多个方法。

class Point {
     constructor() {
       // ...  }  toString() {
       // ...  }  toValue() {
       // ...  }}// 等同于Point.prototype = {
     constructor() {
   },  toString() {
   },  toValue() {
   },};// Object.assign方法可以很方便地一次向类添加多个方法。Object.assign(Point.prototype, {
     toString(){
   },  toValue(){
   }});

• constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。（constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。）

class Point {
   }// 等同于class Point {
     constructor() {
   }}

• 与 ES5 一样，类的所有实例共享一个原型对象。

var p1 = new Point(2,3);var p2 = new Point(3,2);p1.__proto__ === p2.__proto__//true

• 属性表达式（类的属性名，可以采用表达式。）

let methodName = 'getArea';class Square {
     constructor(length) {
       // ...  }  [methodName]() {
       // ...  }}

• Class 表达式（与函数一样，类也可以使用表达式的形式定义。）

const MyClass = class Me {
     getClassName() {
       return Me.name;  }};let inst = new MyClass();inst.getClassName() // MeMe.name // ReferenceError: Me is not defined

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

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

• 实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。其他都不变。

class IncreasingCounter {
     _count = 0;  get value() {
       console.log('Getting the current value!');    return this._count;  }  increment() {
       this._count++;  }}

• 静态属性（静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。）

class MyClass {
     static myStaticProp = 42;  constructor() {
       console.log(MyClass.myStaticProp); // 42  }}

• new.target 属性（该属性一般用在构造函数之中，返回new命令作用于的那个构造函数。如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。）

function Person(name) {
     if (new.target !== undefined) {
       this.name = name;  } else {
       throw new Error('必须使用 new 命令生成实例');  }}

web前端技术交流QQ群：327814892

转载地址：http://ztri.baihongyu.com/