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中最常用的继承方式,因为它结合了原型链继承和构造函数继承的优点,既能继承属性,又能继承方法。

相关推荐
不可求~3 小时前
多模型路由怎么落地:把任务分流写进项目的最小实现
java·前端·数据库
AC赳赳老秦6 小时前
公开图片 OCR 数据提取:OpenClaw 合规采集公开信息图,识别文字与表格并转化为结构化数据
java·大数据·前端·数据库·python·php·openclaw
谢慧琼6 小时前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
weixin_431600447 小时前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
IT_陈寒7 小时前
Python线程池吞了异常还不告诉我,这谁顶得住啊
前端·人工智能·后端
计算机魔术师8 小时前
同样是AI辅助建造,为什么有的游戏三个月就烂尾了?
前端
用户921080262868 小时前
0. 做 Agent 产品,前端 AI 组件框架怎么选?
前端
拾年2759 小时前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +
前端·javascript·react.js
Jackson__9 小时前
面试官:如何在老项目中使用新框架,并实现通信?
前端·javascript·面试
拾年2759 小时前
React Hooks 保姆级教程:把组件想象成失忆的打工人,4 个 Hook 带你原地起飞
前端·javascript·react.js