首先，“语法糖”的意思是现有技术本可以实现，但是采用某种写法会更加简洁优雅。最常见的就是声明对象采用的就是语法糖 var a={b:111}。
ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
等同于
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
在constructor中必须调用 super方法，子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。super代表了父类构造函数。对于你的实例相当于执行Component(props)。但是注意，此处this指向 子类。更严谨的是相当于
Component.prototype.constructor.call(this,props)。
至于为什么一定要有super？可以很容易想得到，先有父才有子嘛。super继承父类属性，在constructor中进行自己的改造。
另一个例子
假设在es5要实现继承,首先定义一个父类:
//父类
function sup(name) {
this.name = name
}
//定义父类原型上的方法
sup.prototype.printName = function (){
console.log(this.name)
}
现在再定义他sup的子类，继承sup的属性和方法:
function sub(name,age){
sup.call(this,name) //调用call方法,继承sup超类属性
this.age = age
}
sub.prototype = new sup //把子类sub的原型对象指向父类的实例化对象，这样即可以继承父类sup原型对象上的属性和方法
sub.prototype.constructor = sub //这时会有个问题子类的constructor属性会指向sup，手动把constructor属性指向子类sub
//这时就可以在父类的基础上添加属性和方法了
sub.prototype.printAge = function (){
console.log(this.age)
}
这时调用父类生成一个实例化对象:
let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20
这就是es5中实现继承的方法。
而在es6中实现继承:
class sup {
constructor(name) {
this.name = name
}
printName() {
console.log(this.name)
}
}
class sub extends sup{
constructor(name,age) {
super(name)
this.age = age
}
printAge() {
console.log(this.age)
}
}
let jack = new sub('jack',20)
jack.printName() //输出 : jack
jack.printAge() //输出 : 20
对比es5和es6可以发现在es5实现继承，在es5中实现继承:
首先得先调用函数的call方法把父类的属性给继承过来
通过new关键字继承父类原型的对象上的方法和属性
最后再通过手动指定constructor属性指向子类对象
而在es6中实现继承，直接调用super(name)，就可以直接继承父类的属性和方法，所以super作用就相当于上述的实现继承的步骤，不过es6提供了super语法糖，简单化了继承的实现
网友评论