前端碰撞室之监听数组的join方法并触发事件

大声的告诉我当你看到[1,2,3,4].join你会想到什么。 你有木有想到join是原型链上的方法呢？ 你肯定以为我要说以下解决方案 const join = Array.prototype.join; Array.prototype.join = function() { console.log("调用了join方法"); return join.apply(this); }; let arr1 = [1, 2, 3, 4], arr2 = [5, 6, 7, 8]; console.log(arr1.join()); console.log(arr2.join()); }, 非也非也，上面的特点是所有数组实例都受到了影响 如果只想指定的数组实例受影响呢？ let arr1 = [1, 2, 3, 4], arr2 = [5, 6, 7, 8]; arr1.join = function() { console.log("调用了join方法"); return Array.prototype.join.apply(this); }; console.log(arr1.join()); console.log(arr2.join()); 体会下面写法 let arr1 = [1, 2, 3, 4], arr2 = [5, 6, 7, 8]; function wrapper(arr, name) { let origin = arr[name]; return function() { console.log("调用了join方法"); return origin.apply(this); }; } arr1.join = wrapper(arr1, "join"); console.log(arr1.join()); console.log(arr2.join()); origin === Array.prototype.join 为 true 气球.gif 触发自定义事件 let arr1 = [1, 2, 3, 4], arr2 = [5, 6, 7, 8]; const JOIN_EVENT_NAME = "array.join"; arr1.join = function() { console.log("调用了join方法"); window.dispatchEvent(new Event(JOIN_EVENT_NAME)); return Array.prototype.join.apply(this); }; window.addEventListener(JOIN_EVENT_NAME, function() { console.log(`触发了${JOIN_EVENT_NAME}`); }); console.log(arr1.join()); console.log(arr2.join()); 灵感来源:阿里P7：你了解路由吗？

本文章由javascript技术分享原创和收集