当前位置:首页 > JavaScript

js实现重写

2026-01-31 22:01:14JavaScript

实现方法一:使用 Function.prototype 重写方法

通过修改原型链上的方法实现重写。例如重写 Array.prototype.map

js实现重写

const originalMap = Array.prototype.map;
Array.prototype.map = function(callback) {
    console.log('重写后的 map 方法');
    return originalMap.call(this, callback);
};
const arr = [1, 2, 3];
arr.map(x => x * 2); // 输出:重写后的 map 方法

实现方法二:使用 Object.defineProperty 重写属性

通过属性描述符控制可写性,适合重写对象属性或方法:

js实现重写

const obj = { value: 10 };
Object.defineProperty(obj, 'value', {
    get() { return this._value * 2; },
    set(newValue) { this._value = newValue; }
});
obj.value = 5;
console.log(obj.value); // 输出:10(getter 返回值的两倍)

实现方法三:代理模式(Proxy)

利用 Proxy 拦截对象操作,实现更灵活的重写:

const target = { name: 'Alice' };
const proxy = new Proxy(target, {
    get(target, prop) {
        if (prop === 'name') return `Proxy: ${target[prop]}`;
        return target[prop];
    }
});
console.log(proxy.name); // 输出:Proxy: Alice

实现方法四:继承与覆盖

通过类继承重写父类方法:

class Parent {
    greet() { return 'Hello'; }
}
class Child extends Parent {
    greet() { return `${super.greet()} World!`; }
}
const child = new Child();
console.log(child.greet()); // 输出:Hello World!

注意事项

  • 原型链重写可能影响全局,需谨慎操作。
  • Proxy 兼容性需检查(IE 不支持)。
  • 使用 Object.defineProperty 时需注意 configurablewritable 配置。

标签: 重写js
分享给朋友:

相关文章

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现复制功能

js实现复制功能

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

elementui重写

elementui重写

重写 Element UI 组件的方法 Element UI 是一个基于 Vue.js 的组件库,重写其组件可以通过以下几种方式实现,具体取决于需求场景。 全局样式覆盖 通过修改 CSS 变量或覆盖…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(…

js实现vue路由

js实现vue路由

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

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…