JavaScript this Nyckelord

Exempel

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

Prova själv

Vad är this?

JavaScript this nyckelordet syftar på det objekt det tillhör.

den har olika värden beroende på dess användningsplats:

  • I metoden:this syftar på ägareobjektet.
  • I enskilda fall:this syftar på den globala objektet.
  • I funktionen:this syftar på den globala objektet.
  • I funktionen, i strikt läge:this är undefined.
  • I händelsen:this syftar på det element som tar emot händelsen.

Som call() och apply() Sådana metoder kan använda this på vilket objekt som helst.

this i metoden

I objektmetoder:this syftar på metodens "ägare".

I exempel på toppen av sidan:this syftar på person-objektet.

person-objektet är ägaren till fullName-metoden.

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

Prova själv

En ensam this

När den används ensam, är ägaren globala objektet, därför: this syftar på den globala objektet.

I webbläsarfönstret är den globala objektet: [object Window]:

Exempel

var x = this;

Prova själv

I strikt läge, om den används ensam: this syftar på den globala objektet [object Window]:

Exempel

"use strict";
var x = this;

Prova själv

this i funktionen (standard)

I JavaScript-funktioner är funktionens ägare som standard bunden this.

därför, i en funktion:this syftar på den globala objektet [object Window].

Exempel

function myFunction() {
  return this;
}

Prova själv

this i funktionen (strikt läge)

JavaScript:s strikt läge tillåter inte standardbindning.

därför, när den används i en funktion, i strikt läge:this är odefinierad (undefined)

Exempel

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

Prova själv

this i händelsehanteraren

I HTML-händelsehanterare:this syftar på det HTML-element som tar emot händelsen:

Exempel

<button onclick="this.style.display='none'">
  Klicka för att ta bort mig!
</button>

Prova själv

objektmethoder

I detta exempel:this är person-objekt (person-objekt är funktionens "ägare"):

Exempel

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

Prova själv

Exempel

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

Prova själv

med andra ordthis.firstName betyder thispå firstName egenskaper.

Explicit funktionbindning

call() och apply() Metoder är fördefinierade JavaScript-metoder.

De båda kan användas för att anropa en metod på ett annat objekt som parameter.

du kan läsa mer om dem i denna handledning. call() och apply() mer information.

i följande exempel, när person2 används som parameter för att anropa person1.fullName:this kommer att referera till person2, även om det är en metod för person1:

Exempel

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

Prova själv