<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
/*
* Discussion on js this
*/
//Situation 1 implicit call
var a = 2;
function _f1(){ console.log(this.a) } _f1.a = 1; _f1();//Here is the implicit call that actually calls the _f1() function is window, so this in _f1 points to Global function _f2(){ this.a = 3;//Here this points to the global because it is the window that calls setTimeout(function() { console.log(this.a); },1000) }
_f2()//output 3
//So how can we make this this point back to the corresponding function or object?
//Method 1: Use the function directly in the function
var a = 2;
function _f1(){ console.log(_f1.a) } _f1.a = 1; _f1();//Output 1 //Method 2: Use call() or apply() to force this inside the function to an object var a = 2; function _f1(){ this.a = 4 console.log(this.a) } _f1.call(_f1); //Output 4 _f1.bind(_f1)//output 4 function _f3(a,b){ console.log("a:"+a+"b:"+b);
}
_f3.apply(Object.create(null),[1,2]) //Use create here to create an empty object to occupy
//Method 3: Use a variable to store the current this. The purpose of this is to make it a local global variable so that the closure can directly call
function _f2(){ var _this = this; setTimeout(function(){ console.log(_this. a); },1000) } // //You can also write like this function _f2(){ setTimeout(function(){ console.log(this.a); }.bind(this),1000) } //Of course we You can also use the object method function _f1() { console.log(this.a) } var a = 1;
{obj = var A: 2, Fun: _f1 } obj.fun () // 2 where the output is in fact complete showing window.obj.fun (); here, this point, but the points to call anyone who obj // embodiment Four: Use the arrow function in the arrow function to point this to who was created in the scope of the arrow function var _f1 = () => { this.a = 2; console.log(this.a) } Summary: this Pointing is not simply pointing to the function itself or the object itself. Its pointing is determined according to the context of execution. The rule before es5 is that whoever calls it points to whom (the principle of proximity) The arrow function is created in whose scope It refers to who is bound to the newly created object called by new and bound to the specified object called by call or apply or bind(). By default, if an error is reported in strict mode, otherwise it is bound to the window global </ script> </body>
</html>