“This” trong javascript là gì ?

Trong javascript, this là một từ khóa dùng để trỏ đến đối tượng hiện tại. Nó dùng để truy cập thuộc tính và phương thức của đối tượng hiện tại trong bối cảnh của một hàm hoặc phương thức. Giá trị của this có thể thay đổi tùy thuộc vào bối cảnh sử dụng nó nhưng chủ yếu là đối tượng mà hàm hoặc phương thức là thuộc tính của nó.

Các bài viết liên quan:

• Từ khóa This trong Dart
• Variable – biến trong JavaScript
• Random CSS style Button
• Function trong JavaScript
• Function trong JavaScript: có thể bạn chưa biết

Trong javascript , sử dụng this trong một function thì this sẽ trỏ đến object gần nó nhất , nếu function này được gọi bởi 1 object nào đó thì this sẽ trỏ đến object đó.

Ví dụ :

let obj = {name : "John", age : 20};
obj.sayHello = function(){
    console.log(`Hello ${this.name}`);
}

obj.sayHello(); // Output: Hello John

Ngoài ra , bạn cũng có thể sử dụng call, apply, bind để thay đổi giá trị của this trong một function

Tại sao nên sử dụng “this” ?

Có nhiều lý do vì sao bạn nên sử dụng this trong javascript:

• Truy cập thuộc tính và phương thức của đối tượng: this cho phép bạn truy cập các thuộc tính và phương thức của đối tượng mà hàm hoặc phương thức đang là thuộc tính của, giúp cho mã dễ đọc hơn và giảm số lượng tham số cần truyền vào.
• Nạp chồng hàm: Sử dụng this cùng với các hàm call, apply, và bind cho phép bạn nạp chồng hàm (overriding) và thay đổi giá trị của this trong hàm.
• Giúp tách logic: Sử dụng this giúp tách logic trong hàm hoặc phương thức và tránh việc truyền nhiều tham số hoặc truyền đối tượng cấp cao hơn, giúp cho mã dễ quản lý hơn.
• Mã ngắn gọn: Sử dụng this giúp viết mã ngắn gọn và dễ đọc hơn, giảm số lượng tham số cần truyền vào.

Ngoài ra, sử dụng this còn giúp cho mã dễ dàng hơn khi sử dụng trong mô hình hoặc khi xây dựng các component trong các thư viện ReactJS hoặc AngularJS

Ví dụ như trong ReactJS, sử dụng this trong một component cho phép truy cập các props và state của component đó mà không cần truyền props hoặc state vào hàm hoặc phương thức.

Sử dụng “this” trong javascript như thế nào ?

Sử dụng this trong javascript có nhiều cách khác nhau tùy thuộc vào bối cảnh sử dụng nó.

1. Sử dụng trong phương thức của đối tượng: Trong điều kiện này, this trỏ đến đối tượng mà phương thức đang là thuộc tính của.

let obj = {name : "John", age : 20};

obj.sayHello = function(){

    console.log(`Hello ${this.name}`);

}

obj.sayHello(); // Output: Hello John

2. Sử dụng trong hàm: Trong điều kiện này, this trỏ đến đối tượng gần nó nhất, thường là window object.

function sayHello(){

    console.log(`Hello ${this.name}`);

}

let obj = {name : "John", age : 20};

sayHello.call(obj); // Output: Hello John

3. Sử dụng với call, apply, và bind: Bạn có thể sử dụng call, apply, và bind để thay đổi giá trị của this trong hàm hoặc phương thức.

function sayHello(){

    console.log(`Hello ${this.name}`);

}

let obj = {name : "John", age : 20};

let bound = sayHello.bind(obj);

bound(); // Output: Hello John

4. Sử dụng trong arrow function: Trong arrow function, this sẽ là giá trị của this lúc gọi hàm (không thay đổi theo context).
5. Sử dụng trong class , trong class this là đối tượng vừa tạo ra, trỏ đến chính nó.

class Person{

    constructor(name){

        this.name = name;

    }

    sayHello(){

        console.log(`Hello ${this.name}`);

    }

}

let p = new Person("John");

p.sayHello(); // Output: Hello John

Trên là các cách chính mà bạn có thể sử dụng this trong javascript. Tuy nhiên có thể có các trường hợp sử dụng khác và phức tạp hơn mà sẽ cần các kiến thức và kinh nghiệm khác nhau.

Điều quan trọng là hiểu được ý nghĩa của this và cách sử dụng nó trong các trường hợp khác nhau, sau đó bạn sẽ dễ dàng sử dụng this một cách chính xác và hiệu quả hơn trong các project của mình.

Khi nào nên sử dụng “this” ?

Khi nên sử dụng this trong javascript thì điều quan trọng là phải hiểu được vị trí và bối cảnh mà this đang được sử dụng.

• Trong phương thức của đối tượng, this trỏ đến đối tượng mà phương thức đang là thuộc tính của.
• Trong hàm, this trỏ đến đối tượng gần nó nhất, thường là window object hoặc undefined trong strict mode.
• Trong arrow function, this trỏ đến giá trị của this lúc gọi hàm.
• Trong class this trỏ đến đối tượng vừa tạo ra

Để sử dụng this đúng cách, nên chú ý đến bối cảnh sử dụng và tìm hiểu thêm về call, apply và bind để thay đổi giá trị của this.

Ngoài ra, trong javascript, sử dụng this sẽ giúp cho mã dễ dàng hơn khi sử dụng trong mô hình hoặc khi xây dựng các component trong các thư viện ReactJS hoặc AngularJS.

Một số ví dụ nâng cao khi sử dụng “this” trong javascript.

1. Sử dụng this trong callback function:

let obj = {

  name: "John",

  printName: function() {

    console.log(this.name);

  },

  delayPrintName: function() {

    setTimeout(function() {

      console.log(this.name);

    }, 1000);

  }

};

obj.printName(); // "John"

obj.delayPrintName(); // undefined

Sử dụng bind() hoặc arrow function để giữ lại giá trị của this trong callback:

let obj = {

  name: "John",

  printName: function() {

    console.log(this.name);

  },

  delayPrintName: function() {

    setTimeout(() => {

      console.log(this.name);

    }, 1000);

  }

};

obj.printName(); // "John"

obj.delayPrintName(); // "John"

2. Sử dụng this trong kết hợp với call, apply, bind:

let obj1 = {

  name: "John"

};

let obj2 = {

  name: "Mike"

};

let print = function() {

  console.log(this.name);

};

print.call(obj1); // "John"

print.apply(obj2); // "Mike"

let printMike = print.bind(obj2);

printMike(); // "Mike"

3. Sử dụng this trong class:

class Person {

  constructor(name) {

    this.name = name;

  }

  sayName() {

    console.log(this.name);

  }

}

let John = new Person("John");

John.sayName(); // "John"

4. Sử dụng this trong hoisting:

function printName() {

  console.log(this.name);

}

let obj = {

  name: "John",

  print: printName

};

obj.print(); // "John"

let name = "Mike";

printName(); // "Mike"

Đây chỉ là một số ví dụ để giải thích cách sử dụng this trong javascript nâng cao, có thể có các trường hợp sử dụng khác và phức tạp hơn. Chú ý đến bối cảnh sử dụng và tìm hiểu thêm về call, apply, bind.

Kết luận

“This” trong javascript là một khái niệm rất quan trọng khi lập trình ứng dụng javascript. Nó cho phép chúng ta truy cập vào các thuộc tính và phương thức của đối tượng hiện tại, giúp cho mã dễ dàng hơn khi sử dụng trong mô hình hoặc khi xây dựng các component trong các thư viện ReactJS hoặc AngularJS. Tuy nhiên, nó cũng có thể khiến cho mã trở nên phức tạp và khó hiểu khi sử dụng sai cách hoặc không hiểu được các bối cảnh sử dụng. Vì vậy, khi sử dụng this trong javascript, chúng ta nên chú ý đến bối cảnh và sử dụng các hàm như bind(), call(), apply() để thay đổi giá trị của this một cách chính xác.