当前位置:首页 > JavaScript

实现一种js原型继承

2026-03-02 02:19:47JavaScript

原型继承的基本概念

在JavaScript中,原型继承是通过原型链实现的。每个对象都有一个原型(__proto__),指向另一个对象。当访问对象的属性或方法时,如果对象本身没有,会沿着原型链向上查找。

构造函数模式

通过构造函数和prototype属性实现继承。

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;
}
Child.prototype = Object.create(Parent.prototype); // 继承方法
Child.prototype.constructor = Child; // 修正构造函数指向
Child.prototype.sayAge = function() {
  console.log(this.age);
};

const child = new Child('Alice', 10);
child.sayName(); // "Alice"
child.sayAge(); // 10

Object.create()实现纯净继承

直接基于已有对象创建新对象,无需构造函数。

const parent = {
  name: 'Parent',
  sayName() {
    console.log(this.name);
  }
};

const child = Object.create(parent);
child.name = 'Child';
child.sayName(); // "Child"

ES6 class语法

使用extends关键字简化原型继承。

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

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

const child = new Child('Bob', 12);
child.sayName(); // "Bob"
child.sayAge(); // 12

注意事项

  • 使用Object.create()时需手动修正constructor属性。
  • ES6 class本质仍是原型继承的语法糖,但更清晰易读。
  • 避免直接修改__proto__属性,优先使用标准方法。

实现一种js原型继承

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

相关文章

js实现

js实现

JavaScript 实现方法 JavaScript 是一种广泛使用的编程语言,适用于网页开发、服务器端编程以及移动应用开发。以下是几种常见的 JavaScript 实现方法: 网页交互功能 使用…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

vue实现js休眠

vue实现js休眠

Vue 中实现 JavaScript 休眠 在 Vue 中实现 JavaScript 休眠通常需要使用异步方式,以避免阻塞主线程。以下是几种常见方法: 使用 setTimeout 和 Promis…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div c…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…