Vfrdtyky

I know that using the "this" keyword in an object references the object, but what about nested objects?

var mainObj = {

  childObj: {

    addProperty: function() {

      this.message = "HELLO";

    }

  }

};

mainObj.childObj.addProperty();

From here, how do I access the "this.message" property, both inside and outside the "childObj" object?

The quick answer: within a different method of mainObj, you can use this.childObj.message, and you can use mainObj.childObj.message from the outside:

var mainObj = {

  childObj: {

    addProperty: function() {

      this.message = "HELLO";

    }

  },

  msg() {

    return this.childObj.message;

  },

};

mainObj.childObj.addProperty();

console.log(mainObj.msg()); // HELLO

console.log(mainObj.childObj.message); // HELLO

Some context on this:

From the MDN documentation:

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context).

Basically, depending on the context, this might mean different things:

Global context

Outside of any function, this refers to the global object. In a browser that means this === window.

Function context

In a function, the value of this depends on how you call the function, and whether you are using strict mode or not., basically it could point to the global object or inherit the execution context.

When invoking a function as a method of an object, this will be set to the object that owns the method in the invocation:

//'use strict';

window.message = 'wat';

const obj1 = { message: 'hi 1', hi() { return this.message; }};

const obj2 = { message: 'hi 2', hi() { return this.message; }};



// Normal invocation

console.log(obj1.hi())

console.log(obj2.hi())



// As functions:

const obj1Hi = obj1.hi;

console.log(obj1Hi()); // returns wat on non-strict mode!

// enable use strict to see the error thrown by this defaulting to undefined/





// Swap the functions around

obj1.hi = obj2.hi;

obj2.hi = obj1Hi;



console.log(obj1.hi()) // still uses message from obj1

console.log(obj2.hi()) // still uses message from obj2



// You can even do some `bind` magic to force the context on a function:



console.log(obj1Hi.bind(obj1)()); // hi 1

console.log(obj1Hi.bind(obj2)()); // hi 2