【Web前端问题】如何理解es6中的class,以及class中的constructor函数

看了一些书,书中说JavaScript没有类的概念,后来es6中引入class语法,但是并没有充分理解class,很多人说这只是一个语法糖,没能很好的解决面向对象的问题。

在构建react的时候有如下写法

class Tabs extend Component{

constructor(props){

super(props)

}

}

请同时解释一下super的意思

回答:

首先,“语法糖”的意思是现有技术本可以实现,但是采用某种写法会更加简洁优雅。最常见的就是声明对象采用的就是语法糖 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中进行自己的改造。

回答:

Image

回答:

注意这里使用extends而不是extend关键字;另外这个super()在子类constructor构造方法中是为了获取this上下文环境,所以如果在constructor中使用到this,必须在使用this之前调用super(),反之不在constructor中使用this则不必调用super()

以上是 【Web前端问题】如何理解es6中的class,以及class中的constructor函数 的全部内容, 来源链接: utcz.com/a/139798.html

回到顶部