嵌套对象函数中访问对象属性失败的原因及正确方法

这是个非常典型的JavaScript中this指向的坑，我来给你一步步捋明白：

为什么会报错？ #

当你调用myObj.myfuncs.first_func()时，函数内部的this指向的是调用它的那个对象——也就是myObj.myfuncs，而不是外层的myObj。所以函数里的this.data自然就是undefined，你试图给undefined的val_b赋值，就会抛出TypeError。

而直接访问myObj.data.val_b是通过对象的引用链直接定位的，完全不受this指向的影响，所以能正常拿到值。

怎么正确访问data.val_b？ #

这里有几种常用的解决办法，你可以根据场景选择：

1. 使用箭头函数（推荐，简洁直观） #

箭头函数不会绑定自己的this，它会继承外层作用域的this。把你的first_func改成箭头函数，内部的this就会指向myObj了：

var myObj = new Object({ 
  data: { val_a: 1, val_b: 2 }, 
  myfuncs: { 
    first_func: () => { 
      this.data.val_b = 3; 
    } 
  } 
});

2. 在函数内部直接引用外层对象 #

如果不想用箭头函数，你可以在函数里直接通过myObj本身来访问（前提是myObj在当前作用域可访问）：

var myObj = new Object({ 
  data: { val_a: 1, val_b: 2 }, 
  myfuncs: { 
    first_func: function() { 
      myObj.data.val_b = 3; // 直接用对象名访问
    } 
  } 
});

这种方法简单但耦合性高，如果后续myObj的变量名修改，这里也要跟着改。

3. 使用bind()绑定this #

可以在调用时或者定义阶段，把函数的this绑定到myObj：

• 调用时绑定：

myObj.myfuncs.first_func.bind(myObj)();

• 定义时绑定（需要调整写法，因为对象字面量初始化时this还未指向myObj）：

var myObj = { 
  data: { val_a: 1, val_b: 2 }, 
  myfuncs: {} 
};
myObj.myfuncs.first_func = function() {
  this.data.val_b = 3;
}.bind(myObj);

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