Understanding Javascript scope with “var that = this” [duplicate]

by

The most important thing to understand is that a function object does not have a fixed this value — the value of this changes depending on how the function is called. We say that a function is invoked with some a particular this value — the this value is determined at invocation time, not definition time.

  • If the function is called as a “raw” function (e.g., just do someFunc()), this will be the global object (window in a browser) (or undefined if the function runs in strict mode).
  • If it is called as a method on an object, this will be the calling object.
  • If you call a function with call or apply, this is specified as the first argument to call or apply.
  • If it is called as an event listener (as it is here), this will be the element that is the target of the event.
  • If it is called as a constructor with new, this will be a newly-created object whose prototype is set to the prototype property of the constructor function.
  • If the function is the result of a bind operation, the function will always and forever have this set to the first argument of the bind call that produced it. (This is the single exception to the “functions don’t have a fixed this” rule — functions produced by bind actually do have an immutable this.)

Using var that = this; is a way to store the this value at function definition time (rather than function execution time, when this could be anything, depending on how the function was invoked). The solution here is to store the outer value of this in a variable (traditionally called that or self) which is included in the scope of the newly-defined function, because newly-defined functions have access to variables defined in their outer scope.

More Related Contents:

  1. javascript show intro animation, then website
  2. “Cross origin requests are only supported for HTTP.” error when loading a local file
  3. Choosing and activating the right controls on an AJAX-driven site
  4. Get cookie by name
  5. How to pass parameters using ui-sref in ui-router to controller
  6. Callback after all asynchronous forEach callbacks are completed
  7. Why does a while loop block the event loop?
  8. Array.fill(Array) creates copies by references not by value [duplicate]
  9. How can I custom-format the Autocomplete plug-in results?
  10. (HTML) Download a PDF file instead of opening them in browser when clicked
  11. Merging or Combining two onEdit trigger functions
  12. Relation between CommonJS, AMD and RequireJS?
  13. Intercepting call to the back button in my AJAX application
  14. Proper use of const for defining functions
  15. Why do I need to copy an array to use a method on it?
  16. Generating Fibonacci Sequence
  17. Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?
  18. How to get an element’s top position relative to the browser’s viewport?
  19. Is it a good practice using Observable with async/await?
  20. Javascript sort array of objects by a boolean property
  21. Can I wrap each line of multi-line text in a span?
  22. How to get the currently opened tab’s URL in my page action popup?
  23. What are JavaScript’s builtin strings?
  24. Why is node.js asynchronous?
  25. getting the last item in a javascript object
  26. image.onError event never fires, but image isn’t valid data – need a work around
  27. Refresh iFrame (Cache Issue)
  28. Remove disabled attribute onClick of disabled form field
  29. prototypal inheritance concept in javascript as a prototype based language
  30. Process a continuous stream of JSON

Leave a Comment