摘要 阮一峰《 ECMAScript 6 入门 》
1. Class
1.1 class的定义
// 定义一个Animal的类(构造函数)
class Animal{
constructor(){
this.type = 'animal';
}
says(say){
console.log(this.type + ' says ' + say);
}
}
let animal = new Animal();
animal.says('hello'); // animal says hello
class Cat extends Animal{
constructor(){
super();
this.type = 'cat';
}
}
let cat = new Cat();
cat.says('hello'); // cat says hello
上面的代码首先用class
定义了一个"类"(构造函数),可以看到里面有个constructor
方法,这就是构造方法,而this则代表实例对象。简单的说,constructor
里面的属性和方法是实例对象自己的,而constructor
外定义的方法和属性则是所有实例对象所共享的。另外,方法之间不需要逗号分隔,加了会报错。
class
之间是可以通过extends
关键字实现继承,这比ES5通过修改原型而清晰和方便很多。上面定义了一个Cat类,该类通过extends
关键字,继承了Animal
的所有方法和属性。
super
关键字,它代表父类的实例,(即父类的this对象)。子类必须在constructor
方法中调用super
方法,否则新建的实例会报错。这是因为子类没有自己的实例对象,而是继承父类的实例对象,然后对其进行加工。如果不调用super
方法,子类就得不到this
对象。
ES6的继承机制,实质是先构建父类的实例对象this
(所以必须要有super
方法),然后再用子类的构造函数修改this
。
ES6的类,完全可以看作构造函数的另一种写法。
class Animal{
// ...
}
typeof Animal // "function"
Animale === Animal.prototype.constructor // true
上面的代码表明,类本身就是构造函数。
与ES5一样,实例的属性除非显示定义在本身(即定义在this
上),否则都是定义在原型上。(即定义在class
上)。
animal.hasOwnProperty('type'); // true
animal.hasOwnProperty('says'); // false
animal.__proto__.hasOwnProperty('says'); // true
1.2. class表达式
const MyClass = class Me{
getClassName(){
return Me.name;
}
上面代码使用了表达式定义了一个类。需要特别指出的是,这个类的名字是MyClass
而不是Me
,Me
只能在内部使用,代指当前类。
let inst = new MyClass();
inst.getClassName(); // Me
Me.name; // ReferenceError: Me is not defined
1.3. super关键字的详解(继承)
super
这个关键字,既可以当做函数使用,也可以当做对象使用。这两种情况的使用完全不同。
第一种情况,super
当做函数调用时,代表的是父类的构造函数。ES6要求,子类的构造函数必须执行一次super()
函数。
class A {}
class B extends A{
constructor(){
super();
}
}
上面代码中,子类B
的构造函数中的super()
,代表调用父类的构造函数。这是必须的,否则报错。
注意:super
虽然代表了父类的构造函数A
,但是返回的是子类的实例,即super
内部的this
指向B
,因此super()
在这里就相当于A.prototype.constructor.call(this)
。
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A() // A
new B() // B
上面代码中,new.target
指向当前正在执行的函数。可以看到,在super()
执行时,它指向的是子类B
的构造函数,而不是父类A
的构造函数。也就是说,super()
内部的this
指向B
。
第二种情况,super
作为对象时,在普通的方法中,指向父类的原型对象;在静态方法中,指向父类。
class A {
p(){
return 2;
}
}
class B extends A{
constructor(){
super();
console.log(super.p()); // 2
}
}
上面代码中,子类B中super.p()
,就相当于一个对象使用。这时,super
在普通方法中,指向A.prototype
,super.p()
就相当于A.prototype.p()
。
这里需要注意,由于super
指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super
调用的。
class A {
constructor() {
this.p = 2;
}
}
class B extends A {
get m() {
return super.p;
}
}
let b = new B();
b.m // undefined
上面代码中,p
是父类A
实例的属性,super.p
就引用不到它。
如果属性定义在父类的原型对象上,super
就可以取到。
class A {
constructor() {
this.x = 1;
}
}
class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3;
console.log(super.x); // undefined
console.log(this.x); // 3
}
}
let b = new B();
上面代码中,由于绑定子类的this
,所以如果通过super
对某个属性赋值,这时super
就是this
,赋值的属性会变成子类实例的属性。super.x
赋值为3
,这时等同于对this.x
赋值为3
。而当读取super.x
的时候,读的是A.prototype.x
,所以返回undefined
。
如果super
作为对象,用在静态方法之中,这时super
将指向父类,而不是父类的原型对象。
class Parent {
static myMethod(msg) {
console.log('static', msg);
}
myMethod(msg) {
console.log('instance', msg);
}
}
class Child extends Parent {
static myMethod(msg) {
super.myMethod(msg);
}
myMethod(msg) {
super.myMethod(msg);
}
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2
上面代码中,super
在静态方法之中指向父类,在普通方法之中指向父类的原型对象。
2. 字符串的扩展
2.1 for of
for(let k of 'abc'){
console.log(k); // a b c
}
2.2 includes(),startsWith(),endsWith()
传统上,JS之后indexof
,可以用来确定一个字符串是否在另一个字符串中。ES6又提供了三种方法。
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的开头。
endsWith():返回布尔值,表示参数字符串是否在源字符串的结尾。
这三个方法都支持第二个参数,表示开始搜索的位置。
var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代码表示,使用第二个参数n时,endsWith
的行为与其他两个方法有所不同。它针对前n
个字符,而其他两个方法针对从第n
个位置直到字符串结束。
网友评论