js如何重写自带的方法

在JavaScript中，重写自带的方法可以通过扩展原型、直接重写方法等方式来实现，关键点在于理解原型链、方法绑定、继承等核心概念。例如，重写数组的push方法，我们可以通过修改Array.prototype来实现。扩展原型、直接重写方法、理解继承机制是实现这种功能的关键，下面我们将详细讨论这些方法。

一、扩展原型

1. 理解JavaScript中的原型链

JavaScript是一种基于原型的语言，这意味着对象可以直接从其他对象继承属性和方法。每个对象都有一个__proto__属性，指向其构造函数的原型对象。例如：

const obj = {};
console.log(obj.__proto__ === Object.prototype); // true

2. 修改原型上的方法

为了重写内置方法，我们可以直接修改原型对象。例如，重写Array.prototype.push方法：

Array.prototype.push = function(...items) {
    console.log('Custom push method called');
    return Array.prototype.push.apply(this, items);
};
const arr = [1, 2, 3];
arr.push(4); // Custom push method called
console.log(arr); // [1, 2, 3, 4]

在这个例子中，我们首先保存了原始的push方法，然后在自定义的push方法中调用原始方法，以确保我们不改变其原始行为，同时添加了自定义逻辑。

二、直接重写方法

1. 理解方法重写的基础

直接重写方法是指不通过修改原型对象，而是直接在对象实例上定义新的方法。例如：

const arr = [1, 2, 3];
arr.push = function(item) {
    console.log('Directly overridden push method called');
    return Array.prototype.push.call(this, item);
};
arr.push(4); // Directly overridden push method called
console.log(arr); // [1, 2, 3, 4]

这种方法适用于特定对象实例，而不会影响其他对象。

2. 重写全局方法

有时，我们可能需要重写全局方法，比如alert。可以通过如下方式实现：

const originalAlert = window.alert;
window.alert = function(message) {
    console.log('Custom alert:', message);
    originalAlert(message);
};
alert('Hello, World!'); // Custom alert: Hello, World!

三、理解继承机制

1. 继承与方法重写

在JavaScript中，继承机制允许我们创建一个新的类，并重写其父类的方法。例如：

class Animal {
    speak() {
        console.log('Animal sound');
    }
}
class Dog extends Animal {
    speak() {
        console.log('Bark');
    }
}
const dog = new Dog();
dog.speak(); // Bark

在这个例子中，Dog类继承了Animal类，并重写了speak方法。

2. 使用super关键字

在重写方法时，有时需要调用父类的方法，可以使用super关键字：

class Animal {
    speak() {
        console.log('Animal sound');
    }
}
class Dog extends Animal {
    speak() {
        super.speak();
        console.log('Bark');
    }
}
const dog = new Dog();
dog.speak(); 
// Animal sound
// Bark

四、实际应用场景

1. 日志记录

重写方法可以用于添加日志记录功能。例如，重写console.log方法：

const originalLog = console.log;
console.log = function(...args) {
    originalLog.apply(console, [`[${new Date().toISOString()}]`, ...args]);
};
console.log('Hello, World!'); // [2023-10-10T00:00:00.000Z] Hello, World!

2. 安全性检查

可以重写方法添加安全性检查。例如，重写fetch方法：

const originalFetch = window.fetch;
window.fetch = function(...args) {
    // 添加安全性检查逻辑
    if (!args[0].startsWith('https://')) {
        throw new Error('Insecure request');
    }
    return originalFetch.apply(this, args);
};
fetch('http://example.com'); // Error: Insecure request

五、注意事项

1. 避免破坏性更改

在重写方法时，应尽量避免破坏原始功能。例如，在重写数组方法时，确保返回值与原始方法一致：

Array.prototype.push = function(...items) {
    console.log('Custom push method called');
    return Array.prototype.push.apply(this, items);
};

2. 保持兼容性

确保自定义方法与原始方法的参数和返回值保持一致。例如：

const originalAlert = window.alert;
window.alert = function(message) {
    console.log('Custom alert:', message);
    originalAlert(message);
};

3. 使用项目管理系统

在团队协作中，重写方法的变更应记录在项目管理系统中，如研发项目管理系统PingCode或通用项目协作软件Worktile，以确保团队成员了解变更并进行必要的代码审查。

六、代码示例

1. 重写Array.prototype.push

Array.prototype.push = function(...items) {
    console.log('Custom push method called');
    return Array.prototype.push.apply(this, items);
};
const arr = [1, 2, 3];
arr.push(4); // Custom push method called
console.log(arr); // [1, 2, 3, 4]

2. 重写window.alert

const originalAlert = window.alert;
window.alert = function(message) {
    console.log('Custom alert:', message);
    originalAlert(message);
};
alert('Hello, World!'); // Custom alert: Hello, World!

3. 继承与方法重写

class Animal {
    speak() {
        console.log('Animal sound');
    }
}
class Dog extends Animal {
    speak() {
        super.speak();
        console.log('Bark');
    }
}
const dog = new Dog();
dog.speak(); 
// Animal sound
// Bark

结论

通过扩展原型、直接重写方法、理解继承机制，我们可以有效地重写JavaScript中的自带方法，以满足特定需求。在实际应用中，应遵循最佳实践，确保兼容性和避免破坏性更改。团队协作时，使用研发项目管理系统PingCode或通用项目协作软件Worktile记录变更，有助于提高代码质量和团队效率。