如何在JavaScript中修改$(document).ajaxStop函数以设置localStorage？

问题说明 #

我想修改$(document).ajaxStop函数，让它在被调用时自动设置localStorage变量，但不想改动它原本执行的逻辑。我试过两种方法都没成功：

第一种方法：

origstop = $(document).ajaxStop;
$(document).ajaxStop = function(fun) {
        localStorage.var = 'nice';
        origstop(fun);
}

这种方法无效，因为函数会立刻恢复原状，调用$(document).ajaxStop时拿到的还是原来的函数。

第二种方法是在StackOverflow找到的，但调用时触发错误Uncaught TypeError: Cannot read properties of undefined (reading 'length')，而且我也搞不懂原理：

(function($){
    var jqAttr = $.fn.attr;
    $.fn.attr = function( elem, name, value, pass ) {
        if (name === 'ajaxStop') {
            localStorage.var = 'nice';
            jqAttr(elem, name, value, pass);
        } else {
            jqAttr(elem, name, value, pass);
        }
    };
}(jQuery));

正确实现方式 #

原理说明 #

ajaxStop是挂载在jQuery原型（$.fn）上的方法，所有jQuery实例（包括$(document)）都会继承这个方法。直接修改实例的ajaxStop属性不会持久生效，因为访问时会优先从原型获取；而第二种方法混淆了attr（处理DOM属性）和ajaxStop（事件绑定）的用途，完全不相关。

正确的做法是包装jQuery原型上的ajaxStop方法，在保留原逻辑的同时插入自定义操作：

全局生效代码示例 #

// 先保存原始的ajaxStop方法
const originalAjaxStop = $.fn.ajaxStop;

// 重写原型上的ajaxStop方法
$.fn.ajaxStop = function(callback) {
    // 执行自定义逻辑：设置localStorage
    localStorage.setItem('var', 'nice');
    
    // 调用原始方法，确保this指向当前jQuery实例，维持原有逻辑
    return originalAjaxStop.call(this, callback);
};

仅针对$(document)生效的版本 #

如果不想全局修改所有jQuery实例的ajaxStop，只想针对$(document)生效，可以这样写：

const $doc = $(document);
// 保存实例的ajaxStop方法引用
const originalDocAjaxStop = $doc.ajaxStop;

// 重写该实例的ajaxStop方法
$doc.ajaxStop = function(callback) {
    localStorage.setItem('var', 'nice');
    // 调用原始方法时绑定正确的上下文
    return originalDocAjaxStop.call(this, callback);
};

关键要点 #

• 使用call方法确保原始方法的this指向当前jQuery实例，避免上下文丢失导致的错误。
• 返回原始方法的返回值，维持jQuery的链式调用特性。
• 用localStorage.setItem替代直接赋值localStorage.var，这是操作localStorage的标准写法，避免潜在的属性名冲突问题。

内容的提问来源于stack exchange，提问作者user9102437