variable context.js

window.prop1 = 11;
window.prop2 = 22;


b = function() {
	console.log("this:       ", this);
	console.log("this.prop1: ", this.prop1);
	console.log("this.prop2: ", this.prop2);
}
console.log("\n=== b() without context -> window ===");
b();


c = {
	prop1: 33,
	prop2: 44,
	fn: function() {
		console.log("this:       ", this);
		console.log("this.prop1: ", this.prop1);
		console.log("this.prop2: ", this.prop2);
	}
}
console.log("\n=== c.fn() with context -> c ===");
c.fn();


d = {
	prop1: 55,
	prop2: 66,
	fn: function() {
		console.log("\n=== d.fn() with context -> own ===");
		console.log("this.prop1: ", this.prop1);
		console.log("this.prop2: ", this.prop2);


		e = function() {
			console.log("this:       " + this);
			console.log("this.prop1: " + this.prop1);
			console.log("this.prop2: " + this.prop2);
		}

		console.log("\n=== e() without context -> window ===");
		e();
		console.log("\n=== e() with context -> custom object ===");
		new e();

		g = {
			prop1: 77,
			prop2: 88,
			fx() {
				console.log("this:       " + this);
				console.log("this.prop1: " + this.prop1);
				console.log("this.prop2: " + this.prop2);
			}
		};
		h = {
			prop1: 99,
			prop2: 11111,
		};
		h.fx = g.fx;

		console.log("\n=== h.fx = g.fx (transfer function == transfer context) ===");
		console.log("typeof h.fx == 'function': ", typeof h.fx == 'function');
		console.log("typeof g.fx == 'function': ", typeof g.fx == 'function');
		console.log("h.fx === g.fx: ", h.fx === g.fx);
		console.log("h.fx == g.fx:  ", h.fx == g.fx);
		h.fx();

		j = {prop1: 22222, prop2: 33333};
		k = e.bind(j);

		console.log("\n=== [GLOBAL] e() VS e.bind(j) (bind == change context) ===");
		console.log("typeof e == 'function': ", typeof e == 'function');
		console.log("typeof k == 'function': ", typeof k == 'function');
		console.log("e === k: ", e === k);
		console.log("e == k:  ", e == k);

		console.log("\n--- e() without context -> window ---");
		e();
		console.log("\n--- e.bind(j) with context -> j ---");
		e.bind(j)();

		m = {
			prop1: 44444,
			prop2: 55555,
			fx(){
				console.log("this:       " + this);
				console.log("this.prop1: " + this.prop1);
				console.log("this.prop2: " + this.prop2);
			}
		}

		o = m.fx;
		p = m.fx.bind(j);

		console.log("\n=== [GLOBAL] m.fx() VS m.fx.bind(j) (bind == change context) ===");
		console.log("typeof o == 'function': ", typeof o == 'function');
		console.log("typeof p == 'function': ", typeof p == 'function');
		console.log("o === p: ", o === p);
		console.log("o == p:  ", o == p);

		console.log("\n=== o() without context -> window ===");
		o();
		console.log("\n=== p() with context -> j ===");
		p();

		r = e.bind(j);
		m.func = r;

		console.log("\n=== e.bind(j) -> r -> m.func (transfer function == transfer context) ===");
		console.log("typeof r == 'function':      ", typeof r == 'function');
		console.log("typeof m.func == 'function': ", typeof m.func == 'function');
		console.log("r === m.func: ", r === m.func);
		console.log("r == m.func:  ", r == m.func);
		m.func();
		
		r();
		s = m.func;
		s();
	}
}

d.fn();