1、在ES6中,我们可以通过Class创建类。
class Box {
constructor(value) {
this.value = value;
}
getValue() {
return this.value;
}
}
const box = new Box(666)
2、在ES6之前是怎么做的呢?
function Box (value) {
this.value = value
}
Box.prototype.getValue = function () {
return this.value
}
const box = new Box(666)
以上两种方式实质上是完全相等的。
那么问题来了,以上两种方式是如何实现继承的呢?
1、在ES6中非常简单,如下所示:
class Parent {
constructor() {
this.name = 'parent';
}
sayHello() {
console.log('Hello, I am ' + this.name);
}
}
class Child extends Parent {
constructor() {
// super 指向的是父类的 constructor
super();
this.name = 'child';
}
}
const child = new Child();
child.sayHello(); // 输出 'Hello, I am child'
2、在ES6之前又是怎么做的呢?
function Parent(name) {
this.name = name;
}
Parent.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
};
function Child(name, age) {
Parent.call(this, name); // 继承实例方法和属性
this.age = age;
}
// 此时子还没有继承父的原型方法,所以我们需要将子构造函数的原型指向父构造函数的实例
Child.prototype = new Parent();
// 这时候又有问题了,子的constructor这时候指向了父构造函数,所以我们需要重新将其指向子构造函数
Child.prototype.constructor = Child
const child = new Child('Tom', 10);
child.sayHello(); // 输出 'Hello, I am Tom'