当前位置:首页 > JavaScript

实现一种js原型继承

2026-01-31 11:03:37JavaScript

原型继承的基本概念

原型继承是JavaScript中实现对象间共享属性和方法的重要机制。每个JavaScript对象都有一个内部链接指向另一个对象(原型),当访问对象的属性时,如果对象本身没有该属性,会沿着原型链向上查找。

构造函数与原型链

通过构造函数创建对象时,其原型对象(prototype)会被实例的__proto__属性引用。继承的本质是让子类的原型对象指向父类的实例,从而形成原型链。

实现一种js原型继承

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 调用父类构造函数
  this.age = age;
}

实现原型继承的步骤

方法1:直接继承原型
将子类的prototype指向父类的实例,但会导致父类属性被所有子类实例共享。

实现一种js原型继承

Child.prototype = new Parent(); // 继承父类原型
Child.prototype.constructor = Child; // 修复构造函数指向

方法2:使用Object.create
ES5引入的Object.create能更安全地创建原型链,避免调用父类构造函数时产生副作用。

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

方法3:ES6的class语法
ES6的classextends关键字简化了原型继承的实现,底层仍基于原型链。

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
}

注意事项

  • 构造函数修正:手动继承原型时需修正constructor属性,避免实例的constructor指向父类。
  • 方法覆盖:子类可通过重写原型方法实现多态,但需注意调用父类方法时使用super
  • 性能影响:过长的原型链会影响属性查找效率,建议层级不超过3层。

通过上述方法,可以灵活实现JavaScript的原型继承,根据需求选择适合的方案。

标签: 原型js
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML结…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…