当前位置:首页 > 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中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js验证码的实现

js验证码的实现

验证码的基本实现原理 验证码(CAPTCHA)的核心目标是区分人类用户和自动化程序。JavaScript可用于生成或验证客户端验证码,但需注意纯前端验证可能被绕过,通常需结合后端验证。 纯前端验证码…