JavaScript 访问父对象属性

Posted 2023-02-22

【中文标题】JavaScript 访问父对象属性

【英文标题】：JavaScript access parent object attribute

【发布时间】：2015-06-26 09:03:19

【问题描述】：

我在 JS 中有一个小问题，我有两个嵌套对象，我想从父级访问一个变量，如下所示：

var parent = 
    a : 5,

    child: 
        b : 3,
        displayA : function()
            console.log(this.a);
            //undefined
            ,

        displayB : function()
            console.log(this.b);
            //displays 3
            
        

我只想知道如何让 parent.child.displayA 工作:)（我有需要访问父变量的子对象）

任何帮助表示赞赏 非常感谢！

【问题讨论】：

在displayA 函数中，您正在引用“this”并尝试访问其“a”属性。这里对“this”的调用是指子对象而不是父对象。如果您使用构造函数，则可以将其父对象的上下文 (this) 传递给子对象。或者你可以使用 call 或 bind 方法。

【参考方案1】：

您可以使用super.prop 访问父类属性。当然，前提是你使用的是 ES6。

【参考方案2】：

在您的示例中，您没有继承。你可以这样做

...
    displayA : function()
        console.log(parent.a);
        // 5
    ,
...
parent.child.parent = parent;
parent.child.displayA();

【参考方案3】：

你可以使用call来设置this的值：

parent.child.displayA.call(parent); // 5

你可能也对binding它感兴趣：

parent.child.displayA = function()
  console.log(this.a);
.bind(parent);
parent.child.displayA(); // 5

或者你可以只使用parent 而不是this：

parent.child.displayA = function()
  console.log(parent.a);
;
parent.child.displayA(); // 5

【参考方案4】：

我认为这样做并没有什么意义，因为您只能通过其父对象访问子对象。那么为什么要向孩子添加一个方法 displayB 而您可以将它添加到可以访问所有子属性的父级。

【参考方案5】：

对象child 没有通用方法知道它是父对象的成员。在您的情况下，您可以直接引用 displayA() 中的父对象，如下所示：

displayA : function()
  console.log(parent.a);

您不需要将 parent 放在全局范围内并使用 window.parent 作为另一个答案建议；由于您在parent 范围内声明displayA，因此该函数将在parent 上关闭，并且可以在child 内的任何位置访问。由于闭包包含对parent 对象的引用，您将看到对parent 的更改将反映在displayA 的行为中。例如，假设 parent 和 child 的定义与您的示例相同，但 displayA 被修改为使用 parent.a。那么：

parent.child.displayA(); //=> 5
parent.a = 10;
parent.child.displayA(); //=> 10

话虽如此，如果您想模仿 OOP，那么另一个答案是正确的：您应该阅读更多有关 javascript 原型链如何工作的信息。

【参考方案6】：

Javascript 是prototype based，它不是像 php 或 Java 这样的常规 OOP 语言。

看看Inheritance and the prototype chain 并实现类似Simple Javascript inheritance 的东西。

如果它在全局范围内，您可能可以通过window.parent 访问父级，但您的示例并非在所有情况下都有效。