Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what is the meaning of this in javascript", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the meaning of this in javascript" can help you solve your doubts.

This, which means "current; this" in Chinese, is a pointer variable in javascript that points to the environment in which the current function is running. When you call the same function in different scenarios, the point of this changes, but it always points to the real caller of the function in which it is located; if there is no caller, this points to window.

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

The scope of the JavaScript function is static, but the function call is dynamic. Because the function can be executed in different running environments, JavaScript defines the this keyword in the function body to get the current running environment.

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.

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); read here, this article "what is the meaning of this in javascript" has been introduced, and you need to practice and use the knowledge points of this article before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.