在JavaScript中，如何从作为外部对象中数组元素的对象的方法到达外部对象的“ this”对象

Question

I have a JavaScript object created like this:

var outer = {
    list: [
        {
            field1: 111,
            field2: 222,
            doSomething: function() {
                var x =id;
            }
        },
        {
            field1: 333,
            field2: 444,
            doSomething: function() {
                var x =id;
            }
        } 
    ],

    id: 0,
};

Let's say doSomething() of the first element of list is called. Inside of doSomething(), I can access this.field1, and read and get the value 111 because this in that context is the object that doSomething() is a method of. However the entire list array is a member of the outer object. Another member of outer is id, which is a sibling of list. How do I access the id from variable of outer from inside of any of the doSomething() methods? The only thing I can think of is to use the syntax: var x = outer.id; but the method that has knowledge of the name of the variable of that particular instance.

So I have to create a function that makes one of these things, and use a temporary variable inside that function that's assigned to the object, and refer to that variable within doSomething().

Is that the best way?

[edit] My proposed solution I mentioned above would look like this:

var outer = {
    list: [
        {
            field1: 111,
            field2: 222,
            doSomething: function() {
                var x =outer.id;
            }
        },
        {
            field1: 333,
            field2: 444,
            doSomething: function() {
                var x =outer.id;
            }
        } 
    ],

    id: 0,
};

I'm trying to avoid the inner objects from knowing the identifier "outer"... but I guess that's the best that we can do --- and probably good enough.

Answer 1

Add another property that contains a reference to the containing object.

var outer = {
    list: [
        {
            field1: 111,
            field2: 222,
            doSomething: function() {
                var x = this.container.id;
            }
        },
        {
            field1: 333,
            field2: 444,
            doSomething: function() {
                var x = this.container.id;
            }
        } 
    ],

    id: 0,
};
for (var i = 0; i < outer.list.length; i++) {
    outer.list[i].container = outer;
}

Answer 2

I think you're over complicating the problem. If id is the same across each item in list , then it doesn't need to be contained inside the object outer . You can simply reference id like this:

var id = 0;

var outer = {
    list: [
        {
            field1: 111,
            field2: 222,
            doSomething: function() {
                var x = id;
                console.log(x);
            }
        },
        {
            field1: 333,
            field2: 444,
            doSomething: function() {
                var x = id;
                console.log(x);
            }
        } 
    ]
};

outer.list[0].doSomething();
outer.list[1].doSomething();

You can even extend your doSomething function to take an argument and then pass a different value for each item in your list if you want:

doSomething: function(x) {
    console.log(x);
}

Then you would call it like this:

outer.list[0].doSomething(0);
outer.list[1].doSomething(1);

Answer 3

There is no upwards relationship in JavaScript because "child" objects can have more than one "parent" object:

var outer = {
  inner = {"foo": "bar"}
};

var newOuter = {};
newOuter.inner = outer.inner;

// now inner is a property of both outer and newOuter

Since you cannot directly access the outer context with a keyword like this or this.parent , you must make use of other options. Your best bet is to pass the context ( this ) to your doSomething method as an argument:

var outer = {
  list: [
    {
      field1: 111,
      field2: 222,
      doSomething: function(context) {
        var x = context.id;
      }
    },
    {
      field1: 333,
      field2: 444,
      doSomething: function(context) {
        var x = context.id;
      }
    } 
  ],
  id: 0,
};

outer.list[0].doSomething(outer);

As others have mentioned, you can alternatively store id or the context as attributes of inner objects in list . The downside of this method is that it generates repeated code, which is less than optimal.

var outer = {
  list: [
    // version that stores context
    {
      context: outer,
      field1: 111,
      field2: 222,
      doSomething: function() {
        var x = this.context.id;
      }
    },

    // version that directly stores id
    {
      id: outer.id,
      field1: 333,
      field2: 444,
      doSomething: function() {
        var x = this.id;
      }
    } 
  ],
  id: 0,
};

Your third option would be to use JavaScript's variable scoping rules to store the id of outer in a variable in the outermost scope, thereby making it accessible to all of the interior methods:

var outer = {
  list: [
    {
      field1: 111,
      field2: 222,
      doSomething: function() {
        var x = id;
      }
    },
    {
      field1: 333,
      field2: 444,
      doSomething: function() {
        var x = id;
      }
    } 
  ],
  id: 0,
};

var id = outer.id;

The main downside of this is that it can potentially pollute your outer scope with unwanted variables and open your internal objects up to unwanted side-effects of id being changed.

tl;dr:

In general, the benefits of Object-oriented programming are modularity and encapsulation: you want your various objects to be able to continue functioning merrily on regardless of changes you make in other parts of your program. As such, communication between objects is best handled by passing one object to another as an argument in a method call, thereby allowing you to keep the logic of each object separate from the others. As such, I would recommend defining your inner objects such that the doSomething() method accepts the desired context of the outer object as an argument; this will keep your code extensible, flexible, and DRY.

Answer 4

You could benefit from using classes in JavaScript:

function Outer(id) {
    this.id = id || 0;
    this.list = [];
}

Outer.prototype = {
    constructor: Outer,

    addItem: function(item) {
        item.outer = this;
        this.list.push(item);
    }
};

function Item(outer) {
    this.outer = outer || null;
}

Item.prototype = {
    field1: null,
    field2: null,
    outer: null

    constructor: Item,

    doSomething: function() {
        alert(this.outer.id);
    }
};

And to use:

var outer = new Outer(23);
outer.addItem(new Item());
outer.list[0].doSomething(); // alerts 23