Как получить доступ к функции класса из другой функции в том же классе с Javascript

Question

Я пытаюсь выполнить функцию в своем классе, вызванную другой функцией.

Вот пример.Foo - это класс, который при создании вызывает функцию Bar().После завершения анимации я хочу doSomething, но это не работает и выдает ошибку.

Код приведен ниже или вы можете проверить JSFiddle здесь.

class Foo
{
    Bar(){
        $("#element").animate({ width : "100%" }, {
            duration : 1000,
            complete : function(){
            	console.log("test");
                this.doSomething();
            }
        });
    }

    doSomething()
    {
        // Do something
    }
    
    constructor(){
    	this.Bar();
    }
}

var example = new Foo();

#cont {
  width: 100%;
}
#element {
  width: 0;
  height: 20px;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont"><div id="element"></div></div>

Ошибка:

Uncaught TypeError: this.doSomething не является функцией

Как я могу вызвать функцию doSomething() в классе из этой функции?

Answer 1

К тому времени, когда вы вызываете this, это входит в область функции обратного вызова complete.В этот момент this ссылается на функцию обратного вызова, а не на класс.Или, зная jQuery, this может указывать на элемент #element.Вам нужно будет реструктурировать.Самый ленивый способ сделать это - создать новую переменную в методе класса, присвоить ей this и использовать ее в функции.Я также использую let здесь вместо var, потому что мы хотим, чтобы эта переменная была ограничена областью блока (, что бы это ни значило )

class Foo
{
    Bar(){
        let self = this;
        $("#element").animate({ width : "100%" }, {
            duration : 1000,
            complete : function(){
                console.log("test");
                self.doSomething();
            }
        });
    }

    doSomething()
    {
        // Do something
    }

    constructor(){
        this.Bar();
    }
}

var example = new Foo();

Вы также можете использовать функции стрелок иusing ключевое слово или bind штучка, но я не настолько хорош программистом, и вышеупомянутая концепция до сих пор работала у меня хорошо.

Answer 2

Вы теряете «этот» контекст. Вы можете использовать функцию стрелки «complete: () => {» или назначить that = this и запустить that.doSomething () для более старых версий JS.