Understanding `this` in Javascript

• thislang

  4 33 0.0 JavaScript

  A subset of javascript implemented in that subset of javascript. Yes, it can run itself.

Method calls are nothing special, just calls which have the form .(). For example: const foo = { bar: function () { console.log(this); } }; foo.bar(); Enter fullscreen mode Exit fullscreen mode For method calls, this gets set to the object from which the method was called. Again, functions don't matter* for this, just the calls. function foo() { console.log(this); } let x = { bar: foo }; foo(); // Window x.bar(); // x let baz = x.bar; baz(); // Window Enter fullscreen mode Exit fullscreen mode Even baz will print Window. It's not a method call, it doesn't follow the method call format! 3. Constructor calls Or new calls (are calls too I suppose). In that case this gets set to the empty object {}. function Foo() { console.log(this); } new Foo(); // {} Foo(); // Window let x = { foo: Foo }; x.foo(); // x Enter fullscreen mode Exit fullscreen mode That's pretty much all there is to it......... ........or is it?! I apologize for this Remember how I told you this is all about function calls, not the functions themselves? Well, I lied. Ok look, let me remind you once again: They made javascript in 10 days! The this rules we've discussed above, they are a bit limiting. So there's three* ways you can override these rules. * don't you dare even mention apply 1. call The special call method on functions allows you to pass your own custom value of this to a function call (or the call's scope I should say). function foo() { console.log(this); } foo.call({ a: 42 }); // { a: 42 } Enter fullscreen mode Exit fullscreen mode 2. bind bind is another builtin method on functions. Much like call it too allows you to pass a custom value for this to the function call. Except unlike call, bind doesn't immediately call the function. It instead returns a special 'bound' functions. function foo() { console.log(this); } let bar = foo.bind({ a: 42 }); foo(); // Window bar(); // { a: 42 } Enter fullscreen mode Exit fullscreen mode 3. Arrow functions Arrow functions are the third way to override the call rules for this described previously. Arrow functions capture the this from the function scope in which they are created. function foo() { const bar = () => { console.log(this); }; return bar; } let bar = foo.call({ a: 42 }); bar(); // { a: 42 } Enter fullscreen mode Exit fullscreen mode So they're essentially the same as defining a normal function but then also binding it. // achieves the same effect function foo() { const bar = (function () { console.log(this); }).bind(this); return bar; } let bar = foo.call({ a: 42 }); bar(); // { a: 42 } Enter fullscreen mode Exit fullscreen mode In summary Yes, no pun in the heading this time (oops). The key takeaways are this: In JS this is associated with the current function scope, and since function scopes are associated with functions calls -- this is associated with calls. Those are the rules but they can be overridden. That is the reason why people are often confused when passing functions referencing this to callbacks. It's also why you were told to use arrow functions if you need to pass them to callbacks. I too was confused about this for a long time. Instead of taking the more sensible approach of reading an article such as this one, I instead decided to implement my own javascript. I wrote a subset of javascript. In that subset of javascript. If you want to go down that rabbit hole, then check out the repo: https://github.com/BlueBlazin/thislang If you want more posts on other javascript or computing related topics let me know on twitter: https://twitter.com/suicuneblue

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project