Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
this.in.JS
// 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}`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.