JS object and function. Script output.

Question

Please explain, how does this script work?
var x = 3;
var a = {
x:2,
b: {
x:1,
c:function(){
return this.x;
}
}
};
var go = a.b.c;
alert(go());
alert(a.b.c());
output: 31
https://code.sololearn.com/WOqv0iE9JNpX/#js

Answer 1

var x = 3; //assign 3 to variable x
//assign a complex object to var a
var a = {
x:2, //put 2 in property x; same as a.x = 2 after creating a from outside
b: { // This is a label, like a function
x:1, // set property a.b.x=1
c:function(){ //label to an anoynoumous function
return this.x; //return (current object).x
} }
};
var go = a.b.c; // assign the method a.b.c which returns this.x
alert(go()); // returns 3 as this.x refers to window.x (var x) because go was defined in the global scope and 'this' refers to the window object.
alert(a.b.c()); //returns 1 as the current object (a.b.c) finds the property x:1 inside a.b
//colon
https://stackoverflow.com/a/418805
//label
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label#Labeled_function_declarations
//this
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
//scope
https://scotch.io/tutorials/understanding-scope-in-javascript

Answer 2

Я конечно не уверен что в тему, но вот какие варианты бы я предложил :
var x = 3;
var a = {
  x:2,
  b: {
    x:1,
//тот же вариант но с параметром - объекта применения
   f1:function(self){
      return self.x;
   },
//вариант с свойством для привязки функции
   f2:null,
//вариант с методом обёрткой куда будет передана функция
   f3:function(pf){
       return pf(this);
   }
  }
};
var go = a.b.f1;
alert(go(a.b));
alert(a.b.f1(a.b));
a.b.f2 = a.b.f1;
alert(a.b.f2(a.b));
alert(a.b.f3(go));