this.in.JS

script.babel

// Codepen inserts 'use strict' in head!!

// Error
//this.poop = '💩';
//console.log(`[top] this.poop: ${poop}`);

const Foo = function f() {
  this.poopInF = '💩inFunc';
  console.log(`[f()] this.poopInF: ${this.poopInF}`);
}
// Error
//f();
//console.log(`[top] this.poopInF: ${this.poopInF}`);

// Use this in constructor
Foo.prototype.getPoop = function() { return this.poopInF; };
const foo = new Foo();
console.log(`[top] foo.poopInF3Constructor: ${foo.poopInF3Constructor}`);
console.log(`[top] foo.getPoop: ${foo.getPoop}`);


const obj = {
  foo: function() {
    this.poopInObject = '💩InObject';
    console.log(`[obj.foo] this.poopInObject: ${this.poopInObject}`);
  }
};
obj.foo();
console.log(`[top] obj.poopInObject: ${obj.poopInObject}`);
// Error
//console.log(`[top] this.poopInObject: ${this.poopInObject}`);


const obj2 = {
  foo: function() {
    // obsolute this
    (function(){
      //Error
      //this.poopInObjectInF = '💩InObjectInF';   
    })();
    console.log(`[obj2.foo] this.poopInObjectInF: ${this.poopInObjectInF}`);

    // classical this
    const self = this;
    (function(){
      self.poopInObjectInFWithSelf = '💩InObjectInFWithSelf';   
    })();
    console.log(`[obj2.foo] self.poopInObjectInFWithSelf: ${self.poopInObjectInFWithSelf}`);

    // this the next generations
    (() => {
      this.poopInObjectInArrowF = '💩InObjectInArrowF';
    })();
    console.log(`[obj2.foo] this.poopInObjectInArrowF: ${this.poopInObjectInArrowF}`);
  }
};
obj2.foo();
console.log(`[top] obj2.poopInObjectInF: ${obj2.poopInObjectInF}`);   // undefined
// Error
//console.log(`[top] this.poopInObjectInF: ${this.poopInObjectInF}`);
console.log(`[top] obj2.poopInObjectInFWithSelf: ${obj2.poopInObjectInFWithSelf}`);
console.log(`[top] obj2.poopInObjectInArrowF: ${obj2.poopInObjectInArrowF}`);

// Replace this using `call`!!
const obj3 = {};
obj2.foo.call(obj3);
console.log(`[top] obj3.poopInObjectInF: ${obj3.poopInObjectInF}`);   // undefined
console.log(`[top] obj3.poopInObjectInFWithSelf: ${obj3.poopInObjectInFWithSelf}`);
console.log(`[top] obj3.poopInObjectInArrowF: ${obj3.poopInObjectInArrowF}`);


// New face
class Klass {
  foo() {
    this.poopInClass = '💩inClass';
    console.log(`[Klass.foo] this.poopInClass: ${this.poopInClass}`);
    
    const self = this;
    (function(){
      // error
      //this.poopInClassInF = '💩InClassInF';   
      self.poopInClassInFWithSelf = '💩InClassInFWithSelf';   
    })();
    console.log(`[Klass.foo] self.poopInClassInF: ${self.poopInClassInF}`);
    console.log(`[Klass.foo] self.poopInClassInFWithSelf: ${self.poopInClassInFWithSelf}`);

    // this the next generations
    (() => {
      this.poopInClassInArrowF = '💩InClassInArrowF';
    })();
    console.log(`[Klass.foo] this.poopInClassInArrowF: ${this.poopInClassInArrowF}`);
  }
}
const k = new Klass();
k.foo();
console.log(`[top] k.poopInClass: ${k.poopInClass}`);

this-in-js.markdown

this.in.JS

A Pen by TOBY on CodePen.

License.