JavaScript: свойство класса не определено при вызове из метода - PullRequest
Новая
       26

JavaScript: свойство класса не определено при вызове из метода

1 голос
/ 21 апреля 2020

Я хочу сохранить все идентификаторы привязок (содержащиеся на веб-странице) в массиве Link объектов. Я не программист JS, поэтому, возможно, мне не хватает некоторых фундаментальных знаний, но поиск в Google и попытка реализовать решения, которые работали для других, мне не помогли (например, связывание конкурса, жирная стрела и так далее). Что я понимаю, так это то, что мой this объект находится в неправильной области, он содержит полный путь по нажатой ссылке (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();

1 Ответ

0 голосов
/ 21 апреля 2020

Свяжите ваши обратные вызовы по кликам со ссылкой на класс, например: 

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));
    })
}
...