使用Object.defineProperty劫持对象方法为何会触发两次执行

在JavaScript开发中，使用Object.defineProperty来劫持对象方法是一种常见的操作技巧。然而，不少开发者在实践过程中遇到一个令人困惑的现象：劫持的方法会触发两次执行。下面我们就来深入探究其中的原因。

我们需要明确Object.defineProperty的基本原理。它是ES5中定义对象属性的一个方法，可以精确地控制对象属性的配置，包括值、可枚举性、可写性以及存取描述符等。当我们使用它来劫持对象方法时，实际上是重新定义了该方法对应的属性描述符。

以一个简单的例子来说明，假设有一个对象obj，包含一个方法sayHello：

const obj = {
    sayHello: function() {
        console.log('Hello');
    }
};
Object.defineProperty(obj, 'sayHello', {
    value: function() {
        console.log('Before');
        // 这里需要调用原始方法
        const original = obj.sayHello;
        original.apply(this, arguments);
        console.log('After');
    },
    writable: true,
    enumerable: true,
    configurable: true
});
obj.sayHello();

在上述代码中，我们期望劫持sayHello方法，并在其前后添加额外的逻辑。但运行代码后，可能会发现控制台输出了两次Before、Hello和After。

这是为什么呢？原因在于我们在劫持方法内部重新获取并调用原始方法时，产生了递归调用。当我们在新定义的value函数中通过obj.sayHello获取原始方法时，此时obj.sayHello已经指向了我们新定义的劫持方法。当调用original.apply(this, arguments)时，实际上又一次触发了劫持方法的执行，从而导致两次输出。

要解决这个问题，我们可以在劫持之前先保存原始方法的引用，避免在劫持方法内部通过对象属性名获取原始方法，如下：

const obj = {
    sayHello: function() {
        console.log('Hello');
    }
};
const originalSayHello = obj.sayHello;
Object.defineProperty(obj, 'sayHello', {
    value: function() {
        console.log('Before');
        originalSayHello.apply(this, arguments);
        console.log('After');
    },
    writable: true,
    enumerable: true,
    configurable: true
});
obj.sayHello();

通过这种方式，我们成功地避免了递归调用，确保劫持的方法只执行一次。理解这个原理对于正确使用Object.defineProperty进行对象方法劫持至关重要，能够帮助开发者更好地掌控代码逻辑，避免不必要的错误。