添加将功能添加到现有自定义航点功能的功能

Question

您好，我创建了一个自定义航点功能，该功能效果很好，但是我希望能够向其中添加功能。

这是工作中的自定义航点功能：

function createWaypoint (triggerElementId, animatedElement, className, offsetVal) {
    var waypoint = new Waypoint({
        element: document.getElementById(triggerElementId),
        handler: function(direction) {
            if (direction === 'down') {
                jQuery(animatedElement).addClass(className);
                this.destroy();
            }
        },
        offset: offsetVal
    });
}

//Waypoint Instances
createWaypoint("x", ".y", "z", 500);

接下来，我想添加将功能添加到if语句的功能，这是我想出的：

function createWaypoint (triggerElementId, animatedElement, className, offsetVal, functionName) {
    var waypoint = new Waypoint({
        element: document.getElementById(triggerElementId),
        handler: function(direction) {
            if (direction === 'down') {
                jQuery(animatedElement).addClass(className);
                functionName();
                this.destroy();
            }
        },
        offset: offsetVal
    });
}

function test() {
    alert('Hello World');
}

//Waypoint Instances
createWaypoint("x", ".y", "z", 500);
createWaypoint("x", null, null, null, test);

我在第1行和第7行添加了functionName。然后，我尝试在最后一行调用它。 函数“ test”未触发，但出现错误：

未捕获的TypeError：functionName不是函数。

有人可以帮忙吗？

谢谢！

Answer 1

用试试这个.call或.apply （ 更多关于他们二 ）：

function createWaypoint (triggerElementId, animatedElement, className, offsetVal, functionName) {
    var waypoint = new Waypoint({
        element: document.getElementById(triggerElementId),
        handler: function(direction) {
            if (direction === 'down') {
                jQuery(animatedElement).addClass(className);

                if(typeof functionName === 'function') {
                    functionName.call();
                } else {
                    console.log('functionName parameter is not a function.');
                }

                this.destroy();
            }
        },
        offset: offsetVal
    });
}

function test() {
    alert('Hello World');
}

//Waypoint Instances
createWaypoint("x", ".y", "z", 500);
createWaypoint("x", null, null, null, test);

---

编辑：实际上，您应该使用functionName.call(undefined)或从您想要的功能范围传递this参数。 它可以来自handler函数的回调，也可以来自createWaypoint 。 functionName.call(this)或functionName.call(mappedThis) 。

如MDN文档所述：

thisArg —为调用函数提供的this的值。 请注意，这可能不是该方法看到的实际值：如果该方法是非严格模式下的函数，则将null和undefined替换为全局对象，并将原始值转换为对象。