‘this’ keyword, not clear

by

In Javascript, the value of this is dependent on the way you call the function.

There are 5 ways to call a function in JS, and they all have effect on this:

  1. new Foo(); <= here, you’re creating a new object, and this will reflect that new object
  2. Foo(); <= here, you’re calling the function as-is, and this will be the global object(!)
  3. var obj = { foo: Foo };
    obj.foo();     <= here, you’re calling the function as a method of obj; this will be obj
  4. Foo.call(thisObject, arg1, arg2); <= here, you can specify the value of this in the first argument
  5. Foo.apply(thisObject, [args]); <= here, you can specify the value of this in the first argument

In 4 and 5, the difference between call and apply is that with call, you need to pass all the arguments separately, whereas with apply, you can pass an array containing all the arguments.

Note that in my example 2 above, the function should have been called foo instead of Foo. Since it’s impossible to know off-hand whether a function is supposed to be called with new or not, the consensus is to start the function name with a capital letter if it’s a constructor (and should be used with new); otherwise, it should start with lowercase.

More Related Contents:

  1. Use of ‘prototype’ vs. ‘this’ in JavaScript?
  2. Why does String.prototype log it’s object like a standard object, while Array.prototype logs it’s object like a standard array?
  3. How do I use ‘this” keyword in an object literal? [closed]
  4. Why is extending native objects a bad practice?
  5. What is the reason to use the ‘new’ keyword at Derived.prototype = new Base
  6. Pass correct “this” context to setTimeout callback?
  7. Advantages of using prototype, vs defining methods straight in the constructor? [duplicate]
  8. Javascript setInterval and `this` solution
  9. Assigning prototype methods *inside* the constructor function – why not?
  10. JavaScript: What dangers are in extending Array.prototype?
  11. Parse JSON String into a Particular Object Prototype in JavaScript
  12. Multiple inheritance/prototypes in JavaScript
  13. Why is mutating the [[prototype]] of an object bad for performance?
  14. “this” keyword in event methods when using JavaScript prototype object
  15. How do I pass the this context to a function?
  16. Asynchronous operations in constructor
  17. Set “this” variable easily?
  18. ‘this’ does not work properly in another event. I’m clueless as to why [duplicate]
  19. Javascript when to use prototypes
  20. Calling method using JavaScript prototype
  21. Create a reset of javascript Array prototype when Array.prototype has been modified?
  22. Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)
  23. Understanding Crockford’s Object.create shim
  24. Preserve ‘this’ reference in javascript prototype event handler [duplicate]
  25. Function.prototype is a function
  26. onClick Function “this” Returns Window Object
  27. JavaScript Event prototype in IE8
  28. JavaScript: What are .extend and .prototype used for?
  29. JS defineProperty and prototype
  30. [[Prototype]] vs prototype: ..what is the difference? (MyCons.__proto__ === MyCons.prototype) equals FALSE

Leave a Comment