Доступ к текущему элементу 'this', когда внешний 'this' был связан

Question

Не знаю, слишком ли запутан вопрос, но здесь я иду.

Если бы я получил что-то вроде:

var Test = function(){ 
    this.foo = a; 
} 

Test.prototype.init = function() { 
    $(document).on('change', '.form-control', this.myFunction); 
} 

Test.prototype.myFunction = function() { 
    console.log(this.foo); 
    console.log(this); 
} 

Я понимаю, что при печати «это» в MYFUNCTION было бы напечатать контекст выполнения функции, принявшего вызов, в данном случае это будет распечатать контекст выполнения для .on ('change' ...). Поэтому при печати this.foo, поскольку он не существует в этом контексте, тогда undefined будет распечатан.

Чтобы решить эту проблему и получить доступ к this.foo, я делаю следующее:

Test.prototype.init = function() { 
    $(document).on('change', '.form-control', (this.myFunction).bind(this)); 
} 

Test.prototype.myFunction = function() { 
    console.log(this.foo); 
    console.log(this); 
} 

Я связывающую «это» для вызова функции, так this.foo будет распечатано, что в порядке, но мой вопрос в том, как я могу получить доступ к контексту выполнения для .on ('change' ...) ??? Смысл, как я могу получить доступ к 'этому', к которому у меня первоначально был доступ до привязки?

Thanks

Answer 1

Вместо привязки просто используйте ссылочную переменную. Он будет поддерживать контекст, и по-прежнему позволяет использовать контекст .on «s с this

Test.prototype.init = function() { 

    var context = this; 

    $(document).on('change', '.form-control', function() { 
     context.myFunction(); 
     console.log(this); // `this` has context to the onchange 
    }); 
}; 

Answer 2

всегда будет связана Связанная функция-х this к тому же значению. Это означает, что у вас больше нет доступа к «оригинальному» значению.

Если вы хотите использовать как this es, вам нужно будет использовать его как this, а другой в качестве аргумента. Или как аргументы.

var Test = function(a) { 
 
    this.foo = a; 
 
    this.init(); 
 
} 
 

 
Test.prototype.init = function() { 
 
    // Set `this` to the calling test object, and window 
 
    // (which would be the original context in this case) 
 
    // as first parameter of `myFunction`. Swap the arguments 
 
    // if you wish to use them the other way around. 
 
    window.setTimeout(this.myFunction.bind(this, window), 500); 
 
}; 
 

 
Test.prototype.myFunction = function(that) { 
 
    console.log(this.foo); 
 
    console.log(that.foo); 
 
}; 
 

 
new Test(5);

Btw, ES6 arrow functions сохранить окружающую среду они определены в, а это означает, что this будет указывать на тестовый объект.

Test.prototype.init = function() { 
    window.setTimeout(() => this.myFunction(window), 500); 
};