JavaScript 访问父元素答案

【问题标题】：JavaScript access parent elementJavaScript 访问父元素
【发布时间】：2017-01-12 23:22:05
【问题描述】：

我需要在子元素的函数中访问包含元素的变量。我怎样才能做到这一点？

object = {
    a : {
        c : function() {
            //need to access b here
        },
        d : 2
    },
    b : 1
};

在这种情况下，我需要访问函数c 中的变量b。我尝试了bind() 的一些变化，但没有任何效果。问题JavaScript access parent object attribute 对我不起作用。我无法访问变量object，因为该对象嵌套更深。

【问题讨论】：

您必须传递对object 或b 的引用，否则将对b 的引用添加到a 对象。没有内置的反向引用可用于“向上”对象层次结构。
使用 this 进行引用，然后在给定的上下文中调用，就像在链接的问题中一样不起作用？
只是参考object.b?
这些不是“元素”，它们是“对象”。 b 不是“变量”；这是一个“属性”。
这是 JSFiddle 上的 test。使用父名称访问或使用此上下文调用有效

标签： javascript oop

【解决方案1】：

将a 变成一个getter。

object = {
    get a() {
      var self = this;
      return {
        c: function() {
           return self.b;
        },
        d: 2
      }
    },
    b : 1
};

或者，例如，如果c 不需要this 来引用d，那么

object = {
    get a() {
      return {
        c: () => this.b,
        d: 2
      }
    },
    b : 1
};

【讨论】：

这有object.a !== object.a的丑陋属性

【解决方案2】：

object 嵌套很深没关系。只需使用object.b。

var object;
([{a:[{b:[{c:[{d:[{e:[{f: // deeply nested
  object = {
    a: {
      c: function() {
        console.log(object.b);
      },
      d: 2
    },
    b: 1
  }
}]}]}]}]}]}])[0].a[0].b[0].c[0].d[0].e[0].f.a.c();

【讨论】：

【解决方案3】：

我喜欢 Oriol 的回答。 :-)

使用闭包的另一种选择。

([{a:[{b:[{c:[{d:[{e:[{f: // deeply nested
  (function (){
    var object = {
      a: {
        c: function() {
          console.log(object.b);
        },
        d: 2
      },
      b: 1
    }
    return object;
  })()
}]}]}]}]}]}])[0].a[0].b[0].c[0].d[0].e[0].f.a.c();

或者，如果有意义的话，您可以将对象创建移到单独的函数中（您可以命名该函数）。

function createHierarchy(){
  return ([{a:[{b:[{c:[{d:[{e:[{f:createObject()}]}]}]}]}]}]);
}

function createObject(){
    var object = {
      a: {
        c: function() {
          console.log(object.b);
        },
        d: 2
      },
      b: 1
    }
    return object;
}

var hierarchy = createHierarchy();
hierarchy[0].a[0].b[0].c[0].d[0].e[0].f.a.c();

使用 DI 容器只是一步之遥。 :-P

您可能需要graph 而不是hierarchy，而您的模型完全错误。

【讨论】：