Jak zmienić kontekst funkcji w javascript

Proszę spojrzeć na ten przykład:

<script>
var el = document.getElementById('button');
el.onclick = function(){
    this.value = "Press Me Again"; //this --> now refers to the the element button not on the window
}

//Another Example:
var Person = function(name,location){
  this.name = name;
  this.location = location;  
  alert(this.location); 
}   
var p2 = new Person("Samantha","California"); //this refers to the instance of the function Person(Person now acts as a class)
var p1 = Person(); // this refers to the window(Person simply acts as a simple function)
</script>
<button id="button1">Press Me</button>

Nowe słowo kluczowe zmienia kontekst.

Jest to bardzo przydatne podczas wykonywania wywołań zwrotnych z żądań AJAX:

function Person(_id, _name) {
    this.id = _id;
    this.name = _name;
};

Person.prototype.sayHi = function(greeting) {
    alert(greeting + " from " + this.name);
};

Person.prototype.loadFromAJAX = function(callback) {
    // in this example, it's jQuery, but could be anything
    var t = this;
    $.get("myurl.php", function(data) {
        callback.call(t, data.greeting);
    });
};

Jest mnóstwo zastosowań jQuery. Na przykład jQuery ().funkcja get ():

get: function( num ) {
    return num === undefined ?
        // Return a 'clean' array
        Array.prototype.slice.call( this ) :
        // Return just the object
        this[ num ];
}

Używa funkcji prototypu tablicy, ale w kontekście obiektu jQuery.

Przykład z prawdziwego świata, z którym się spotkałem:

Jeśli dodasz funkcję jako obsługę zdarzeń do elementu DOM i jeśli użyjesz "this" wewnątrz tej funkcji, "this" będzie odnosić się do elementu DOM, do którego dodałeś obsługę zdarzeń.

Ale ta funkcja może być metodą obiektu i chcesz, aby słowo kluczowe "this" użyte wewnątrz niej odnosiło się do właściciela object...so musisz zmienić kontekst tak, aby "this" nie odnosił się do elementu DOM, ale odnosił się do obiekt właściciel .

Możesz łatwo zmienić kontekst funkcji w jquery za pomocą funkcji proxy (). Zobacz to pytanie: jquery " ten " problem związany z obsługą zdarzeń (odpowiednik bindAsEventListener w prototypie) i pierwsza odpowiedź

Funkcja Bind może być tym, czego szukasz, funkcja bind zwraca nową funkcję w kontekście, który przekazałeś , rzeczywisty scenariusz może być wtedy, gdy używasz delegatów jquery, aby dołączyć pewne zachowanie do elementu dom, i chcesz, aby wywołanie zwrotne zostało wykonane w innym kontekście. ponieważ domyślnym kontekstem w jQuery delgate jest obiekt dom, który jest powiązany z obsługą, co oznacza, że nie możesz uzyskać dostępu do żadnej właściwości poza właściwościami należącymi do dom obiekt

Zawsze znajduję się w potrzebie posiadania innego kontekstu Podczas używania setTimeout i jQuery ma przydatną funkcję $.proxy co robi sztuczkę:

function iAmCalledAfterTimeout()
{
     alert(this.myProperty); //it will alert "hello world"
}    

setTimeout($.proxy(iAmCalledAfterTimeout, {myProperty:"hello world"}), 1000);