JavaScript参数值'；变成'；传递给构造函数时未定义

我正在创建一个JavaScript组件，我正在基于jQuery结果创建该组件的实例。然而，我传递到构造函数中的DOM元素，虽然在调用代码中单步遍历循环时已填充，但在传递到构造函数时未定义

这是我的类和构造函数

export default class DeleteButton {

    /**
     * Creates an instance of DeleteButton.
     * 
     * @param {object} element The DOM element to make into a delete button.
     * 
     * @memberOf DeleteButton
     */
    constructor(element) {        
        this.id = element.getAttribute("data-id");
        if (!this.id) throw new Error("The 'data-id' attribute is required.");

        this.deleteUri = element.getAttribute("data-delete-uri");
        if (!this.deleteUri) throw new Error("The 'data-delete-uri' attribute is required.");

        $(element).click(this.confirmRemove);
    }

    confirmRemove() { // does something }
}

下面是调用代码（这是一个组件管理器，它根据URL/DOM状态等处理何时加载组件）

这将使用以下加载程序功能来确保项目已加载

/**
 * Adds an event to the onload queue.
 * 
 * @param {function} func The function to add to the queue.
 * @param {any} param1 The first (optional) parameter to the function.
 * @param {any} param2 The second (optional) parameter to the function.
 */
var AddLoadEvent = function (func, param1, param2) {
    var oldonload = window.onload;
    if (typeof window.onload !== "function") {
        window.onload = () => { func(param1, param2); };
    } else {
        window.onload = () => {
            if (oldonload) { oldonload(); }
            func(param1, param2);
        };
    }
};

module.exports = {
    add: AddLoadEvent
};

onload管理代码似乎运行良好，逐步执行代码完全符合预期，直到

document.DeleteButtons.push（newdeletebutton（this））-“this”这里是DOM元素，正如我所期望的，但是一旦调试器进入控制器，该值就没有定义

这是我遇到的一些奇怪的范围问题吗？
我现在通过放弃jQuery.each（由于它对“this”的处理方式，它似乎有严重的范围问题，将元素从数组传递到任何其他对象）。我通过使用JS forEach调用解决了这个问题，如下所示。发现jQuery的makeArray方法是关键。这与我最初使用的类似，但我的头撞在了forEach上，而不是在处理jQuery对象

renderDeleteButtons($elements) {
    $.makeArray($elements).forEach((el) => {
        document.DeleteButtons = document.DeleteButtons || [];
        document.DeleteButtons.push(new DeleteButton(el));
    });
}

这也不会伤害我的感情，因为我用“这个”做了一些奇怪的事情（为菲利克斯）

请参见Felix在
中关于“this”词法作用域的额外信息，我现在通过放弃jQuery.each（它似乎存在严重的作用域问题，因为它会干扰“this”的方式，将元素从数组传递到其他任何对象）。我通过使用JS forEach调用解决了这个问题，如下所示。发现jQuery的makeArray方法是关键。这与我最初使用的类似，但我的头撞在了forEach上，而不是在处理jQuery对象

renderDeleteButtons($elements) {
    $.makeArray($elements).forEach((el) => {
        document.DeleteButtons = document.DeleteButtons || [];
        document.DeleteButtons.push(new DeleteButton(el));
    });
}

这也不会伤害我的感情，因为我用“这个”做了一些奇怪的事情（为菲利克斯）

请参阅Felix关于词法范围界定的额外信息

不会做你认为它会做的事。jQuery依赖于能够设置回调函数的
这个
值。但是箭头函数没有自己的
this
，因此jQuery无法设置
this
值

在箭头函数中，
此
将引用该
在
renderDeleteButtons
中引用的任何内容，这可能是
JsComponentManager
的一个实例

如果将一个函数传递给另一个函数，并且该函数必须设置
此
值，则不能使用箭头函数。请改用函数表达式：

renderDeleteButtons($elements) {
    $elements.each(function() {
        document.DeleteButtons = document.DeleteButtons || [];
        document.DeleteButtons.push(new DeleteButton(this));
    });
}

另见：


也许这有助于说明箭头函数和函数声明/表达式之间的区别：


//我们的库：
每个函数（值、回调）{
对于（变量i=0；i{
“严格使用”；
log（'arrow function:'，this）；
});
},
};
//‘this’是用词汇来表示的；“each”设置的任何内容都将被忽略
//这将记录'obj'的值（在'someMethod'中的'this'的值）
obj.someMethod（）
不会做你认为它会做的事。jQuery依赖于能够设置回调函数的
这个
值。但是箭头函数没有自己的
this
，因此jQuery无法设置
this
值

在箭头函数中，
此
将引用该
在
renderDeleteButtons
中引用的任何内容，这可能是
JsComponentManager
的一个实例

如果将一个函数传递给另一个函数，并且该函数必须设置
此
值，则不能使用箭头函数。请改用函数表达式：

renderDeleteButtons($elements) {
    $elements.each(function() {
        document.DeleteButtons = document.DeleteButtons || [];
        document.DeleteButtons.push(new DeleteButton(this));
    });
}

另见：


也许这有助于说明箭头函数和函数声明/表达式之间的区别：


//我们的库：
每个函数（值、回调）{
对于（变量i=0；i{
“严格使用”；
log（'arrow function:'，this）；
});
},
};
//‘this’是用词汇来表示的；“each”设置的任何内容都将被忽略
//这将记录'obj'的值（在'someMethod'中的'this'的值）
obj.someMethod（）
“但是一旦调试器进入控制器，值就未定义。”您是说
元素
在
删除按钮
构造函数中是
未定义的
？我不知道问题出在哪里。但是，传递给
DeleteButton
的是
JsComponentManager
的实例，而不是元素。看，不，我不是（我知道这很奇怪）jQuery中的“this”，每个元素都是元素本身。有关更多详细信息，请参见下面的答案。从本质上讲，jQuery和jQuery都是一种完全可怕的东西，似乎无法实现