Con trỏ this trong Javascript

Note: Bài viết nguồn ở đây: Dùng con trỏ this trong JS thế nào cho đúng

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ế. 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. Sẽ là hơi mất cô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.

Nhắc lại về con trỏ this

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 một ngữ cảnh (context) được nhắc đến trước đó. 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 xem sao nào.

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();

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.

Tuy nhiên, 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:

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

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

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);     //kq: undefined

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’). Do đó khi hàm Hocsinh.printName() được kích hoạt, con trỏ this đang tham chiếu tới $(‘button’) chứ không phải đối tượng Hocsinh, dẫn tới việc gọi this.name là vô nghĩa.

Để đ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. 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 ) );

Gợi ý: mọi người có thể tìm hiểu thêm về hàm Apply() và Call(), cũng dùng để thay đổi context trong JS.

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). 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

Để 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 () {
        var self = this;                                // <===== thay đổi ở dòng này nè
        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 (nhưng mong muốn là ra John mà???)

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

Nhớ sử dụng bind() để gán đúng context nhé.

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. Muốn làm được điều này ta cần phải thay đổi context của hàm computeAvg() sang thành đối tượng gameController khi chạy, hàm apply() trong JS sẽ giúp ta 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ổng kết

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. Bạn có thể xem thêm về những thứ đó ở ĐÂY.

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.

Chúc thành công. Thân!

vcttai 18-06-2017

Bài viết nguồn: nhungdongcodevui.com