javascript - 函数引用在js中是如何工作的？

Question

最近我一直在尝试使用 pixi.js 来做一些有趣的项目，但我遇到了一个我根本不理解的概念。引用一些代码:

PIXI.loader
.add([
"images/one.png",
"images/two.png",
"images/three.png"
])
.on("progress", loadProgressHandler)
.load(setup);

function loadProgressHandler(loader, resource) {
console.log(`loading: ${resource.url}`);
};

由于我们只在事件监听器中传递对它的引用，因此如何将这些参数(加载程序、资源)传递给函数？有人可以展示该概念下的通用实现吗？

Answer 1

假设我们有一个名为 callMe 的函数，它只打印给定的数字:

function callMe(number) {
    console.log(`I'm number: ${number}`);
}
callMe(2);

我们可以为同一函数创建一个新变量，并调用新创建的变量。这是可能的，因为它指向我们之前创建的相同函数。

const callMeAswell = callMe;
callMe(3);
callMeAswell(4);

简而言之，这就是 PIXI 加载器内部发生的事情，只不过它存储在其他地方。让我们创建一个类来存储数字和我们要调用的函数:

function SomeLoader(){
    this.numbers = []; // list of numbers we want to store for later usage
    this.func = null; // function that we want to call when we're done loading
}
SomeLoader.prototype.add = function(number) {
    this.numbers.push(number); // add the number to the list of numbers
}
SomeLoader.prototype.on = function(func) {
    this.func = func; // just store the function for now, but don't do anything with it
}
SomeLoader.prototype.pretendToLoad = function() {
    for(const number of this.numbers) {
        this.func(number); // now we're going to call the function that we've stored (callMe in the example below)
    }
}

const loader = new SomeLoader();
loader.add(5);
loader.add(6);
loader.on(callMe);
loader.pretendToLoad();

或者流畅地:

function SomeLoader(){
    this.numbers = [];
    this.func = null;
}
SomeLoader.prototype.add = function(number) {
    this.numbers.push(number);
    return this;
}
SomeLoader.prototype.on = function(func) {
    this.func = func;
    return this;
}
SomeLoader.prototype.pretendToLoad = function() {
    for(const number of this.numbers) {
        this.func(number);
    }
}

new SomeLoader()
    .add(7)
    .add(8)
    .on(callMe)
    .pretendToLoad();

看起来和 PIXI 加载器几乎一样，不是吗？ :)