Dùng con trỏ this trong JavaScript thế nào cho đúng?

Bài viết được sự cho phép của tác giả Vũ Công Tấn Tài

Con trỏ this có lẽ là một khái niệm không mấy xa lạ trong lập trình hướng đối tượng, nó là một thể hiện cho đối tượng đang chứa đoạn mã lệnh đang được thực thi, hiểu nôm na kiểu ngôn ngữ con người là thế này:

Nam học bài rất chăm chỉ vì sẽ có một bài kiểm tra vào cuối tuần, bài kiểm tra này rất quan trọng đối với Nam.

           Có thể biểu diễn câu nói này bằng một cách khác như sau:

Nam học bài rất chăm chỉ vì sẽ có một bài kiểm tra vào cuối tuần này, bài kiểm tra này rất quan trọng đối với anh ấy.

          Hai câu trên hoàn toàn đồng nghĩa với nhau, mặc dù không nói rõ ràng nhưng tất cả chúng ta đều hiểu “anh ấy” chính là “Nam”. Con trỏ this cũng có ý nghĩa tương tự như thế, và nếu nói theo ngôn ngữ con người, thì con trỏ this chính là một “đại từ nhân xưng” nhằm ám chỉ một đối tượng cụ thể đã được chỉ rõ ở ngữ cảnh trước đó. Con trỏ this được sử dụng rất nhiều trong các đoạn mã JS, và nó cũng là một trong những khái niệm gây ra nhiều sự hiểu lầm (dẫn đến bug) nhất trong ngôn ngữ này.

Để lập trình tốt bằng Javascript thì người lập trình viên buộc phải hiểu rõ cách mà con trỏ this vận hành, sẽ là hơi dài dòng nếu ta muốn tìm hiểu đầy đủ về nó, nhưng một khi đã hiểu về nó, ta sẽ thấy công sức ta bỏ ra không phí một chút nào. Mọi người sẽ cần 1 chút kiên nhẫn để đạt được điều đó

         Trong các ngôn ngữ lập trình như C++, C#, Java, PHP hay cả Javascript, con trỏ this thường được sử dụng để chỉ đến object chứa phương thức đang được gọi thực thi, trông ra thì cách dùng này có vẻ tường minh và dễ hiểu, các đoạn mã kiểu đó thường có dạng như:

class student {
    String name;
    . . .
    String getName(){
        Return this.name;
    }
}

student Hocsinh1 = new student();
String _name = Hocsinh1.getName();

          Khi đoạn code trên được biên dịch và hàm getName() được gọi, thì con trỏ this trong hàm getName() được hiểu là đối tượng Hocsinh1 và this.name chính là chỉ định tới thuộc tính name của đối tượng Hocsinh1 đó. Cũng giống như “đại từ nhân xưng” trong ngôn ngữ nói, this đại diện cho đối tượng (object) ở trong ngữ cảnh (context) được nhắc đến trước đó. Rất dễ hiểu phải không nào, tuy nhiên ta hãy xem xét một chút sâu hơn bên trong, chúng ta cũng sẽ bàn sâu hơn về khái niệm object và context ở những phần tiếp theo.

  12 tips hay cho JavaScript
  24 code ES6 tân tiến để khắc phục các lỗi thực hành JavaScript

Cơ bản về con trỏ this trong Javascript

          Cần nói qua một chút về hàm (function) ở trong Javascript, như ta đã biết thì trong JS một hàm cũng chính là một đối tượng (object), và đối tượng thì sẽ có những thuộc tính của riêng nó. Trong JS, khi một hàm được gọi, thì nó sẽ có một thuộc tính là this, và thuộc tính this này chứa giá trị về một đối tượng đang gọi tới hàm này.

          Tức là, khi một function được gọi (tạm gọi là function A), thì con trỏ this chứa giá trị của đối tượng gọi tới A, và ta có thể thông qua con trỏ this này để lấy các giá trị thuộc tính khác nằm trong đối tượng vừa gọi tới A.

var Hocsinh1 = {
    name: “John”,
    getName: function(){
        return this.name;
    }
};

var _name = Hocsinh1.getName();

          Quay lại ví dụ trước, this được khai báo trong hàm getName(), và hàm getName() là hàm sẽ được gọi tới bởi đối tượng Hocsinh1, do đó this ở đây được hiểu là sẽ mang giá trị tham chiếu tới đối tượng Hocsinh1. Tới đây thì cách dùng con trỏ this trong Javascript là tương đồng với các ngôn ngữ khác: giá trị của con trỏ this là rỗng cho tới khi thực sự có một đối tượng gọi tới hàm chứa con trỏ this.

           Trong hầu hết mọi trường hợp, this sẽ chứa giá trị của đối tượng gọi tới nó, tuy nhiên việc một hàm trong Javascript cũng chính là 1 đối tượng khiến ta có thể dễ dàng truyền nó vào một tham số của hàm nào đó để sử dụng như một hàm callback, chính điều này sẽ dẫn tới các tình huống mà con trỏ this không thực sự chứa giá trị của đối tượng mà nó thuộc về.

          Chúng ta sẽ xem xét 4 trường hợp mà con trỏ this trở nên mơ hồ hơn so với ví dụ ở trên, chúng ta sẽ đi phân tích chi tiết từng trường hợp ở phần tiếp theo:

  1. Con trỏ this trong việc sử dụng hàm callback
  2. Con trỏ this bên trong 1 closure
  3. Con trỏ this trong trường hợp gán hàm cho một biến khác
  4. Con trỏ this trong hàm mượn (borrowing methods)

Xem việc làm javascript đãi ngộ tốt trên TopDev

1. Con trỏ this trong sử dụng hàm callback

           Mặc dù các ngôn ngữ lập trình hiện đại như C# hoặc Java cũng hỗ trợ hàm callback (như delegate function của C#), tuy nhiên việc sử dụng hàm callback ở trong Javascript thông dụng hơn rất nhiều. Có thể nói nôm na hàm callback là việc chúng ta truyền 1 hàm với vai trò như một tham số vào một hàm khác để có thể kích hoạt hàm đó sau này. Xét ví dụ sau:

//Định nghĩa 1 đối tượng với phương thức hiển thị thuộc tính ra màn hình
var Hocsinh = {
    name: “John”,
    printName: function(){
       console.log(this.name);
    }
};

//Bắt sự kiện click chuột lên button, sẽ thực thi hàm hiển thị tên của Hocsinh lên màn hình
$(‘button’).click(Hocsinh.printName);

          Theo ý tưởng của người lập trình, khi người dùng click chuột vào button thì hàm printName() sẽ được gọi để hiển thị tên của Hocsinh lên màn hình. Tuy nhiên đoạn code trên sẽ không thể chạy đúng như mong muốn. Lí do bởi vì khi sự kiện click được kích hoạt, thì sự kiện này đang được gán tới đối tượng $(‘button’), chúng ta truyền hàm Hocsinh.printName vào bên trong hàm click() như một đối tượng callback. Lúc này – khi hàm click() được gọi – hàm Hocsinh.printName được kích hoạt, tuy nhiên đối tượng gọi tới hàm này không còn là đối tượng Hocsinh nữa (mà là đối tượng $(‘button’) của jQuery) nên cho trỏ this không còn tham chiếu tới giá trị của đối tượng Hocsinh, dẫn tới việc gọi “this.name” là vô nghĩa.

                Sự nhập nhằng này có thể được mô tả ngắn gọn như sau: khi hàm click() kích hoạt hàm callback Hocsinh.printName, thì context của hàm Hocsinh.printName đã bị thay đổi sang đối tượng $(‘button’).

                Để đoạn code trên chạy đúng như mong muốn – in ra được name của Hocsinh – thì ta phải đảm bảo được context của hàm callback Hocsinh.printName là chính đối tượng Hocsinh lúc hàm này được gọi. Để thay đổi context, chúng ta có thể dùng hàm Apply(), Call() hay Bind() hỗ trợ sẵn bởi Javascript. Cụ thể trong trường hợp này chúng ta có thể dùng hàm Bind() để gắn context vào hàm callback đó.

//Thay vì viết
$(‘button’).click(Hocsinh.printName);

//Chúng ta sẽ viết
$(‘button’).click(Hocsinh.printName.Bind(Hocsinh));

          Đoạn code trên có ý nghĩa là: khi hàm click() gọi tới hàm callback Hocsinh.printName, thì context của hàm callback này là đối tượng Hocsinh chứ không phải đối tượng $(‘button’). Khi đó thì hàm callback Hocsinh.printName sẽ lấy đúng giá trị this.name là Hocsinh.name. Vấn đề được giải quyết!

2. Con trỏ this trong closure

          Nói một cách ngắn gọn thì closure là một hàm con (inner function) nằm bên trong 1 hàm khác (outer function). Mọi người có thể tìm hiểu thêm ở đây. Ta đã biết rằng closure thì không thể truy cập tới con trỏ this của hàm cha (outer function), do đó sẽ có thể xuất hiện trường hợp như sau:

var user = {
    tournament:"The Masters",
    data: [
         {name:"T. Woods", age:37},
         {name:"P. Mickelson", age:43}
     ],

     clickHandler: function () {
        //Sử dụng con trỏ this ở đây thì OK, this đang mang giá trị tham chiếu tới đối tượng “user”
        this.data.forEach (function (person) {
            //Tuy nhiên, trong closure này thì this không còn tham chiếu tới đối tượng “user” nữa
            // Hàm inner function này không thể truy cập tới this của outer function

            console.log (person.name + " is playing at " + this.tournament);
            })

     }

}

user.clickHandler();

Kết quả của đoạn mã trên như sau:

//Chú ý kết quả undefined
T. Woods is playing at undefined
P. Mickelson is playing at undefined

          Như mong đợi của chúng ta, thì this (bôi đỏ) phải tham chiếu tới giá trị của đối tượng user, khi đó ta sẽ lấy được thông tin về tournament của đối tượng user. Tuy nhiên giá trị this bên trong một hàm closure thì không thể truy cập tới giá trị this của hàm bên ngoài (trong trường hợp này nếu không dùng strict mode thì this mang giá trị của biến toàn cục window).

          Để sửa lỗi cho trường hợp này, các javascript developer thường giải quyết bằng việc gán giá trị của biến this vào một biến trung gian trước khi gọi closure:

var user = {
    tournament:"The Masters",
    data: [
         {name:"T. Woods", age:37},
         {name:"P. Mickelson", age:43}
     ],

     clickHandler: function () {
        //Sử dụng con trỏ this ở đây thì OK, this đang mang giá trị tham chiếu tới đối tượng “user”
        var self = this;
        this.data.forEach (function (person) {
            //Ta sẽ dùng biến self như một biến bình thường trong hàm closure
            console.log (person.name + " is playing at " + self.tournament);
        });
    }
}

user.clickHandler();

           Đoạn code trên trông có vẻ kì lạ đối với những người ít code bằng Javascript trước đây, tuy nhiên đây là một tình huống xảy ra khá thường xuyên trong Javascript.

3. Con trỏ this trong trường hợp gán hàm cho một biến khác

           Trường hợp ta gán hàm cho một biến khác, cũng sẽ xảy ra tình trạng thay đổi context của hàm nếu được gọi. Ta xét ví dụ sau:

//Định nghĩa 1 đối tượng với phương thức hiển thị thuộc tính ra màn hình
var name = “Peter”;
var Hocsinh = {
    name: “John”,
    printName: function(){
        console.log(this.name);
    }
};

//Gán hàm Hocsinh.printName vào một biến
Var printHocsinhName = Hocsinh.printName;

//Gọi hàm printHocsinhName để hiển thị tên học sinh
printHocsinhName();


//------> Kết quả
Peter

     Cũng tương tự như các trường hợp đã phân tích ở trên, context của hàm Hocsinh.printName đã bị thay đổi khi ta thực hiện gán hàm cho đối tượng khác. Để giữ nguyên được context là biến Hocsinh thì ta sẽ sửa lại code như sau:

//Gán hàm Hocsinh.printName vào một biến
Var printHocsinhName = Hocsinh.printName.bind(Hocsinh);

//Gọi hàm printHocsinhName để hiển thị tên học sinh
printHocsinhName();


//------> Kết quả
John

4. Con trỏ this trong hàm mượn (borrowing methods)

          Hàm mượn (borrowing method) là một trong những khái niệm độc đáo của Javascript. Để hiểu rõ được nó có lẽ cần thêm một bài viết riêng, tuy nhiên mình sẽ đưa ra ví dụ về việc nó thay đổi context của con trỏ this như thế nào. Xét ví dụ sau:

// Chúng ta có 2 đối tượng, 1 đối tượng có hàm computeAvg() và 1 đối tượng thì không
// Chúng ta sẽ thực hiện mượn hàm này
var gameController = {
    scores: [10, 15, 20],
    avgScore: null,
    players: [
        {name: "Tommy", playerID: 987, age: 23},
        {name: "Pau", playerID: 87, age: 33}
    ]
};

var appController = {
    scores: [30, 40, 50],
    avgScore: null,
    computeAvg: function () {      
       var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
           return prev + cur;
       });
       this.avgScore = sumOfScores / this.scores.length;
   }
};

           Ta muốn mượn hàm computeAvg() của đối tượng appController để tính điểm trung bình cho đối tượng gameController, vậy cần gọi hàm này như thế nào? Ở đây do hàm computeAvg() thuộc đối tượng appController, nếu muốn thực hiện tính điểm trung bình cho đối tượng gameController thì hàm này phải truy cập được tới các thuộc tính của đối tượng này. Do đó ta cần phải thay đổi context của hàm computeAvg() sang thành đối tượng gameController khi chạy, ta sẽ dùng hàm apply() trong JS để làm được điều này:

appController.computeAvg.apply(gameController);
console.log(gameController.avgScore);

           Như vậy ta vừa thực hiện dùng hàm mượn (borrowing method) và thay đổi context để thực hiện.

Tóm lại

           Qua vài chia sẻ trên đây, hi vọng mọi người có thể hiểu rõ hơn về con trỏ this trong lập trình Javascript. Chúng ta có trong tay các công cụ là các hàm như apply(), bind(), call() để kiểm soát con trỏ this trong nhiều tình huống khác nhau.

         Chúng ta thấy rằng, hầu hết mọi rắc rối xảy ra với con trỏ this là do dự thay đổi context của hàm khi được gọi (đã không còn là context ban đầu nơi bản thân hàm được khai báo), cụ thể là trong: hàm callback, closure, gọi từ một đối tượng khác hay khi trong thực thi hàm mượn (borrowing method). Do đó, quy tắc cốt lõi cần nhớ khi làm việc với con trỏ this là: luôn chú tới context của con trỏ this khi hàm được gọi, đảm bảo chúng ta đang sử dụng đúng context của hàm như ý muốn.

Bài viết gốc được đăng tải tại nhungdongcodevui.com

Có thể bạn quan tâm:

Xem thêm các việc làm IT hấp dẫn tại TopDev