JavaScript-based THIS pointing summary

In JavaScript, THIS is always the heart disease of the front-end colleague, and it is the first choice for each interview question. Now we will summarize the pointing points in JS. First of all, you need to understand several concepts:

1: The global variable is mounted under the Window object

2: Generally, this point to its call

3: In the arrow function of the ES6, this point to the creation, is not the caller

4: By Call, Apply, Bind can Change the point of this point

We specifically analyze

1:

(non-stringent mode) when the function is called

  const func = function () {console.log (this); const func2 = function () {console.log (this);}; func2 (); // WINDOW}; (); // WINDOW  
(strict mode)

‘Use strict’ const func = function () {console.log (this); const func2 = function () {console.log (this);}; func2 (); // undefined}; func ); // Undefined
  Combined with fourth and first two rules: funcThis function is global, default mount under Window object, this points to its caller is Window, so outputting a Window object, but in strict mode, THIS does not allow the global variable Window, so output is undefined (func2 in functions) Direct calls to the global WINDOW, in fact, this belongs to the defects in JavaScript design, the correct design method is the inside of the internal function to be bound to the object corresponding to its outer function, in order to avoid this design defect, smart JavaScript The programmer came up the method of variable alternative, and the variable was generally named That. This method will be said later).  2: As the object method 

const user = {username: ‘small 张’, age: 18, selfintroduction: function () {const str = ‘My name is:’ + this.username + “, age is:” + this.age; console.log (str); const loop = function () {console.log (‘I The name is: ‘+ this.username + “, age is:” + this.Age);}; loop (); // My name is: undefined, age is: undefined}}; user.selfintroduction (); / / My name is: Xiao Zhang, age is: 18

According to the first rule, this point to his caller, the caller of the selfintroduction () method Is User, so in the SelfIntroduction () method, this point points to his parent object, butThe reason why the loop method output for the undefined is what I said above JavaScript design defects. In this case, we usually choose to cook in the SelfIntRoduction () method.

Const user = {username: ‘small 张’, age: 18, selfintroduction: function () {const str = ‘My name is:’ + this.username + “, Age is:” + this.age; console.log (str); const there = this; const loop = function () {console.log (‘My name is:’ + That.username + “, age Yes: “+ That.Age);}; loop (); // My name is: small, age is: 18}}; user.selfintroduction (); // My name is: Xiao Zhang, age is : 18
  At this time, the this of LOOP points to it is ideal.  
Const user = {username: ‘small 张’, age: 18, selfintroduction: function () {const str = ‘My name is:’ + this.username + “, Age is:” + this.age; console.log (str);}}; const other = user.selfintroduction; other (); // My name is: undefined, age is: undefinedConst Data = {Username: ‘Xiao Li’, AGE: 19,}; Data.selfintroduction = User.selfintroduction; data.selfintroduction (); // My name is: Xiao Li, age is: 19

In view of this code, assign the selfintroduction () to the global variable Other, call the other () method, Other mount under the global function Window object, there is no UserName and Age under the Window object These two properties, so the output is undefined. The second code, declares that the Data object, contains the username and aggriance, remember that our second rules are generally this points to its caller, everyone understands that Data is the caller of the function of selfintroduction () Therefore, the UserName and AGE of DATA are output.
 3: Trigger in HTML   

Click on me
   
const btn = document.GtelementByid (‘btn’); btn.addeventListener (‘click “, function () {Console.log (this); //

Click on me

})

In the case, it is actually followed by the second rule. Generally, this point to its call. This pointing to the event source of the event is Event.

4: New keyword (constructor)
   
const fun = function (username) {this.username = username;} const user = new fun ('Guo Degang'); console.log (user.username); // Guo Degang
This will not be described, and the NEW keyword constructs an object instance, assigns the value gives User, so UserName is the properties of the User object. 5: ES6 (arrow function)
  const func1 = () => {Console.log (this);} 
const Data = {username: ‘principal’, selfintroduction: function () {Console. LOG (this); // Object {username: “principal”, selfintroduction: function} const func2 = () => {console.log (this); // Object {username: “principal”, selfintroduction: function}} func2 ();}} Data.selfintroduction ();

Everyone is a third guideline that I started: ES6 arrow function, this point to the creation, Not the caller, FUN1 is created under the full function function, so this points to the global WINDOW, while fun2 is in the object DACreate the following ta, this data point to an object, so func2 function inside this point to data objects, pointing arrow personally think this is a function of es6 improvements I mentioned above javascript design defects, (personal knowledge).

6: change this point of

call, apply, bind these three functions are a function of this change can be artificially directed, where not more the difference between these three, in the next blog where I will explain the difference between these three. Now an example to acquire a
   
const func = function () {console.log (this);}; func (); //windowfunc.apply ({ userName: “GuoDeGang”}); // Object {userName: “GuoDeGang”}

these three methods are artificially change this point, the difference is the call , apply the method will be performed immediately after this binding, and bind method returns an executable function.

say that a lot of sum up what I said at the beginning 4:00
  1: Global variables default mounted in the window object  
2: in general this refers to its caller
  3: arrow function es6 in, this refers to the creator, not the caller  
4: the call, apply, bind can be changed to change this point

To tell the truth the first time to write a blog, really quite disturbed, and no one will look at me blog? You will write incorrect? …… think much better, summed up: bad place please correct me. Based on this javaScript above this point summary onIt’s a full content of Xiaobian sharing to everyone, I hope I can give you a reference, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment