ES6继承和ES5继承
-
难度: 中等
-
公司: 阿里
-
标签: JS 继承
ES6继承和ES5继承
1. ES5继承
在ES5中，继承通常是通过构造函数和原型链来实现的。基本步骤如下：
- 创建子类的构造函数。
- 子类的构造函数中调用父类的构造函数。
- 将子类的原型指向父类的实例。
代码示例：
function Parent() {
this.name = 'parent';
}
Parent.prototype.sayHello = function() {
console.log('Hello from ' + this.name);
};
function Child() {
Parent.call(this); // 继承Parent的构造函数
this.age = 10;
}
// 继承Parent的原型
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var child = new Child();
child.sayHello(); // 输出: Hello from parent
常见的应用场景：
- 当需要复用父类的方法，同时扩展新的属性或方法时。
- 当需要实现多态时，即子类对象可以被当作父类对象使用。
常见的错误回答案例：
- 错误地认为
Child.prototype = Parent.prototype可以实现继承，这会导致所有子类实例共享同一个原型，而不是各自拥有独立的原型。 - 忘记在子类构造函数中调用
Parent.call(this)，导致子类实例无法访问父类的属性。
2. ES6继承
ES6引入了class语法，使得继承更加直观和易于理解。基本步骤如下：
- 使用
extends关键字定义子类。 - 在子类的构造函数中使用
super调用父类的构造函数。
代码示例：
class Parent {
constructor() {
this.name = 'parent';
}
sayHello() {
console.log('Hello from ' + this.name);
}
}
class Child extends Parent {
constructor() {
super(); // 调用父类构造函数
this.age = 10;
}
}
let child = new Child();
child.sayHello(); // 输出: Hello from parent
常见的应用场景：
- 当需要使用面向对象编程（OOP）的方式组织代码时。
- 当需要定义一个类，并且这个类应该继承另一个类的属性和方法时。
常见的错误回答案例：
- 错误地认为
extends关键字会创建父类的一个实例，实际上它只是继承了父类的原型。 - 忘记在子类构造函数中使用
super()调用父类的构造函数，导致父类构造函数中的代码不会被执行。
参考资料
总结
ES5和ES6都提供了继承机制，但ES6的class语法更加简洁和直观。在ES5中，继承是通过构造函数和原型链实现的，而在ES6中，继承是通过class和extends关键字实现的。理解这两种继承方式对于编写可维护和可扩展的JavaScript代码至关重要。
在使用继承时，需要注意以下几点：
- 确保在子类构造函数中正确地调用父类构造函数。
- 避免在继承链中出现循环引用，这会导致内存泄漏。
- 理解
this的指向，特别是在使用call、apply和bind时。
通过合理使用继承，可以有效地复用代码，提高代码的可读性和可维护性。
