In the process of learning and working with javascript the use of this is the easiest thing for js programmers to headache. So this what is it? This pointer is probably a not very unfamiliar concept in object oriented programming. If you have ever learned Java or C #, you must also remember that the this keyword refers to the object that calls the function. Here this it likewise also see the examples below to learn more about its basic offline.
1 2 3 4 5 6 7 8 9 10 11 12 | var info = { fullName: 'Nguyen Van A', age: 23, address: 'Tran Cao Van', showInfo: function() { //Ở đây this sẽ là object info console.log(this.fullName + ' ' + this.age + ' years old'); } }; info.showInfo(); //Nguyen Van A is 23 years old |
Here this pointer is pointing to the correct object info to display the correct information you want. There is one other case we declare global variables in scope, the moment this will be pointing to the window where the object that contains the global variable.
1 2 3 4 5 6 7 8 9 10 11 | var fullName = 'Nguyen Van A'; var age = '23'; function showInfo() { console.log(this.fullName + ' ' + this.age + ' years old'); } window.showInfo(); //Nguyen Van A is 23 years old showName(); //Nguyen Van A is 23 years old |
So with the 2 above examples, we will think that this is generally easy to understand, but it is not difficult, right? But it’s not that the following things here are exactly what we need to be aware of.
1. Used in conjunction with callback function
For example we want to click on a button to show user information. We simply pass the showInfo () function as a callback to the click function.
1 2 3 4 5 6 7 8 9 10 11 12 | var info = { fullName: 'Nguyen Van A', age: 23, address: 'Tran Cao Van', showInfo: function() { //Ở đây this sẽ là object info console.log(this.fullName + ' ' + this.age + ' years old'); } }; $('button').click(info.showInfo); //showInfo truyền vào như callback |
However, when opening developer tools, this here is pointing to the button , not the info object as before. That will make the display of the data wrong. To fix this error we just need to use the bind or an anonymous function.
1 2 3 4 5 6 | // Dùng anonymous function $('button').click(function(){ info.showInfo() }); // Dùng bind $('button').click(info.showInfo.bind(info)); //this ở đây vẫn là object info |
2. Use with anonymous function
Suppose there is a school object and you want to show all the classes in that school then we do the following.
1 2 3 4 5 6 7 8 9 10 11 12 | var school = { nameSchool: 'Tran Phu', classes : ['10A', '11B', '12C'], showAllClass: function() { this.classes.forEach(function(cl){ console.log(this.nameSchool + ' have a class named ' + cl); }); } }; school.showAllClass(); // undefined have a class named 10A |
Now we are using the forEach function and inside is an anonymous fucntion, this will point to the window object so nameSchool will now be undefined. To solve this we often use is to create a variable to assign this value, and access that value in an anonymous function.
1 2 3 4 5 6 7 | showAllClass: function() { var schoolObj = this; //Gán giá trị this vào biến schoolObj this.classes.forEach(function(cl){ console.log(schoolObj.nameSchool + ' have a class named ' + cl); }); } |
3. Use when assigning a function to another variable
This case is very rare to encounter. That is the case when we assign a function to a variable, then call that function. The function will not run as expected, because the object calling the function is now the object window.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var fullName = 'Tran Thi B'; var info = { fullName: 'Nguyen Van A', age: 23, address: 'Tran Cao Van', showInfo: function() { //Ở đây this sẽ là object info console.log(this.fullName + ' ' + this.age + ' years old'); } }; var showFunc = info.showInfo; //Gọi hàm show để hiển thị thông tin showFunc(); // Tran Thi B undefined years old |
Similar to the cases analyzed above, the context of the info.showInfo function is changed when we assign the function to another specific object here this is being assigned to the object window. To keep the context as the info variable, we will edit the code as follows:
1 2 3 4 5 | var showFunc = info.showInfo.bind(info); //Gọi hàm show để hiển thị thông tin showFunc(); |
summary
Through this article you have also seen how this is a bit complicated already. Be careful using it from now on to avoid errors! Reference link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this