NodeSchool 2017: What is this presentation samples

nodeschool-2017_what-is-this_samples.md

Samples

---

Sample 1: function form

function f1 () {
    console.log('this === global?', this === global);
    console.log('this === undefined?', this === undefined);
}

f1();

Sample 2: function form, strict mode

function f2 () {
    'use strict';

    console.log('this === global?', this === global);
    console.log('this === undefined?', this === undefined);
}

f2();

Sample 3: method form

class Person {
    constructor (name) {
        this.name = name;
    }

    sayHello () {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const mary = new Person('Mary');
mary.sayHello();

const john = new Person('John');
john.sayHello();

Sample 4: duck typing

class Person {
    constructor (name) {
        this.name = name;
    }

    sayHello () {
        console.log(`Hello, my name is ${this.name}`);
    }
}

// regular method form
const mary = new Person('Mary');
mary.sayHello();

// using method with different context
const john = {
    name: john,
    sayHello: mary.sayHello
}
john.sayHello();

// using method with no context
const sayHello = mary.sayHello;
sayHello();

Sample 5: this is where the fun starts

class Person {
    constructor (name) {
        this.name = name;
    }

    sayHello () {
        console.log(`Hello, my name is ${this.name}`);

        setTimeout(function () {
            // TypeError: this.sayGoodbye is not a function
            this.sayGoodbye();
        }, 2000);
    }

    sayGoodbye () {
        console.log(`Goodbye!`);
    }
}

const mary = new Person('Mary');
mary.sayHello();

Sample 6: fixing it with apply

class Person {
    constructor (name) {
        this.name = name;
    }

    sayHello () {
        console.log(`Hello, my name is ${this.name}`);

        setTimeout((function () {
            this.sayGoodbye();
        }).apply(this), 2000);
    }

    sayGoodbye () {
        console.log(`Goodbye!`);
    }
}

const mary = new Person('Mary');
mary.sayHello();

Sample 7: fixing it with arrow functions

class Person {
    constructor (name) {
        this.name = name;
    }

    sayHello () {
        console.log(`Hello, my name is ${this.name}`);

        setTimeout(() => {
            this.sayGoodbye();
        }, 2000);
    }

    sayGoodbye () {
        console.log(`Goodbye!`);
    }
}

const mary = new Person('Mary');
mary.sayHello();

Sample 8: problems with callbacks

class PrintService {
    print (item) {
        this._printPage(this._buildPage(item));
    }

    _buildPage (item) {
        return item.contents;
    }

    _printPage (page) {
        console.log(page);
    }
}

class Item {
    constructor (contents) {
        this.contents = contents;
    }

    onPrint (callback) {
        this.callback = callback;
    }

    handlePrint () {
        this.callback(this);
    }
}

const printService = new PrintService();
const items = [
    new Item('item 1'),
    new Item('item 1'),
    new Item('item 1')
];

items.forEach(item => item.onPrint(printService.print));

// fixing with multiple bind/arrow function
items.forEach(item => item.onPrint(printService.print.bind(printService)));
items.forEach(item => item.onPrint((item) => printService.print(item)));

// or 

// fixing with single bind/arrow function
const printHandler = printService.print.bind(printService);
items.forEach(item => item.onPrint(printHandler));


items[1].handlePrint();