如何访问父对象？代码中innerFn无法获取data对象的解决方法

嘿，这个问题我之前也碰到过！你的代码里innerFn没法访问data，核心原因是箭头函数的作用域绑定加上当前对象属性的访问逻辑有问题：箭头函数不会创建自己的this上下文，而是继承外层的词法作用域，而你这里的data是导出对象的一个属性，并没有在innerFn的词法作用域里，自然找不到。

下面给你几个可行的解决办法：

方法1：提前定义对象，用闭包访问 #

先把整个对象赋值给一个变量，这样innerFn就能通过这个变量直接拿到data：

const myObj = {
  data: { a: "a", b: "b" },
  fn: {
    innerFn() {
      console.log(myObj.data.b); // 直接通过外部变量访问data
    }
  }
};
export default myObj;

这里用普通函数或者箭头函数都可以，因为我们是直接引用外层的myObj变量，不受this的影响。

方法2：抽离data变量，利用闭包捕获 #

把data单独提出来定义，这样箭头函数就能在它的词法作用域里找到data：

const data = { a: "a", b: "b" };
export default {
  data,
  fn: {
    innerFn: () => console.log(data.b) // 箭头函数能直接访问外层的data变量
  }
};

这种方式比较简洁，适合不需要修改data引用的场景。

方法3：如果是Vue组件场景（额外补充） #

如果这个对象是Vue组件的选项，那更规范的写法是把data写成函数，然后在方法里通过this访问（不过看你的结构是自定义的fn属性，所以还是可以用前两种方法，或者调整成Vue的methods）：

export default {
  data() {
    return { a: "a", b: "b" };
  },
  fn: {
    innerFn() {
      console.log(this.$parent.b); // 如果fn是组件内的自定义对象，可以通过$parent访问组件实例
    }
  }
};

不过这种Vue特有的写法只适用于Vue项目，前两种是通用的JavaScript解决方案。

总的来说，只要让innerFn能通过闭包捕获变量或者直接引用外层对象的方式接触到data，就能解决问题啦！

内容的提问来源于stack exchange，提问作者Phillip YS