JavaScript: class 属性从方法调用时未定义

Question

我想将锚点的所有 ID（包含在网页中）存储到一个 Link 对象数组中。我不是 JS 程序员，所以也许我缺少一些基础知识，但是谷歌搜索和尝试实施对其他人有用的解决方案对我没有帮助（比如绑定比赛、粗箭头等）。我的理解是我的 this 对象在错误的范围内，它包含被点击的 link（href）的完整路径，但我在上面的三行中使用了这个广告按预期工作：$.each(this.inner_aol, function(index, element){ ... }

JS代码如下：

// Link object
class Link{
    anchor = null;

    constructor(anchor){
        this.anchor = anchor;
    }

    getHref(){
        return $(this).attr("href");
    }

    myToString(){
        console.log(this);
    }
}

// Object containing an array of Links and some methods to manage them
class ArrayOfLinks{

    constructor(selector){
        this.selector = selector;
        this.anchorOnClick = this.anchorOnClick.bind(this);
    }

    fillArrWithLinks(){
        var tmp_aol = new Array();  
        $(this.selector).each(function(){
            console.log("Pushing " + $(this).attr("href"));
            tmp_aol.push($(this));      
        });

        this.inner_aol = tmp_aol;
        //this.selector = selector;
        //return tmp_aol;
    }

    myToString(){
        console.log("Inner AOLs " + this.inner_aol.toString());
    }

    printAllElements(){
        $.each(this.inner_aol, function(index, element){
            console.log("printAllElements -> " + $(element).attr("href"));
        });
    }

    anchorOnClick(){
        $.each(this.inner_aol, function(index, element){
            $(element).click(function(e){
                e.preventDefault();

/* *****************************
************************************************************************
the problem is in the following line when using this*/
                console.log("Link to div: " + $(element).attr("href") + " position into inner_aol: " + $.inArray($(element).attr("href"), this.inner_aol) + " my this is: " +this);
            });
        })
    }

    isAllowed(clicked_element){
        if(($(clicked_element).hasClass("deactive")) && (true)){
            console.log("this step is allowed");
        }
    }

}


l = new Link("test");
aol = new ArrayOfLinks(".link");
aol.fillArrWithLinks();
aol.myToString();
aol.printAllElements();
aol.anchorOnClick();

Answer 1

将您的点击回调绑定到您的 class 引用，如下所示：

anchorOnClick(){
    var thisRef = this;
    $.each(this.inner_aol, function(index, element){
        $(element).click((function(e){
            e.preventDefault();

            /* *****************************
            ************************************************************************/
            console.log("Link to div: " + $(element).attr("href") + " position into inner_aol: " + $.inArray($(element).attr("href"), this.inner_aol) + " my this is: " +this);
        }).bind(thisRef));
    })
}

JavaScript: class 属性从方法调用时未定义

JavaScript: class propery is undefined when called from a method

javascript

methods

jquery

scope

JavaScript: class 属性 从方法调用时未定义

JavaScript: class propery is undefined when called from a method

javascript

methods

jquery

scope

JavaScript: class 属性从方法调用时未定义