当前位置:首页 > JavaScript

js实现prototype扩展js

2026-03-02 04:03:13JavaScript

在 JavaScript 中扩展原型(prototype)

JavaScript 的原型(prototype)机制允许为现有对象类型添加新的方法或属性。通过扩展原型,所有该类型的实例都能共享这些新增的功能。

扩展内置对象的原型

为内置对象(如 ArrayString)添加新方法:

Array.prototype.last = function() {
  return this[this.length - 1];
};

const arr = [1, 2, 3];
console.log(arr.last()); // 输出: 3

扩展自定义构造函数的原型

为自定义构造函数添加方法:

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}`;
};

const person = new Person('Alice');
console.log(person.greet()); // 输出: Hello, my name is Alice

注意事项

扩展内置对象原型可能会引起命名冲突或意外行为,需谨慎使用。建议仅在必要时扩展自定义对象的原型。

替代方案:使用类(ES6)

现代 JavaScript 可以使用 class 语法更清晰地扩展功能:

js实现prototype扩展js

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

const person = new Person('Bob');
console.log(person.greet()); // 输出: Hello, my name is Bob

最佳实践

  • 避免修改内置对象的原型,除非绝对必要
  • 使用 Object.defineProperty 控制属性的可枚举性
  • 优先使用现代 class 语法替代原型操作

标签: jsprototype
分享给朋友:

相关文章

js实现复制功能

js实现复制功能

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

js实现正交

js实现正交

正交的概念 正交在数学和计算机科学中通常指两个向量垂直或线性无关。在编程中,正交性常被用于设计模块化、低耦合的系统。 向量正交判断 判断两个向量是否正交可以通过点积是否为0来实现: fun…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js实现截图

js实现截图

使用HTML2Canvas库实现截图 HTML2Canvas是一个流行的JavaScript库,可以将网页元素或整个页面转换为Canvas图像。安装方式: npm install html2canv…

js实现表单验证提交表单提交表单提交

js实现表单验证提交表单提交表单提交

表单验证与提交的实现 在JavaScript中实现表单验证并提交表单,可以通过监听表单的提交事件,进行验证后决定是否提交。以下是实现方法: 基础表单验证 通过监听表单的submit事件,阻止默认提交…

js实现vue模板

js实现vue模板

使用纯 JavaScript 实现 Vue 模板功能 要实现类似 Vue 的模板功能,可以通过以下步骤完成: 1. 数据绑定与响应式更新 通过 Object.defineProperty 或 Pr…