什么是Class
Class
是对象的模板,通过class
关键字,可以定义类,起始class
只是一个语法糖,它的绝大部分功能都可以用ES5实现。新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。(只谈ES6语法,不谈ES5实现)
基本语法
声明类
声明类需要使用关键字class
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
可以使用表达式的形式定义:
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined
此时类名是MyClass
,Me
只在Class
的内部代码可用,并且是可以省略的,指代当前类。
采用Class
表达式,可以写出立即执行的匿名Class
:
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}('张三');
person.sayName(); // "张三"
创建实例
使用new
命令可以生成类的实例,如果像函数那样调用类就会报错。通过new
创建实例的时候其实会调用constructor
方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor
方法默认返回实例对象(即this)`:
//定义类
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
实例的属性除非显示定义在其本身(this)上,否则都是定义在原型(class)上的。
属性
ES6规定属性只能在constructor
用this
定义,这样维护起来非常困难,stage-3有提出了以下定义属性的方法:
class MyClass {
myProp = 42;
constructor() {
console.log(this.myProp); // 42
}
}
直接写入类的定义中,这样就可以在实例上使用。
私有属性
ES6本身没提供私有方法的实现,但是我们可以使用Symbol
实现:
const myProp = Symbol('myProp');
export default class myClass{
[myProp] = 42;
constructor() {
console.log(this[myProp]); // 42
}
};
这时因为myProp是Symbol值,导致第三方无法获取到它们,因此达到了私有属性的效果。
目前处于stage-1
,但是babel
未支持的一个提案,方法是在属性名之前,使用#表示私有:
class Point {
#x;
constructor(x = 0) {
#x = +x;
}
get x() { return #x }
set x(value) { #x = +value }
}
静态属性
同样的,在stage-3的新写法大大方便了静态属性的表述:
// ES6
class Foo {
}
Foo.prop = 1;
// stage-3
class Foo {
static prop = 1;
}
getter 和 setter
与ES5一样,在Class内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class MyClass {
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;// setter: 123
inst.prop;// 'getter'
方法
定义类的方法时,方法之间不需要逗号分隔,加了会报错,方法名可以使用变量,不过要放在[ ]
内,不然会被解析成string
。
另外,类的内部所有定义的方法,都是不可枚举的,这一点与ES5的行为不一致。
var method = "func";
class Point {
constructor(x, y) {}
//方法之间没有逗号
toString() {}
[method](){}//方法名叫func
}
Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
私有方法
ES6本身没提供私有方法的实现,但是我们可以使用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值,导致第三方无法获取到它们,因此达到了私有方法的效果。
静态方法
如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
同样的,父类的静态方法,可以被子类继承。
继承
类之间的继承通过extends
关键字实现:
class ColorPoint extends Point {}
ColorPoint
继承了Point
的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point
。
在部署内部代码的时候,使用super
可以调用父类的属性:
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类没有自己的this
对象,而是继承父类的this
对象,然后对其进行加工。如果不调用super
方法,子类就得不到this
对象。所以ES6的继承机制是,先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。
不过子类没有定义constructor
方法的话,默认会部署constructor(...args) {super(...args);}
几个有用的属性和方法
new.target
new.target
在构造函数中返回new
命令作用于的那个构造函数:
function Person() {
console.log(new.target);
}
new Person();
Person();
/*
[Function: Person]
undefined
*/
可以看出,如果构造函数不是通过new
命令调用的,new.target
会返回undefined
,因此这个属性可以用来确定构造函数是怎么调用的。
Class
内部使用new.target
会返回当前Class
,当子类继承父类时,new.targer
会返回子类,利用这个特点,就可以写出必须继承才能使用使用的类:
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); // 正确
name
name
属性总是返回紧跟在class
关键字后面的类名。
class Point {}
Point.name // "Point"
Object.getPrototypeOf()
Object.getPrototypeOf
方法可以用来从子类上获取父类。
class A {}
class B extends A {}
Object.getPrototypeOf(B) === A;//true
Mixin模式
Mixin模式
指的是,将多个类的接口“混入”(mix in)另一个类。
function mix(...mixins) {
class Mix {}
for (let mixin of mixins) {
copyProperties(Mix, mixin);
copyProperties(Mix.prototype, mixin.prototype);
}
return Mix;
}
function copyProperties(target, source) {
for (let key of Reflect.ownKeys(source)) {
if ( key !== "constructor"
&& key !== "prototype"
&& key !== "name"
) {
let desc = Object.getOwnPropertyDescriptor(source, key);
Object.defineProperty(target, key, desc);
}
}
}
上面代码的mix函数,可以将多个对象合成为一个类。使用的时候,只要继承这个类即可。
class DistributedEdit extends mix(Loggable, Serializable) {
// ...
}
需要注意的时mix
得到的类的构造函数是空函数,并且定义的实例属性都会全部丢失。