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

参数在调用时传递给函数。

调用该函数的代码不在问题中。它是在on函数后面的某个地方完成的。

简而言之：与正常情况一样，您只是不在乎它发生的地方。

const show = value => console.log(value);
const call_callback_with_hello_world = callback => callback("Hello, world");
call_callback_with_hello_world(show);

Answer 2

可以说我们有一个名为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装载机几乎相同，不是吗？：）

Answer 3

@Quentin所说的是正确的-但是，在此添加...

该实现下的通用概念称为回调，如下所示：

function Loop(callback, index){
	callback(index);
}

function CallbackFunction(val){
	console.log(val)
}

for(var i = 0; i < 5; i++){
	Loop(CallbackFunction, i);
}

函数引用如何在js中工作？

3 个答案: