Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is this in javascript". In daily operation, I believe many people have doubts about what is 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 "what is this in javascript"! Next, please follow the editor to study!

In js, this means "this; current", which is a pointer variable that dynamically points to the running environment of the current function. When the same function is called in different scenarios, the direction of the this may also change, but it always points to the real caller of the function in which it is located; if there is no caller, it points to the global object window.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

After the JavaScript function is called, it is executed in a specific running environment, which is the caller of the function, or the object that calls the function. If the function does not have a caller (not through the object, but directly), the runtime environment is the global object window.

In order to be able to reference (access) the runtime environment during function execution, JavaScript adds a special this keyword. This is a pointer variable that points to the environment in which the current function is running.

When you call the same function in different scenarios, the direction of this may also change, but it always points to the real caller of its function (whoever calls it); if there is no caller, this points to the global object window.

We talked about the initial use of this pointers in the section "JS this and calling objects". For those who don't know, please click on the link to learn. This section focuses on in-depth analysis of this pointers.

Use this

This is automatically generated by the JavaScript engine when the function is executed, and there is a dynamic pointer in the function that refers to the current calling object. The specific usage is as follows:

This [. Attribute]

If the this does not contain attributes, the current object is passed.

This is flexible in use and contains a variety of values. For example, the following example uses the call () method to constantly change the this reference object within the function.

Var x = "window"; / / define the global variable x with initialization string "window" function a () {/ / define constructor a this.x = "a"; / / define private attribute x, initialize character a} function b () {/ / define constructor b this.x = "b" / / define private attribute x, initialize to the character b} function c () {/ / define a normal function, prompt the value of variable x console.log (x);} function f () {/ / define an ordinary function, prompt the value of x contained by this console.log (this.x);} f (); / / return the string "window", and this points to the window object f.call (window) / / return the string "window", pointing to the window object f.call (new a ()); / / return the character f.call this pointing to the instance of function a (new b ()); / / return the character bmaine this pointing to the instance of function b f.call (c); / / return the character undefined,this pointing to the function c object

The following is a brief summary of the performance and coping strategies of this in five common scenarios.

1. Normal invocation

The following example demonstrates the impact of function references and function calls on this.

Var obj = {/ / parent name: "parent obj", func: function () {return this;}} obj.sub_obj = {/ / child object name: "child object sub_obj", func: obj.func} var who = obj.sub_obj.func (); console.log (who.name); / / returns "child object sub_obj", indicating that this represents sub_obj

If you change the func of the sub-object sub_obj to a function call.

Obj.sub_obj = {name: "Child sub_obj", func: obj.func () / / call the method func of the parent object obj}

Then the this in the function represents the parent object obj in which the function is defined.

Var who = obj.sub_obj.func;console.log (who.name); / / returns "parent obj", indicating that this represents the parent obj

two。 Instantiation

When a function is called with the new command, this always refers to the instance object.

Var obj = {}; obj.func = function () {if (this = = obj) console.log ("this = obj"); else if (this = = window) console.log ("this = window"); else if (this.contructor = = arguments.callee) console.log ("this = instance object");} new obj.func; / / instantiation

3. Dynamic call

Using call and apply, you can force the this to point to the parameter object.

Function func () {/ / if the constructor of this is equal to the current function, then this is the instance object if (this.contructor = = arguments.callee) console.log ("this = instance object"); / / if this is equal to window, then this is the window object else if (this = = window) console.log ("this = window object") / / if this is another object, it means that this is another object else console.log ("this = = other objects\ nthis.constructor =" + this.constructor);} func (); / / this points to window object new func (); / / this points to instance object cunc.call (1); / / this points to numeric object

In the above example, when func () is called directly, this represents the window object. When the function is called with the new command, a new instance object is created, and this points to the newly created instance object.

When you use the call () method to execute the function func (), because the parameter value of the call () method is the number 1, the JavaScript engine forces the number 1 to be encapsulated as a numeric object, and this points to this numeric object.

4. Event handling

In the event handler summary, the this always points to the object that triggered the event.

Var button = document.getElementsByTagName ("put") [0]; var obj = {}; obj.func = function () {if (this = = obj) console.log ("this = obj"); if (this = = window) console.log ("this = window"); if (this = button) console.log ("this = button");} button.onclick = obj.func

In the above code, the this contained in func () no longer points to the object obj, but to the button button, because func () is called after it is passed to the button's event handler.

If you register the event handler using the DOM2 level standard, the procedure is as follows:

If (window.attachEvent) {/ / compatible with IE model button.attachEvent ("onclick", obj.func);} else {/ / compatible with DOM standard model button.addEventListener ("click", obj.func, true);}

In IE browsers, this points to window objects and button objects, while in DOM standard browsers, it only points to button objects. Because in IE browsers, attachEvent () is a method of the window object, and when the method is called, the this points to the window object.

To solve the browser compatibility problem, you can call the call () or apply () method to force the execution of the method func () on the object obj to avoid the problem of different browsers parsing different this.

If (window.attachEvent) {button.attachEvent ("onclick", function () {/ / Enforcement func () obj.func.call (obj) with call () method);} else {button.attachEventListener ("onclick", function () {obj.func.call (obj);}, true);}

When executed again, the this contained in func () always points to the object obj.

5. Timer

Use a timer to call a function.

Var obj = {}; obj.func = function () {if (this = = obj) console.log ("this = obj"); else if (this = = window) console.log ("this = window object"); else if (this.constructor = = arguments.callee) console.log ("this = instance object"); else console.log ("this = other objects\ n this.constructor =" + this.constructor);} setTimeOut (obj.func, 100)

In IE, this points to the window object and the button object for the same reason as the attachEvent () method explained above. In DOM-compliant browsers, this points to window objects, not button objects.

Because the method setTimeOut () is executed in the global scope, this points to the window object. To solve the browser compatibility problem, you can use the call or apply method.

SetTimeOut (function () {obj.func.call (obj);}, 100); at this point, the study of "what is this in javascript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.