Understanding 'this'

Understanding 'this'

'this' is useful

        var animal = function(){};

        animal.prototype.speak = function(){
          console.log( this.says ); // uses object's property
        };

        var dog = new animal();
        dog.says = 'woof';

        var cat = new animal();
        cat.says = 'meow';

        dog.speak(); // woof
        cat.speak(); // meow
      

'this' can be tricky

        // callbacks can be tricky
        function speak() {
          console.log( this.says );
        }

        function doTrick( trick ) {
          trick();
        }

        var dog = {
          says: 'woof',
          speak: speak
        };

        var says = "oops, global"; // `says` also property on global object

        doTrick( dog.speak ); // "oops, global"
      

Find the call-site

Where's the call-site?

        function speak() {
          console.log( this.says );
        }

        function doTrick( trick ) {
          trick();
        }

        var dog = {
          says: 'woof',
          speak: speak
        };

        var says = "oops, global";

        doTrick( dog.speak );
      

Where's the call-site?

        function speak() {
          console.log( this.says );
        }

        function doTrick( trick ) {
          trick(); // <-- CALL-SITE!!
        }

        var dog = {
          says: 'woof',
          speak: speak
        };

        var says = "oops, global";

        doTrick( dog.speak ); // dog.speak is just a reference
      

Use rules to determine value of 'this'

• Called with new?
• Called with call or apply (or bind)?
• Called with context object owning the call?
• strict mode?
• global object?
• *ES6 arrow?

Called with 'new'?

Uses the newly constructed object

        function animal( says ) {
          this.says = says;
        }

        var dog = new animal('woof');

        console.log( dog.says ); // woof
      

Called with 'call' or 'apply' (or 'bind')?

Uses the specified object

        function louder() {
          return this.says.toUpperCase();
        }

        function speak() {
          var greeting = louder.call( this ) + '! I can talk.';
          console.log( greeting );
        }

        var dog = {
          says: "woof"
        };

        var cat = {
          says: "meow"
        };

        louder.call( dog ); // WOOF
        louder.call( cat ); // MEOW
        speak.call( dog ); // WOOF! I can talk.
        speak.call( cat ); // MEOW! I can talk.
      

Called with a context object owning the call?

Uses the context object

        function louder( context ) {
          return context.say;
        }

        function speak( context ) {
          var greeting = louder.call( context ) + '! I can talk.';
          console.log( greeting );
        }

        var dog = {
          say: "woof"
        };

        // Just use the functions
        louder( dog ); // WOOF
        speak( dog ); // WOOF! I can talk.
      

Called on global object in 'strict' mode?

Uses 'undefined'

        function speak() {
          'use strict';
          console.log( this.say );
        }

        var say = 'baa';

        speak(); // TypeError: `this` is `undefined`
      

Called on global object (default)?

Uses global object

        function speak() {
          console.log( this.say );
        }

        var say = 'baa';

        speak(); // baa
      

Called with ES6 arrow?

Uses lexical scoping

        function Dog(){
          this.say = 'woof';

          setInterval(() => {
            this.say++; // |this| properly refers to the person object
          }, 1000);
        }

        var barkingDog = new Dog();
      

Understand 'this' and start something great.

github.com/tbashor/understanding-this TheStartersAcademy.com / 858.876.CODE