ES5 和 ES6 在类和继承的不同,举例如下:
ES5 的类和继承: function Person(name){ this.name = name; } Person.prototype.showName = function(){ return this.name; }; var ops = new Person('娃哈哈'); console.log(ops.showName()); // 娃哈哈
ES6 的类和继承: class Person{ // Person类 它也是一个函数 constructor(name){ // 构造函数 this.name = name; } showName(){ return this.name; } } var p1 = new Person('娃哈哈'); console.log(p1.showName()); // 娃哈哈
constructor的中文意思就是构造,他在这里代表的就是构造函数,那么class是一个类也是一个函数,只不过ES6标准是把这个函数包装成了一个class的写法而已,在new一个实例的时候,构造函数自动执行。
Class 可以通过 extends 关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多,举例如下:
ES5 之前的写法: function Person(name){ // 父类 this.name = name; } Person.prototype.showName = function(){ return this.name; }; function SubPerson(name,job){ // 子类 Person.call(this,name); // 子类继承父类的属性 需要将this指向父类中的name this.job = job; // job是子类自己的属性 } SubPerson.prototype = new Person(); // 子类继承父类的方法 var p1 = new SubPerson('娃哈哈'); console.log(p1.name); // 娃哈哈 // console.log(p1.showName()); // 娃哈哈
ES6 有Class类之后的写法: class Person{ constructor(name){ this.name = name; } showName(){ return this.name; } } class SubPerson extends Person{ constructor(name,job){ super(name); // 指向父类的构造函数 this.job = job; } showJob(){ return this.job; } } var p1 = new SubPerson('娃哈哈','喜洋洋'); console.log(p1.name); // 娃哈哈 // console.log(p1.showName()); // 娃哈哈 // console.log(p1.job); // 喜洋洋
estends 就是继承的意思,super 就是指向父类的构造函数,指代了整个prototype对象或者_proto_指针指向的对象。
如果在子类中也写入showName方法,和父类中的方法重名,这样就会覆盖父类的,倘若不想覆盖而是想引用父类的showName方法,那么就在子类的showName方法中通过super来调用父类的showName:
super.showName
该文引用了https://www.jianshu.com/p/129976ab0015,用作学习记录