ES5怎么实现继承

在 ES5 中,实现继承通常有以下几种方法:

1. 原型链继承

这是最常用的继承方式,通过设置一个构造函数的原型为另一个构造函数的实例来实现。

javascript 复制代码
function Parent() {
  this.name = 'Parent';
}
Parent.prototype.say = function() {
  console.log('Hello from parent');
};

function Child() {
  Parent.call(this); // 继承Parent构造函数的属性
  this.name = 'Child';
}
Child.prototype = new Parent(); // 继承Parent原型
Child.prototype.constructor = Child; // 修正构造函数指向

var childInstance = new Child();
console.log(childInstance.name); // 输出 "Child"
childInstance.say(); // 输出 "Hello from parent"

2. 构造函数继承

直接在子构造函数中调用父构造函数。

javascript 复制代码
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {
  console.log('Hello from parent');
};

function Child(name) {
  Parent.call(this, name); // 继承Parent构造函数的属性
  this.name = name;
}
var childInstance = new Child('Child');
console.log(childInstance.name); // 输出 "Child"
childInstance.say(); // 输出 "Hello from parent"

3. 组合继承(推荐)

结合原型链继承和构造函数继承的优点。

javascript 复制代码
function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.say = function() {
  console.log('Hello from parent');
};

function Child(name, age) {
  Parent.call(this, name); // 继承Parent构造函数的属性
  this.age = age;
}
Child.prototype = new Parent(); // 继承Parent原型
Child.prototype.constructor = Child; // 修正构造函数指向

Child.prototype.sayAge = function() {
  console.log('Age: ' + this.age);
};

var childInstance = new Child('Child', 10);
console.log(childInstance.name); // 输出 "Child"
childInstance.say(); // 输出 "Hello from parent"
childInstance.sayAge(); // 输出 "Age: 10"

4. 寄生式继承

创建一个空函数作为父类型,将子类型的方法添加到这个空函数的原型上。

javascript 复制代码
function Parent(name) {
  this.name = name;
}
Parent.prototype.say = function() {
  console.log('Hello from parent');
};

function inheritPrototype(Child, Parent) {
  var prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
inheritPrototype(Child, Parent);

Child.prototype.sayAge = function() {
  console.log('Age: ' + this.age);
};

var childInstance = new Child('Child', 10);
console.log(childInstance.name); // 输出 "Child"
childInstance.say(); // 输出 "Hello from parent"
childInstance.sayAge(); // 输出 "Age: 10"

这些方法各有优缺点,组合继承是ES5中最常用的继承方式,因为它结合了原型链继承和构造函数继承的优点,既能继承属性,又能继承方法。

相关推荐
前端小白۞12 小时前
vue2 md文件预览和下载
前端·javascript·vue.js
十里-12 小时前
为什么创建1x1的gif图片,和png 或者jpg图片有什么区别
前端
u***u68512 小时前
Vue云原生
前端·vue.js·云原生
OpenTiny社区12 小时前
TinyEngine 低代码实时协作揭秘:原理 +实操,看完直接用!
前端·vue.js·低代码
5***790013 小时前
Vue项目性能优化
前端·javascript·vue.js
天若有情67314 小时前
【c++】手撸C++ Promise:从零实现通用异步回调组件,支持链式调用+异常安全
开发语言·前端·javascript·c++·promise
抱琴_14 小时前
【Vue3】大屏性能优化黑科技:Vue 3 中实现请求合并,让你的大屏飞起来!
前端·vue.js
不会玩电脑的Xin.14 小时前
HTML + CSS
前端·css·html
hadage23314 小时前
--- JavaScript 的一些常用语法总结 ---
java·前端·javascript