The reference of this cannot be determined when a function is defined. It is only established when the function is executed; in fact, this ultimately refers to the object that calls it.
Defining a function and an object, and then calling them. Note that only when the function is called does this point to the caller, except for arrow functions.
functions(){ console.log(this);}// Direct call in window // Not use stricts();// Window // Equivalent to window.s(), the caller is window// window is an instance of Window // window instanceof Window // true// Create a new object s1var s1 ={t1:function(){// testing the reference of this to the caller console.log(this);// s1s();// Window // This call still equivalent to window.s(), and the caller is window},t2:()=>{// testing arrow function, where this does not point to the caller console.log(this);},t3:{// testing an object inside an objecttt1:function(){ console.log(this);}},t4:{// testing arrow function and non-function call where this does not point to the callertt1:()=>{ console.log(this);}},t5:function(){// testing the reference of this when a function calls an arrow function, which points to the caller of the parent objectreturn{tt1:()=>{ console.log(this);}}}}s1.t1();// s1 object // the caller here is s1, so the printed object is s1s1.t2();// Windows1.t3.tt1();// s1.t3 objects1.t4.tt1();// Windows1.t5().tt1();// s1 object
A special case: calling the same method but getting different this references. It is important to note that this ultimately refers to the object that calls it.
var s1 ={t1:function(){ console.log(this);}}s1.t1();// s1 objectvar p = s1.t1;p();// Window// It is important to note that when the method is assigned to p, calling it directly yields Window as the this reference// This case is not actually special, because a function is also an object, and in this case, p is assigned a functionconsole.log(p);// ƒ (){console.log(this);}// This function is called by window, and therefore, this points to window
Using apply, call, and bind can change the reference of this. For more information, refer to
https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/apply%E3%80%81call%E3%80%81bind.md