Class 的基本语法

简介

ES6 的类可以看作是写构造函数的语法糖,让 JavaScript 写构造函数跟传统语言差不多,下面是一个例子

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
   return `x: ${this.x}, y: ${this.y}`;
  }
}

// 等同于
function Point(x, y) {
  this.x = x
  this.y = y
}

Point.prototype.toString = function(){
  return `x: ${this.x}, y: ${this.y}`;
}

类的声明不存在变量提升,必须在声明之后才能调用

new Point()
class Point {}

类的name属性值为写在class关键字后面的变量名

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

类和模块内部,默认使用严格模式

构造函数

Class 中默认会有一个空的constructor方法,用来实例化对象调用,可以在constructor方法中做一些初始化的操作

Class 必须使用new关键字实例化,不能当做普通函数调用,这一点和构造函数是有区别的

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

Point() // 报错

实例属性

可以在 Class 内部的 constructor 方法里面定义实例属性

class Point {
  constructor(x) {
    this.x = x
  }
}

实例方法

Class 所有的方法都会定义在类的prototype对象上面,方法与方法之后不能用逗号隔开,所有实例对象可以使用

Class 定义的方法都是不可枚举的,ES5 构造函数的prototype属性上面定义方法是可枚举的

class Point {
  constructor() {}
  print() {
    console.log('print')
  }
  to() {
    console.log('to')
  }
}
Object.keys(Point) // []
// 构造函数
var Obj = function() {}
Obj.prototype.to = function() { console.log('to') }
Object.keys(Obj) // ["to"]

可以利用Object.assign()方法来增加类的实例方法

Object.assign(Point.prototype, {
  a() {},
  b() {},
})

静态方法

可以通过在定义方法的时候在方法名前面加上static关键字,来定义类的静态方法,可以通过className.staticFun()的形式调用

ES6 规定类的内部只有静态方法,没有静态属性

class Point {
  static to() {
    console.log('hello world')
  }
}
var p = new Point()
p.to() // 报错

类属性的存值函数和取值函数

可以在类的内部使用getset关键字来对某个属性设置存值函数和取值函数,来拦截该属性的读写操作

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

new.target 属性

在构造函数内部使用,表示new命令作用于哪个构造函数,如果没有使用new命令,new.target返回undefined

class Point {
  constructor() {
    if (new.target === undefined){
      throw new Error ("必须使用 new 命令实例化")
    }
  }
}
上次更新: 11/26/2018, 9:46:42 PM