JavaScript this Keyword

Voorbeeld

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

Probeer het zelf

What is this?

JavaScript this The keyword refers to the object it belongs to.

it has different values depending on its usage location:

  • In a method,this refers to the owner object.
  • in the case of a single use,this refers to the global object.
  • In a function,this refers to the global object.
  • In a function, in strict mode,this is undefined.
  • In the event,this refers to the element that receives the event.

like call() en apply() such methods can refer to this for any object.

this in method

In object methods,this refers to the "owner" of this method.

In the example at the top of this page,this refers to the person object.

The person object is the owner of the fullName method.

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

Probeer het zelf

single this

When used alone, the owner is the global object, therefore this refers to the global object.

In the browser window, the global object is [object Window]:

Voorbeeld

var x = this;

Probeer het zelf

In strict mode, if used alone, then this refers to the global object [object Window]:

Voorbeeld

"use strict";
var x = this;

Probeer het zelf

this in function (default)

By default, the owner is bound in a JavaScript function, this.

Therefore, in a function,this refers to the global object [object Window].

Voorbeeld

function myFunction() {
  return this;
}

Probeer het zelf

this in function (strict mode)

JavaScript strict mode does not allow default binding.

Therefore, when used in a function, in strict mode,this is undefined (undefined)

Voorbeeld

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

Probeer het zelf

this in event handlers

In HTML event handlers,this refers to the HTML element that receives this event:

Voorbeeld

<button onclick="this.style.display='none'">
  Click to delete me!
</button>

Probeer het zelf

object method binding

In this example,this is the person object (the person object is the "owner" of this function):

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Anderzijdsthis.firstName betekent thisvan het firstName Eigenschappen.

Expliciete functiebinding

call() en apply() Methoden zijn voorgedefinieerde JavaScript-methoden.

Ze kunnen beide gebruikt worden om een object als parameter door te geven aan een objectmethode.

U kunt meer lezen over call() en apply() Meer informatie.

Bij gebruik van person2 als parameter voor het aanroepen van person1.fullName in de volgende voorbeeld:this zal person2 verwijzen, zelfs als het een methode van person1 is:

Voorbeeld

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

Probeer het zelf