What does 'this' mean in javascript link?

Question

I am not sure where this points to JavaScript. And I will give 2 examples.

Can you help me analyze them? Thank you very much.

//exmp1 function f1() { alert(this); function f2() { alert(this); } f2(); } f1(); //exmp2 var jsn = { name : "b", func : function() // closure { alert(this); return function() { return this; } } } alert(jsn.func()()); 

Answer 1

this is different from JavaScript than in some other languages ​​such as C ++ or Java. The value of this in your first example will always be a global object ( window , in browsers). this in your second example is the jsn object for the first warning, and window is the second. This is because this completely determined by how the function is called, and not where it is defined.

If you are not doing anything special when calling a function, this is a global object. When you call a function through an object property ( jsn.func() ), this set to the object from which the property emanates. (But make no mistake, func is not tied to jsn in any way; JavaScript has no methods, just functions; details .) f1 then returns a function that is called in the final alert ; since this call is not made through an object property, this set to the global object.

Some examples:

 // Simple function function foo() { alert(this === window); } foo(); // true, within the call, `this` === `window` // Object example, and twist at the end var obj = { func: function() { alert(this === obj); }, }; obj.func(); // true, within the call, `this` === `obj` obj["func"](); // true, within the call, `this` === `obj` var f = obj.func; // Not calling it, just getting a reference to the function f(); // false, within the call `this` !== `obj` (`this` === `window`) // Creating functions on the fly, returning them, and how that has // nothing whatsoever to do with how `this` gets set: var obj = { func: function() { return function() { alert("I'm a generated function"); alert(this === obj); }; } }; obj.func()(); // alerts the "I'm a generated function", then false; `this` !== `obj` obj.bar = obj.func(); obj.bar(); // alerts the "I'm a generated function", then true; `this` === `obj` 

There is a second way to control that this is inside the function: use the .call or .apply functions of the JavaScript functions:

 var obj = { func: function() { alert(this === obj); } }; function foo(a, b) { alert(this === obj); // Yes, really obj; see below alert(a); alert(b); } foo(1, 2); // alerts false (`this` !== `obj`), then 1, then 2 obj.func(); // alerts true, `this` === `obj` foo.call(obj, 3, 4); // alerts true (`this` === `obj`), then 3, then 4 foo.apply(obj, [5, 6]); // alerts true (`this` === `obj`), then 5, then 6 

As you can see, the first argument to call or apply is the object that does this inside the function call. The only difference between call and apply is how you specify the arguments to pass to the target function: With call you simply send them after the first argument; with application, you supply them as an array.

And finally, there is a third way: the new keyword. JavaScript has a concept of design functions. The purpose of the constructor function is to instantiate objects that are initialized in a specific way. Here is an example:

 function Foo(b) { this.bar = b; } var f = new Foo(); 

Technically, any function can be used as a constructor function. The agreement is to provide functions intended for use with new names starting with a capital letter, only to enhance them, which we call them in a special way.

The function call through new creates a new instance of the object and makes this object the value of this in the function call. So

 function Foo(b) { alert(this === window); } var f = new Foo(); // alerts false, `this` !== `window` (it points to the new object created for the call) var f = Foo(); // alerts true, `this` === `window` because we didn't use `new` 

As you can see, it is important to call the function correctly. If it is intended for use with new , call it through new ; if not, do not do this.

( new does more than just create an empty object; the created object has some other aspects defined in a certain way. I will not go into details here, but I did not want to leave you with the impression that all he did was create a new instance of the object.)

Answer 2

In the last example (a function inside a json object), this refers to the json object that holds this function.

In the first example, the first this refers to the object that holds f1 , which is usually the global window object. The second this in f2 also refers to the global object, not f1, and this is a known javascript bug when you have one function defined in another.

A common workaround is this (no pun intended):

 function f1() { alert (this); var that = this; function f2() { alert (that); } f2(); } 

Note that if you define a function in a json object, you can still “move” it, and the context of this will change. For instance:

 var car1 = { color: "red", f: function () { alert (this.color); } } car1.f(); // prints "red" var car2 = { color: "blue", } car2.f = car1.f; car2.f(); // prints "blue" 

Answer 3

In JavaScript, "this" always refers to an object that "owns" the function, or rather, the object with which the function was associated through the property at the time it was called. Consider this example:

 var f = function() { alert(this); } f(); // Alerts the "DOM window" (global) object, which // is implied if there is no explicit owner. var o = {toString:function(){return "Foo!";}} o.func = f; o.func(); // Alerts the "Foo!" object (o) since the // function then belongs to it as a member. 

Now about your specific examples, here's what happens:

 //exmp1 function f1() { alert(this); function f2() { alert(this); } f2(); // Alerts "the global object", since f2 // is not bound to any object property. } f1(); // Alerts "the global object" (probably DOM window) // for same reason as above. //exmp2 var jsn = { name : "b", func : function() { alert(this); // Will alert the "jsn" object, since it // owns the function in its "func" member. return function() { return this; // Returns whoever is calling it! }; } } alert(jsn.func()()); // "jsn.func()" returns a function which gets // called by the global "DOM window" object. 

Answer 4

when you use the function as a constructor, it points to the object you are creating.

 function Test() { this.test = true; } t = new Test(); alert(t.test);