Từ khóa this trong JavaScript

Mẫu

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

Thử nghiệm trực tiếp

this là gì?

JavaScript this Từ khóa chỉ là đối tượng của nó.

Nó có giá trị khác nhau, tùy thuộc vào vị trí sử dụng cụ thể:

  • Trong phương thức,this Chỉ là đối tượng chủ sở hữu.
  • Trong trường hợp riêng lẻ,this Chỉ là đối tượng toàn cục.
  • Trong hàm,this Chỉ là đối tượng toàn cục.
  • Trong hàm, chế độ chặt chẽ,this Là undefined.
  • Trong sự kiện,this Chỉ là phần tử nhận sự kiện.

Như call() và apply() Phương thức này có thể gán this vào bất kỳ đối tượng nào.

this trong phương thức

Trong phương thức đối tượng,this Chỉ là chủ sở hữu của phương thức này.

Trong ví dụ ở trên cùng của trang này,this Chỉ là đối tượng person.

Đối tượng person là chủ sở hữu của phương thức fullName.

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

Thử nghiệm trực tiếp

this riêng lẻ

Trong trường hợp sử dụng riêng lẻ, chủ sở hữu là đối tượng toàn cục, do đó this Chỉ là đối tượng toàn cục.

Trong cửa sổ trình duyệt, đối tượng toàn cục là [object Window]:

Mẫu

var x = this;

Thử nghiệm trực tiếp

Trong chế độ chặt chẽ, nếu sử dụng riêng lẻ, thì this Chỉ là đối tượng toàn cục [object Window]:

Mẫu

"use strict";
var x = this;

Thử nghiệm trực tiếp

this trong hàm (mặc định)

Trong hàm JavaScript, chủ sở hữu của hàm được gán mặc định this.

Do đó, trong hàm,this Chỉ là đối tượng toàn cục [object Window].

Mẫu

function myFunction() {
  return this;
}

Thử nghiệm trực tiếp

this trong hàm (chặt chẽ)

Chế độ chặt chẽ của JavaScript không cho phép gán mặc định.

Do đó, khi sử dụng trong hàm, trong chế độ chặt chẽ,this Là không định nghĩa (undefined})

Mẫu

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

Thử nghiệm trực tiếp

this trong trình xử lý sự kiện

Trong trình xử lý sự kiện HTML,this Chỉ là phần tử HTML nhận sự kiện này:

Mẫu

<button onclick="this.style.display='none'">
  Nhấp vào để xóa tôi!
</button>

Thử nghiệm trực tiếp

Gán phương thức đối tượng

Trong ví dụ này,this Là đối tượng person (đối tượng person là chủ sở hữu của hàm này):

Mẫu

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

Thử nghiệm trực tiếp

Mẫu

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

Thử nghiệm trực tiếp

Nói cách khácthis.firstName nghĩa là thiscủa đối tượng firstName thuộc tính.

Gán liên kết hàm rõ ràng

call() và apply() Phương pháp là phương pháp JavaScript được định nghĩa sẵn.

Cả hai đều có thể được sử dụng để gọi phương pháp đối tượng với đối tượng khác làm tham số.

Bạn có thể đọc thêm về call() và apply() thêm.

Trong ví dụ dưới đây, khi gọi phương pháp person1.fullName bằng cách sử dụng person2 làm tham số:this Sẽ tham chiếu person2, ngay cả khi nó là phương pháp của person1:

Mẫu

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // Sẽ trả về "Bill Gates"

Thử nghiệm trực tiếp