Kluczowe słowo this w JavaScript

Przykład

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

Spróbuj sam

Co to jest this?

JavaScript this Kluczowe słowo oznacza obiekt, do którego należy.

Ma różne wartości, w zależności od miejsca użycia:

  • W metodzie,this Oznacza obiekt właściciela.
  • W pojedynczym przypadku,this Oznacza globalny obiekt.
  • W funkcji,this Oznacza globalny obiekt.
  • W funkcji, w rygorystycznym trybie,this Jest undefined.
  • W zdarzeniu,this Oznacza element, który odbiera zdarzenie.

Jak call() i apply() Tego typu metoda może odnosić się do dowolnego obiektu.

this w metodzie

W metodzie obiektu,this Oznacza "właściciela" tej metody.

W przykładzie na górze tej strony,this Oznacza obiekt person.

Obiekt person jest "właścicielem" metody fullName.

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

Spróbuj sam

Pojedynczy this

W单独使用时，拥有者是 globalny obiekt, więc this Oznacza globalny obiekt.

W oknie przeglądarki, globalny obiekt to [object Window]:

Przykład

var x = this;

Spróbuj sam

W rygorystycznym trybie, jeśli jest używane osobno, this Oznacza globalny obiekt [object Window]:

Przykład

"use strict";
var x = this;

Spróbuj sam

this w funkcji (domyślne)

Domyślne wiązanie w funkcji JavaScript this.

Dlatego w funkcji,this Oznacza globalny obiekt [object Window].

Przykład

function myFunction() {
  return this;
}

Spróbuj sam

this w funkcji (rygorystyczny tryb)

Rygorystyczny tryb JavaScript nie pozwala na domyślną wiązanie.

Dlatego w funkcji, w trybie rygorystycznym,this Jest niezdefiniowane (undefined})

Przykład

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

Spróbuj sam

this w programie obsługi zdarzeń

W programie obsługi zdarzeń HTML,this Oznacza to HTML element, który odbiera to zdarzenie:

Przykład

<button onclick="this.style.display='none'">
  Kliknij, aby mnie usunąć!
</button>

Spróbuj sam

Metoda obiektu

W tym przykładzie,this Jest obiektem person (obiekt person jest "właścicielem" tej funkcji):

Przykład

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

Spróbuj sam

Przykład

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

Spróbuj sam

Innymi słowythis.firstName oznacza thisobiektu (person) firstName Atrybuty.

Eksplicytne funkcje wiązania

call() i apply() Metody są pred定义ane metody JavaScript.

Mogą one być używane do wywołania metody obiektu z innego obiektu jako argumentem.

Możesz przeczytać więcej o nich na końcu tego tutoriala. call() i apply() Więcej informacji.

W poniższym przykładzie, gdy używa się person2 jako argumentu do wywołania person1.fullName,this zostanie odniesiony do person2, nawet jeśli jest to metoda person1:

Przykład

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

Spróbuj sam