Từ khóa “this” trong Javascript

Từ khóa trong Javascript sẽ trỏ tới object mà nó thuộc về.

“this” sẽ mang các giá trị khác nhau tùy theo nơi mà nó được sử dụng:

  • Trong một method, “this” sẽ trỏ tới object sở hữu method đó.
    • Ví dụ: ta có object tên là person, trong object person có phương thức là fullName, lúc này thì this sẽ trỏ tới object sỡ hữu method fullName chính là person.
let person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
person.fullName(); // "John Doe"
  • Khi sử dụng this ở Global, this sẽ trỏ tới Global object là Window object.
    • Ví dụ:
let x = this;
console.log(x); // Window {parent: Window, opener: null, top: Window, length: 0, 
                // frames: Window, …}
  • Trong một function, như đã nói thì this sẽ trỏ tới object sở hữu function đó. Khi ta có một function được khai báo ở Global thì theo mặc định this sẽ trỏ tới Global object là Window
    • Ví dụ:
function myFunction() {
  return this;
}
myFunction(); // Window {parent: Window, opener: null, top: Window, length: 0, 
              // frames: Window, …}
  • Tuy nhiên nếu đang ở trong strict mode thì không cho phép điều trên.
    • Ví dụ:
"use strict";
function myFunction() {
  return this;
}
myFunction(); // undefined
  • Khi ở trong Event Handlers, this sẽ trỏ tới đối tượng HTML mà nó nhận event.
    • Ví dụ: this ở đây sẽ trỏ tới button.
<button onclick="this.style.display='none'">Click to Remove Me!</button>
// this hiện đang trỏ vào button vì vậy nếu click vào button này thì nó thay đổi 
// css của button và làm nó biến mất
  • Đôi lúc từ khóa this sẽ gây nhầm lẫn cho chúng ta trong việc xác định giá trị của nó, ví dụ như việc truyền hàm vào như một callback như đoạn code phía dưới:
let person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
person.fullName(); // "John Doe"

$('#button').click(person.fullName); // this không còn trỏ vào person nữa mà lần 
                                     // này nó trỏ vào button.

Để giải quyết vấn đề này ta sẽ dùng hàm bind() đã được giới thiệu trong ECMAScript 5, hàm bind() này dùng để xác định tham số this cho hàm được gọi.

let person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

$('#button').click(person.fullName.bind(person)); // Lúc này hàm bind() sẽ xác 
                                                  // định this là person.

Trả lời

Email của bạn sẽ không được hiển thị công khai.