How to use this in JavaScript

This article mainly introduces "how to use this in JavaScript". In daily operation, I believe many people have doubts about how to use this in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use this in JavaScript". Next, please follow the editor to study!

This is an important keyword in object-oriented language. understanding and mastering the use of this keyword is very important to the robustness and beauty of our code. The this of javascript is different from pure object-oriented languages such as Java and C #, which makes this more complicated and confusing.

Situations used by this:

1. Pure function

two。 Object method call

3. Call the constructor using new

4. Internal function

5. Use call / apply

6. Event binding

1. Pure function

Var name = 'this is window'; / / define the name attribute of window function getName () {console.log (this); / / console output: Window / / this points to the global object-- window object console.log (this.name); / / console output: this is window /} getName ()

Running result analysis: the this in the pure function points to the global object, that is, window.

two。 Object method call

Var name = 'this is window'; / / define the name attribute of window to see if this.name will call var testObj = {name:'this is testObj', getName:function () {console.log (this); / / console output: testObj / / this points to testObj object console.log (this.name); / / console output: this is testObj}} testObj.getName ()

Running result analysis: the this in the called method points to the object that called the method.

3. Call the constructor using new

Function getObj () {console.log (this); / / console output: newly created getObj object} new getObj () pointed to by getObj {} / / this

Run the result analysis: the this in the new constructor points to the newly generated object.

4. Internal function

Var name = "this is window"; / / define the name attribute of window to see if this.name will call var testObj = {name: "this is testObj", getName:function () {/ / var self = this; / / temporarily save this object var handle = function () {console.log (this); / / console output: Window / / this points to the global object-- window object console.log (this.name) / / console output: this is window / / console.log (self); / / the this that can be obtained points to the testObj object} handle ();}} testObj.getName ()

Run result analysis: the this in the internal function still points to the global object, that is, window. This is generally considered to be a design error in the JavaScript language because no one wants the this in the internal function to point to the global object. The general way to handle this is to save this as a variable, usually that or self, as shown in the above code.

5. Use call / apply

Var name = 'this is window'; / / define the name attribute of window to see if this.name will call var testObj1 = {name:' this is testObj1', getName:function () {console.log (this); / / console output: testObj2 / / this points to testObj2 object console.log (this.name); / / console output: this is testObj2} var testObj2 = {name: 'this is testObj2'} testObj1.getName.apply (testObj2) TestObj1.getName.call (testObj2)

Note:apply is similar to call, except that the second parameter is different:

Call (thisArg [, arg1,arg2, …) ]); / / the second parameter uses the parameter list: arg1,arg2,...

[2] apply (thisArg [, argArray]); / / the second parameter uses the parameter array: argArray

Run result analysis: the this in the function using call / apply points to the bound object.

6. Event binding

The this in the event method should be the most confusing place, and most errors are caused by this.

/ / bind function btClick () {console.log (this) on the page Element; / / console output: Window / / this points to the global object-window object}