ES6为了更接近传统语言的写法,引入了Class的概念,作为对象的模板。
基本上,ES6的class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
ES5的写法:
function Person(name) {
this.name = name
}
Person.prototype.sayHello = () = > {
alert('hello' + this.name)
};
ES6的class的写法
class Person {
constructor(name) {
this.name = name
}
sayHello() {
alert('hello' + this.name)
}
}
let p1 = new Person('Jay')
注意,定义“类”的方法的时候,前面不需要加上
function
这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
ES6的类,完全可以看作构造函数的另一种写法。类的数据类型就是函数,类本身就指向构造函数。
使用的时候,也是直接对类使用new
命令,跟构造函数的用法完全一致。
构造函数的prototype
属性,在ES6的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype
属性上面。在类的实例上面调用方法,其实就是调用原型上的方法。
由于类的方法都定义在prototype
对象上面,所以类的新方法可以添加在prototype
对象上面。Object.assign
方法可以很方便地一次向类添加多个方法。
class Point {
constructor(){
// ...
}
}
Object.assign(Point.prototype, {
toString(){},
toValue(){}
});
类的内部所有定义的方法,都是不可枚举的(non-enumerable)。
class Point {
constructor(x, y) {
// ...
}
toString() {
// ...
}
}
Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
这一点与ES5的行为不一致。
var Point = function (x, y) {
// ...
};
Point.prototype.toString = function() {
// ...
};
Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]
采用ES5的写法,toString
方法就是可枚举的。
constructor
constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。
一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加。
class Point {
}
// 等同于
class Point {
constructor() {}
}
constructor
方法默认返回实例对象(即this
),类必须使用new
调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new
也可以执行。
类的实例对象
与ES5一样,实例的属性除非显式定义在其本身(即定义在this
对象上),否则都是定义在原型上(即定义在class
上)。
与ES5一样,类的所有示例共享一个原型对象
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__ === p2.__proto__
//true
__proto__
并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,不建议在生产中使用该属性。可以使用Object.getPrototypeOf
方法来获取实例对象的原型,然后再来为原型添加方法/属性。
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
var p3 = new Point(4,2);
p3.printName() // "Oops"
上面代码在p1的原型上添加了一个printName
方法,由于p1
的原型就是p2
的原型,因此p2
也可以调用这个方法。而且,此后新建的实例p3
也可以调用这个方法。
这意味着,使用实例的__proto__
属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。
Class表达式
与函数一样,类也可以使用表达式的形式定义。
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
需要注意的是,这个类的名字是MyClass
而不是Me
,Me
只在Class的内部代码可用,指代当前类。
如果类的内部没用到的话,可以省略Me
,也就是可以写成下面的形式。
const MyClass = class { /* ... */ };
采用Class表达式,可以写出立即执行的Class。
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}('张三');
person.sayName(); // "张三"
不存在变量提升
类不存在变量提升,这与ES5不同
new Foo(); // ReferenceError
class Foo {}
私有方法和私有属性
ES6不提私私有方法,只能通过变通方法模拟实现。
一种做法是在命名上加以区别,但是这种命名是不保险的,在类的外部,还是可以调用到这个方法。
class Widget {
// 公有方法
foo (baz) {
this._bar(baz);
}
// 私有方法
_bar(baz) {
return this.snaf = baz;
}
// ...
}
另一种方法就是索性将私有方法移出模块,因为模块内部的所有方法都是对外可见的。
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
值,导致第三方无法获取到它们,因此达到了私有方法和私有属性的效果。
this
的指向
类的方法内部如果含有this
,默认指向类的实例,但是必须非常小心,如果单独使用该方法,很可能报错
const Person = class p {
constructor(name) {
this.name = name;
}
say() {
alert(this.name)
}
};
let p1 = new Person('Jay');
const {say} = p1;
say(); // Uncaught TypeError: Cannot read property 'name' of undefined
因为这时候say()
方法的this
指向了调用的环境,即window
,所以会报错,如果想要正常使用必须传入this
say.call(p1)
为了解决这个问题,可以在构造方法constructor
中绑定this
:
constructor(name) {
this.say = this.say.bind(this)
}
还有两种方法是使用箭头函数和Proxy
name
属性
class继承了函数的许多特性,包括name
属性
class Point {}
Point.name // "Point"
name
属性总是返回紧跟在class
关键字后面的类名。
Class的取值函数(getter
)和存值函数(setter
)
与 ES5 一样,在“类”的内部可以使用get
和set
关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
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'
存值函数和取值函数是设置在属性的Descriptor
对象上的。
Class的静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
通过static
关键字定义的方法,没有定义在类的prototype
上,而是直接定义了在类上,所以不会被实例继承
注意,如果静态方法包含this
关键字,这个this
指的是类,而不是实例。
class Foo {
static bar () {
this.baz();
}
static baz () {
console.log('hello');
}
baz () {
console.log('world');
}
}
Foo.bar() // hello
父类的静态方法,可以被子类继承。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
}
Bar.classMethod() // 'hello'
Class的静态属性
静态属性和静态方法一样,都指的是Class本身的属性,即Class.propName
,不会被实例对象(this
)所继承
class Foo {
}
Foo.prop = 1;
Foo.prop // 1
目前,只有这种写法可行,因为ES6明确规定,Class内部只有静态方法,没有静态属性。
// 以下两种写法都无效
class Foo {
// 写法一
prop: 2
// 写法二
static prop: 2
}
Foo.prop // undefined