JavaScript this Keyword

Eksempel

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Prøv det selv

Hvad er this?

JavaScript this nøgleordet betyder det objekt, det tilhører.

det har forskellige værdier afhængigt af dets brugsmåde:

  • i metodenthis betyder ejersobjektet.
  • i ensomhed,this betyder den globale objekt.
  • i funktionenthis betyder den globale objekt.
  • i funktionen, i strengt kastemodus,this er undefined.
  • i eventetthis betyder det element, der modtager eventet.

som call() og apply() Denne metode kan bruge this til hvilken som helst objekt.

this i metoden

i objektmetoderthis betyder metodens "ejer".

I eksemplet øverst på denne side,this betyder person-objektet.

person-objektet er ejeren af fullName-metoden.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

Prøv det selv

almindelig this

Når brugt alene, er ejerens global objekt, derfor this betyder den globale objekt.

I browser-vinduet, er den globale objekt [object Window]：

Eksempel

var x = this;

Prøv det selv

I strengt kastemodus, hvis brugt alene, this betyder den globale objekt [object Window]：

Eksempel

"use strict";
var x = this;

Prøv det selv

this i funktionen (standard)

i JavaScript-funktioner, er funktionens ejer standardbundet this。

derfor, i funktionen,this betyder den globale objekt [object Window]。

Eksempel

function myFunction() {
  return this;
}

Prøv det selv

this i funktionen (strengt kastemodus)

JavaScripts strengt kastemodus tillader ikke standardbinding.

derfor, når det bruges i en funktion, i strengt kastemodus,this er ikke defineret (undefined）。

Eksempel

"use strict";
function myFunction() {
  return this;
}

Prøv det selv

this i eventhåndtereren

I HTML eventhåndterere,this betyder den HTML-element, der modtager dette event:

Eksempel

<button onclick="this.style.display='none'">
  Klik for at slette mig!
</button>

Prøv det selv

objektmetoder

I dette eksempel,this er person-objekt (person-objekt er funktionens "ejer"):

Eksempel

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

Prøv det selv

Eksempel

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Prøv det selv

på anden sidethis.firstName betyder thisaf (person) objektets firstName egenskaber.

eksplicit funktionbindning

call() og apply() metoder er prædefinerede JavaScript-metoder.

de kan begge bruges til at kalde en objektmetode med et andet objekt som parameter.

du kan læse mere om call() og apply() flere detaljer.

i nedenstående eksempel, når person2 bruges som parameter til at kalde person1.fullName,this vil referere til person2, selvom det er person1s metode:

Eksempel

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName: "Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // vil returnere "Bill Gates"

Prøv det selv