如何包装一个既有的函数

涉及到知识点：.apply、.call()、...args

1、.apply
之前一直对.apply和.call一团浆糊，今天终于通过阅读别人的代码，仔细探究，搞明白了
拿Fn1.apply(obj2, [1, 2])举例，其实通俗易懂的方式，可以理解为：就是将Fn1函数的属性方法复制了一份到obj2上，并且以obj2调用了已经复制过来的Fn1。
注意：.call和apply，只继承方法，不会继承原型

apply() 方法调用一个具有给定this值的函数，以及作为一个数组或[类似数组对象]提供的参数。
注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。
语法：func.apply(thisArg, [argsArray])
具体可以查看(MDN)[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply]文档

2、...args

描述：如果函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。
剩余参数和 arguments对象的区别
剩余参数和 [arguments](https://developer.mozilla.org/zh-cn/JavaScript/Reference/Functions_and_function_scope/arguments "arguments")对象之间的区别主要有三个：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性 （如callee属性）。

业务场景：

我想要在微信小程序自动化埋点，需要在.js文件中的函数执行时，上报信息给服务器。
拿生命周期的onLoad方法举例，我们想在所有页面的onLoad内部页面代码执行前，加一点代码进去，这个时候就得通过封装的方式，改造已有的onLoad函数。

能代表思路的代码：

let page = {
        class1(options) {
            console.log(options)
        },
    }

    function addMethod() {
        console.log('我是新增函数')
    }

    function wrapperMethod(fn, newFn) {
        const oldFn = fn;
        fn = function _aa(...args) {
            oldFn.apply(this, args);
            newFn();
        }
    }

    wrapperMethod(page.class1, addMethod);
    page.class1({
        id: '001122'
    });

控制台执行结果：

image.png

自动化埋点方案实现说明

(自动化埋点源码)[https://github.com/zhengguorong/articles/issues/34
]