Oto kilka sposobów dostępu do kontekstu rodzica wewnątrz kontekstu dziecka -

1. możesz użyć funkcji bind().
2. przechowuje odniesienie do kontekstu / tego wewnątrz innej zmiennej(patrz poniższy przykład).
3. Użyj funkcji ES6 Strzałka.
4. Alter code / function design / architecture - w tym celu powinieneś posiadać polecenie nad design patterns w javascript.

1. Użyj bind() funkcji

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', ( function () {
        alert(this.data);
    }).bind(this) );
}
// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};
// called as
var obj = new MyConstructor('foo', transport);

Jeśli używasz underscore.js - http://underscorejs.org/#bind

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));

2 Przechowuj odniesienie do kontekstu/to wewnątrz innej zmiennej

function MyConstructor(data, transport) {
  var self = this;
  this.data = data;
  transport.on('data', function() {
    alert(self.data);
  });
}

3 Funkcja Strzałki

function MyConstructor(data, transport) {
  this.data = data;
  transport.on('data', () => {
    alert(this.data);
  });
}

To wszystko w "magicznej" składni wywołania metody:

object.property();

Gdy uzyskasz właściwość z obiektu i wywołasz ją za jednym razem, obiekt będzie kontekstem dla metody. Jeśli wywołasz tę samą metodę, ale w oddzielnych krokach, kontekstem jest globalny zakres (okno):

var f = object.property;
f();

Kiedy uzyskasz odniesienie do metody, nie jest ona już dołączona do obiektu, jest to tylko odniesienie do zwykłej funkcji. To samo dzieje się, gdy otrzymasz odniesienie do wykorzystania jako callback:

this.saveNextLevelData(this.setAll);

Tutaj można powiązać kontekst z funkcją:

this.saveNextLevelData(this.setAll.bind(this));

Jeśli używasz jQuery, powinieneś zamiast tego użyć metody $.proxy, ponieważ {[6] } nie jest obsługiwana we wszystkich przeglądarkach:

this.saveNextLevelData($.proxy(this.setAll, this));

Problem z "kontekstem"

Termin "kontekst" jest czasami używany w odniesieniu do obiektu, do którego odnosi się this . Jego użycie jest niewłaściwe, ponieważ nie pasuje ani semantycznie, ani technicznie do ECMAScript to.

"Context" oznacza okoliczności otaczające coś, co dodaje znaczenie, lub jakieś poprzedzające i następujące informacje, które nadają dodatkowe znaczenie. Termin "kontekst" jest używany w ECMAScript w odniesieniu do kontekst wykonania, czyli wszystkie parametry, zakres i to w zakresie jakiegoś kodu wykonującego.

Jest to pokazane w sekcji ECMA-262 10.4.2:

Ustaw wartość ThisBinding na tę samą wartość co wywołanie kontekstu wykonania

Co wyraźnie wskazuje, że to jest częścią kontekstu wykonania.

Kontekst wykonania dostarcza otaczających informacji, które dodają znaczenia kod, który jest wykonywany. Zawiera znacznie więcej informacji, że tylko thisBinding.

Więc wartość to nie jest "kontekstem", to tylko część kontekstu wykonania. Jest to w zasadzie zmienna lokalna, która może być ustawiona przez wywołanie dowolnego obiektu i w trybie ścisłym, na dowolną wartość.

Po pierwsze, musisz mieć jasne zrozumienie scope i zachowanie this słowo kluczowe w kontekście scope.

this & scope :

there are two types of scope in javascript. They are :

   1) Global Scope

   2) Function Scope

W skrócie, zasięg globalny odnosi się do obiektu window.Zmienne zadeklarowane w zasięgu globalnym są dostępne z dowolnego miejsca.Z drugiej strony zakres funkcji znajduje się wewnątrz funkcji.zmienna zadeklarowana wewnątrz funkcji nie może być dostępna ze świata zewnętrznego normalnie.this słowo kluczowe w zakresie globalnym odnosi się do obiektu window.this funkcja wewnętrzna odnosi się również do okna object.So this będzie zawsze odnosić się do okna, dopóki nie znajdziemy sposobu na manipulowanie this aby wskazać wybrany przez nas kontekst.

--------------------------------------------------------------------------------
-                                                                              -
-   Global Scope                                                               -
-   ( globally "this" refers to window object)                                 -     
-                                                                              -
-         function outer_function(callback){                                   -
-                                                                              -
-               // outer function scope                                        -
-               // inside outer function"this" keyword refers to window object -                                                                              -
-              callback() // "this" inside callback also refers window object  -

-         }                                                                    -
-                                                                              -
-         function callback_function(){                                        -
-                                                                              -
-                //  function to be passed as callback                         -
-                                                                              -
-                // here "THIS" refers to window object also                   -
-                                                                              -
-         }                                                                    -
-                                                                              -
-         outer_function(callback_function)                                    -
-         // invoke with callback                                              -
--------------------------------------------------------------------------------

Różne sposoby manipulowania this wewnątrz funkcji wywołania zwrotnego:

Tutaj mam funkcję konstruktora zwaną osobą. Posiada nieruchomość o nazwie name i cztery metody zwane sayNameVersion1,sayNameVersion2,sayNameVersion3,sayNameVersion4. Wszystkie cztery mają jedno konkretne zadanie.Zaakceptuj oddzwonienie i wywołaj je.Wywołanie zwrotne ma określone zadanie, które polega na zalogowaniu właściwości name instancji funkcji konstruktora Person.

function Person(name){

    this.name = name

    this.sayNameVersion1 = function(callback){
        callback.bind(this)()
    }
    this.sayNameVersion2 = function(callback){
        callback()
    }

    this.sayNameVersion3 = function(callback){
        callback.call(this)
    }

    this.sayNameVersion4 = function(callback){
        callback.apply(this)
    }

}

function niceCallback(){

    // function to be used as callback

    var parentObject = this

    console.log(parentObject)

}

Teraz stwórzmy instancję z person constructor i wywołajmy różne wersje sayNameVersionX ( x odnosi się do metody 1,2,3,4) z niceCallback aby zobaczyć jak na wiele sposobów możemy manipulować this wewnątrz callback, aby odnieść się do person przykład.

var p1 = new Person('zami') // create an instance of Person constructor

Bind :

Co robi bind, to tworzy nową funkcję z this słowo kluczowe ustawione na podaną wartość.

sayNameVersion1 i sayNameVersion2 użyj bind do manipulowania this funkcji wywołania zwrotnego.

this.sayNameVersion1 = function(callback){
    callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
    callback()
}

First one bind this z wywołaniem zwrotnym wewnątrz samej metody.A dla drugiego wywołanie zwrotne jest przekazywane z przypisanym do niego obiektem.

p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method

p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback

Call :

The first argument Z call metoda jest stosowana jako this wewnątrz funkcji, która jest wywoływana z call przywiązany do niego.

sayNameVersion3 zastosowania call aby manipulować this aby odnieść się do utworzonego przez nas obiektu person zamiast do obiektu window.

this.sayNameVersion3 = function(callback){
    callback.call(this)
}

I nazywa się tak: :

p1.sayNameVersion3(niceCallback)

Zastosuj :

Podobne do call, pierwszy argument apply odnosi się do obiektu, który zostanie wskazany przez this słowo kluczowe.

sayNameVersion4 zastosowania apply manipulować this aby odnieść się do obiektu person

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

I nazywa się tak jak poniżej.Po prostu połączenie zwrotne jest przekazywane,

p1.sayNameVersion4(niceCallback)

Nie możemy powiązać tego z setTimeout(), ponieważ zawsze wykonuje się to z global object (Window) , Jeśli chcesz uzyskać dostęp do kontekstu this w funkcji wywołania zwrotnego, to używając bind() do funkcji wywołania zwrotnego możemy osiągnąć jako:

setTimeout(function(){
    this.methodName();
}.bind(this), 2000);

Innym podejściem, które jest standardowym sposobem od DOM2 wiązania this wewnątrz słuchacza zdarzeń, który pozwala zawsze usunąć słuchacz (wśród innych korzyści), jest Metoda handleEvent(evt) z interfejsu EventListener:

var obj = {
  handleEvent(e) {
    // always true
    console.log(this === obj);
  }
};

document.body.addEventListener('click', obj);

Szczegółowe informacje na temat korzystania z handleEvent można znaleźć tutaj: https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

Obecnie możliwe jest inne podejście, jeśli klasy są używane w kodzie.

Z obsługą pól klasy można zrobić to w następny sposób:

class someView {
    onSomeInputKeyUp = (event) => {
        console.log(this); // this refers to correct value
    // ....
    someInitMethod() {
        //...
        someInput.addEventListener('input', this.onSomeInputKeyUp)

Na pewno pod maską to wszystko stara dobra funkcja arrow, która wiąże kontekst, ale w tej formie wygląda znacznie wyraźniej niż wyraźne Wiązanie.

Ponieważ jest to propozycja etapu 3, Będziesz potrzebował babel i odpowiedniej wtyczki babel , aby przetworzyć ją jak na razie(08/2018).