前端碰撞室之监听数组的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

触发自定义事件

    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());