1.函数的基础

在 JavaScript 中，函数是一种特殊的对象，可以被赋值、传递和修改。

function greet() {
    console.log("Hello!");
}

greet(); // 输出：Hello!

2.函数的重写

我们可以通过重新赋值来 重写 一个函数。

function greet() {
    console.log("Hello!");
}

greet(); // 输出：Hello!

// 重写 greet 函数
greet = function () {
    console.log("Hi!");
};

greet(); // 输出：Hi!

第一次调用 greet()，输出 “Hello!”。
重写 greet 函数后，再次调用 greet()，输出 “Hi!”。

3.保存原始函数

在重写函数时，通常需要保存原始函数，以便在重写后的函数中调用它。

function greet() {
    console.log("Hello!");
}

// 保存原始函数
const originalGreet = greet;

// 重写 greet 函数
greet = function () {
    console.log("Before greeting...");
    originalGreet(); // 调用原始函数
    console.log("After greeting...");
};

greet();

输出：

Before greeting...
Hello!
After greeting...

4.应用到 Page 函数

在微信小程序中，Page 是一个全局函数，用于注册页面。我们可以通过重写 Page 函数，在页面注册时插入自定义逻辑。

// 保存原始的 Page 函数
const originalPage = Page;

// 重写 Page 函数
Page = function (obj) {
    console.log("Page is being registered...");

    // 调用原始的 Page 函数
    originalPage(obj);
};

// 注册页面
Page({
    onLoad() {
        console.log("Page loaded!");
    }
});

输出：

Page is being registered...
Page loaded!

5.扩展页面生命周期

通过重写 Page 函数，我们可以在页面生命周期中插入自定义逻辑。

// 保存原始的 Page 函数
const originalPage = Page;

// 重写 Page 函数
Page = function (obj) {
    // 保存原始的 onLoad 函数
    const originalOnLoad = obj.onLoad;

    // 重写 onLoad 函数
    obj.onLoad = function (options) {
        console.log("Before onLoad...");
        if (originalOnLoad) {
            originalOnLoad.call(this, options); // 调用原始的 onLoad 函数
        }
        console.log("After onLoad...");
    };

    // 调用原始的 Page 函数
    originalPage(obj);
};

// 注册页面
Page({
    onLoad() {
        console.log("Page loaded!");
    }
});

输出：

Before onLoad...
Page loaded!
After onLoad...

6.使用场景：加入路由守卫

let data;

function init(_data) {
    data = _data;
    let oldPage = Page; // 保存原始的 Page 函数
    Page = function (obj) {
        // 重写 onShow
        let oldOnShow = obj.onShow;
        obj.onShow = function () {
            routerBeforeEach(() => {
                if (oldOnShow) {
                    oldOnShow.call(this); // 调用原始的 onShow 函数
                }
            });
        };

        // 重写 onHide
        let oldOnHide = obj.onHide;
        obj.onHide = function () {
            routerBeforeEach(() => {
                if (oldOnHide) {
                    oldOnHide.call(this); // 调用原始的 onHide 函数
                }
            });
        };

        return oldPage(obj); // 调用原始的 Page 函数
    };
}

7.总结

• 重写函数：通过重新赋值函数，可以在函数执行前后插入自定义逻辑。
• 保存原始函数：在重写函数时，通常需要保存原始函数，以便在需要时调用它。
• 应用到 Page：通过重写 Page 函数，可以在页面生命周期中插入路由守卫逻辑。