Class的基本语法

 

1.简介

类的由来

ES5中通过构造函数生成类

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);

 

ES6引入了 Class（类）这个概念

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

ES5 的构造函数Point，对应 ES6 的Point类的constructor方法

this关键字则代表实例对象

定义“类”的方法的时候，前面不需要加上function这个关键字

另外，方法之间不需要逗号分隔，加了会报错

 

ES6 的类，完全可以看作构造函数的另一种写法

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

 

类的所有方法都定义在类的prototype属性上面

class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}

// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

 

在类的实例上面调用方法，其实就是调用原型上的方法

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

 

Object.assign方法可以很方便地一次向类添加多个方法

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

 

prototype对象的constructor属性，直接指向“类”的本身

Point.prototype.constructor === Point // true

 

另外，类的内部所有定义的方法，都是不可枚举的（non-enumerable）

class Point {
  constructor(x, y) {
    // ...
  }
  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

 

下面代码采用 ES5 的写法，toString方法就是可枚举的

var Point = function (x, y) {
  // ...
};

Point.prototype.toString = function() {
  // ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

 

constructor 方法

constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo// false

 

类的实例

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

上面代码中，x和y都是实例对象point自身的属性（因为定义在this变量上），所以hasOwnProperty方法返回true，而toString是原型对象的属性（因为定义在Point类上），所以hasOwnProperty方法返回false

 

与 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;
  }
};

需要注意的是，这个类的名字是Me，但是Me只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

上面代码表示，Me只在 Class 内部有定义

如果类的内部没用到的话，可以省略Me，也就是可以写成下面的形式

const MyClass = class { /* ... */ };

 

采用 Class 表达式，可以写出立即执行的 Class

let person = new class {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}('张三');

person.sayName(); // "张三"

上面代码中，person是一个立即执行的类的实例

 

name属性

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

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

 

 

2.静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例

class Foo {
  static bar() {
    this.baz();
  }
  static baz() {
    console.log('hello');
  }
  baz() {
    console.log('world');
  }
}

Foo.bar() // hello

另外，从这个例子还可以看出，静态方法可以与非静态方法重名

 

父类的静态方法，可以被子类继承

静态方法也是可以从super对象上调用的

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

 

 

3.私有方法和私有属性

一种方法就是索性将私有方法移出模块，因为模块内部的所有方法都是对外可见的

class Widget {
  foo (baz) {
    bar.call(this, baz);
  }
  // ...
}

function bar(baz) {
  return this.snaf = baz;
}

上面代码中，foo是公开方法，内部调用了bar.call(this, baz)。这使得bar实际上成为了当前模块的私有方法

 

还有一种方法是利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值

const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{
  // 公有方法
  foo(baz) {
    this[bar](baz);
  }
  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }
};

上面代码中，bar和snaf都是Symbol值，一般情况下无法获取到它们，因此达到了私有方法和私有属性的效果。但是也不是绝对不行，Reflect.ownKeys()依然可以拿到它们

 

目前，有一个提案，为class加了私有属性。方法是在属性名之前，使用#表示

 

 

4.new.target 属性

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

需要注意的是，子类继承父类时，new.target会返回子类

利用这个特点，可以写出不能独立使用、必须继承后才能使用的类

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

上面代码中，Shape类不能被实例化，只能用于继承

注意，在函数外部，使用new.target会报错