ES6中的super

对象方法中的super

原型对于javascript来说非常重要，甚至可以说是javascript中最为重要的知识点。然而，很多人一看到原型就懵逼。ES5我们可以使用Object.getPrototypeOf()来返回原型对象，使用Object.setPrototypeOf()来设置原型对象。
看下面的例子：

let person = {
	getSay() {
		return 'hello'
	}
}

let tom = {
	getSay() {
		return Object.getPrototypeOf(this).getSay.call(this) + ',jack'
	}
}

Object.setPrototypeOf(tom, person); 
console.log(tom.getSay())       // hello,jack

以上代码通过 Object.setPrototypeOf(tom, person) 设置tom的原型对象为person，通过Object.getPrototypeOf(this)返回tom的原型对象person，所以Object.getPrototypeOf(this).getSay 实际上就是person.getSay，在通过call()方法将peoson中的this指向tom作用域，实现tom继承peoson。

相信很多人在看到Object.getPrototypeOf()和call()来调用原型时已经由懵逼遍傻逼的了。好在ES6中引入了super关键字来解除我们的痛苦。super引用相当于指向原型对象的指针，实际上也就是Object.getPrototypeOf(this)的值。废话少说，我们将上面的例子改变以下：

let person = {
	getSay() {
		return 'hello'
	}
}

let tom = {
	getSay() {
	           // 相当于Object.getPrototypeOf(this).getSay.call(this)
		return super.getSay() + ',jack';
	}
}

Object.setPrototypeOf(tom, person);
console.log(tom.getSay());          //  hello,jack

怎么样，是不是感觉爽了很多。不过得注意，super只能在简写的对象方法中使用。可是还有同学说我看到Object.setPrototypeOf(tom, person)我也恶心，别急，ES6都为你准备好了，请继续往下看。

class中的super

在ES6之前，javascript都不支持类的概念，开发者都是通过原型实现类似类的结构。

ES5中，我们通过在继承的函数中调用call()或者apply()方法实现继承。

function SuperType(name) {
    this.name = name;
    this.color = ["red", "blue"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
}
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

var s1 = new SubType('ren');
s1.sayName();
console.log(s1.color);           //  ["red", "blue"]

ES6中我们可以通过类，我们使用extends实现基类(SuperType)与派生类(SubType)之间的继承。在派生类的constructor中调用super()即可访问基类的构造函数。super()负责初始化this，相当于ES5中的call和apply方法。

class SuperType {
    constructor(name) {
        this.name = name;
        this.color = ["red", "blue"];
    }
    sayName() {
        alert(this.name);
    }
}
class SubType extends SuperType {
    constructor(name, age) {
    // 相当于SuperType.call(this, name);
        super(name);
        this.age = age;
    }
}
var s1 = new SubType('ren', 19);
s1.sayName();
console.log(s1.color);       //  ["red", "blue"]

Tips:

- 只可在派生类的构造函数中使用super()
- 在构造函数中访问this之前一定要调用super(),它负责初始化this。