Geek Answers Handbook

A function is defined using 'this' but is executed without 'this'

I expected the second call to the taco function to generate a runtime error, since I am not calling it with the keyword this:

function foo() { var bar = "baz"; this.taco = function() { console.log(bar); }; this.taco(); taco(); // I expected a runtime error here. } foo();

However, it is not.

Here is a fiddle of the same code: http://jsfiddle.net/phillipkregg/gdFxU/226/

Is JavaScript used using some type of implicit contextual control?

Just curious, thanks!

+4
source share
3 answers

The reason is that when you call foo() you call it in the scope of the window object. This means that inside foo() , this set to window .

So this.taco() is actually window.taco() , which is the same as taco() . In other words, taco() is a global function, so it works like you call it taco() , like window.taco() or like this.taco() when this is window .

If you include taco() as a new object like this, where this set to a new instance of foo and not equal to window , you get the expected error at runtime:

 function foo() { var bar = "baz"; this.taco = function() { console.log(this); console.log(bar); }; this.taco(); taco(); // I expected a runtime error here. } var x = new foo();

Example: http://jsfiddle.net/jfriend00/3LkxU/

If you are confused about the value of this , there are these javascript rules that define the value of this :

  • If you call a function with new as x = new foo() , then a new instance of foo , and this set to this object inside the function foo() and that the new instance is returned from foo() by default.

  • If you call some function, as usual, foo() , then this set as a global object, which is in the window browser, or if javascript newer has "strict" mode, then this will be undefined . This is what happened in your original example.

  • If you call a method with an object reference, for example obj.foo() , then this will be set as an obj object.

  • If you make a function call using .apply() or .call() , you can specifically determine what this value is for, with the first argument in .apply() or .call() . For example: foo.call(obj) will call the function foo() and set the this pointer to the obj object.

  • If you are not using any function call (for example, in the global area), then this will be either a global object ( window in the browser) or undefined in strict mode.

  • As with all of the above rules, this controlled by how the caller calls you, and not how the function / method is defined.

+8
source

The reason is this in foo (), when it calls the same as it is, it will reference the global object. This means that the taco function will be introduced globally.

To get the functionality you need, use the syntax new foo() instead. this will then refer to a new object to which taco assigned a new value (function). Calling taco directly will result in an error.

+2
source 
 foo(); // equals window.foo() , `this` equals `window` and `this.taco` equals `window.taco` and `window.taco` equals `taco` as it is global new foo(); //creates a new object. this will give error because here `this.taco` is not `taco`
+1
source

More articles:


All Articles