What underlies this JavaScript idiom: var self = this?

by

See this article on alistapart.com. (Ed: The article has been updated since originally linked)

self is being used to maintain a reference to the original this even as the context is changing. It’s a technique often used in event handlers (especially in closures).

Edit: Note that using self is now discouraged as window.self exists and has the potential to cause errors if you are not careful.

What you call the variable doesn’t particularly matter. var that = this; is fine, but there’s nothing magic about the name.

Functions declared inside a context (e.g. callbacks, closures) will have access to the variables/function declared in the same scope or above.

For example, a simple event callback: 

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

More Related Contents:

  1. How do JavaScript closures work?
  2. var self = this?
  3. JavaScript closures vs. anonymous functions
  4. Is it possible to gain access to the closure of a function?
  5. Please explain the use of JavaScript closures in loops [duplicate]
  6. JavaScript variable binding and loop
  7. Is window really global in Javascript?
  8. JavaScript scope and closure
  9. JavaScript Variable Scope [duplicate]
  10. javascript closure immediate evaluation [duplicate]
  11. dynamically call local function in javascript
  12. What is the scope of this JavaScript function
  13. JavaScript closure inside loops – simple practical example
  14. What is the purpose of wrapping whole Javascript files in anonymous functions like “(function(){ … })()”?
  15. Assign click handlers in for loop
  16. Preserving a reference to “this” in JavaScript prototype functions [duplicate]
  17. Calling an asynchronous function within a for loop in JavaScript
  18. How should I call 3 functions in order to execute them one after the other?
  19. Referencing “this” inside setInterval/setTimeout within object prototype methods [duplicate]
  20. What is this JavaScript pattern called and why is it used?
  21. How can I access local scope dynamically in javascript?
  22. How to use setInterval function within for loop
  23. How are local variables referenced in closures? [duplicate]
  24. Is a closure for dereferencing variables useful?
  25. Chrome console already declared variables throw undefined reference errors for let
  26. Global variables in Meteor
  27. Where does a JavaScript closure live?
  28. Context-preserving eval
  29. Javascript eval on global scope?
  30. Setting onclick to use current value of variable in loop [duplicate]

Leave a Comment