How to access outer object property with inner object function Javascript

Question

I am learning about this keyword in Javascript. I am trying a way to access an outer object property with the inner object function. For example :

var outer = {
    prop : 'prop',
    func : function(){
      return this.prop;
    },
    inner : {
      func : function(){
        return this.prop;
      }
    }
  }
  --> outer.func() : 'prop'
  --> outer.inner.func() : undefined

I understand why it doesn't work but I don't know how to access the prop of the outer object.

Please see my comment to @connexo and then please elaborate on why you want to do this. — Alnitak, Jun 07 '15 at 16:07
Because I have a function which has an argument which is an outer object without name, and there is an inner object which want to access one function of the outer . I am wondering if there is anyway to access it without calling the outer object's name. :) I see there is no way now. Thanks for your advice @Alnitak. — Phi Nguyen, Jun 07 '15 at 16:29

Alnitak · Accepted Answer · 2015-06-07T16:30:13.990

It's usually a very bad idea to have the insides of a function property know anything about the variable name that has been assigned to the object that contains that property. It introduces unwanted dependencies and more importantly prevents more than one instance of such an object from existing.

An alternate construct is the "module pattern" show below, using a closure and a variable that allows any nested properties to access that (local) variable.

var outer = (function() {
    var prop = 'prop';
    return {
        prop: prop,
        func: function() {
            return prop;
        },
        inner : {
            func : function() {
                return prop;
            }
        } 
    }
})();

It might be noteworthy at this point that this reflects the so-called *module pattern*. — connexo, Jun 07 '15 at 16:18

score 2 · Answer 2 · answered Jun 07 '15 at 15:57

2

var outer = {
    prop : 'prop',
    func : function(){
      return this.prop;
    },
    inner : {
      func : function(){
        return outer.prop;
      }
    }
  }

answered Jun 07 '15 at 15:57

connexo

53,704
14
91
128

in _general_, it's a bad idea to refer to a variable by the name it has been given from a function declared as a property of that variable. It causes a dependency that shouldn't exist - normally this should be resolved using `this` references inside that function. – Alnitak Jun 07 '15 at 16:03
Agreed, but OP asked how to access using current construct, I assumed. – connexo Jun 07 '15 at 16:04

score 0 · Answer 3 · answered Jun 07 '15 at 16:05

You can use a reference to outer to access props. For example:

var outer = {
    prop : 'prop',
    test : function() {
       return this === outer;
    }, 
    func : function(){
      return this.prop;
    },
    inner : {
      func : function(){
        return outer.prop;
      },
      test: function() {
        return this === outer;
    }
  }
}

console.log(outer.func())  // prop
console.log(outer.test())  // true
console.log(outer.inner.func())  // prop
console.log(outer.inner.test()) // false

https://jsfiddle.net/gk2fegte/2/

When you call this.prop within the inner object this doesn't point to outer but to the inner object. Check out the test function in the above code.

score 0 · Answer 4 · edited May 23 '17 at 11:47

0

You are using the JavaScript object literal and functions, so that the context of "this" keyword differs. You can see more details about the "this" keyword in How does "this" keyword work within a function?. And in your case, use "outer.prop" to access

edited May 23 '17 at 11:47

Community

1
1

answered Jun 07 '15 at 16:06

XuChu LIU

238
3
11

How to access outer object property with inner object function Javascript

4 Answers4