如何在对象字面量中创建绑定this的成员？

你说得太对了！类里的箭头函数之所以能稳稳输出foo，是因为class字段初始化时，箭头函数会牢牢捕获实例的this——哪怕把方法单独拎出来调用，this还是指向原来的实例。但对象字面量里的普通方法就不一样了，this完全看调用时的上下文，提取出来直接调用的话，this会变成全局对象（严格模式下就是undefined），自然就找不到foo属性啦。

下面给你几个简单好用的实现方式：

方法一：用bind直接绑定this #

这是最直观的办法，在对象初始化后，把方法和对象本身绑定死：

const foo = {
  foo: "foo",
  bar() { console.log(this.foo); }
};
// 把bar方法的this永久绑定到foo对象
foo.bar = foo.bar.bind(foo);

const bar2 = foo.bar;
bar2(); // 控制台顺利输出"foo"

bind会返回一个新函数，这个函数的this被死死绑在你传入的foo上，不管后续怎么调用它，this都不会跑偏。

方法二：在对象字面量里用箭头函数（注意小坑） #

如果你能接受直接引用对象变量名，也可以直接用箭头函数：

const foo = {
  foo: "foo",
  bar: () => { console.log(foo.foo); }
};

const bar2 = foo.bar;
bar2(); // 控制台输出"foo"

不过要注意：如果之后你把foo变量重新赋值成别的对象，bar方法里引用的还是原来那个foo。而bind的方法就没这个问题，它绑的是对象本身，不是变量名。

方法三：用立即执行函数封装（更整洁） #

要是不想在对象外面多写一行绑定代码，就用立即执行函数把对象创建和绑定逻辑包在一起：

const foo = (() => {
  const obj = {
    foo: "foo",
    bar() { console.log(this.foo); }
  };
  obj.bar = obj.bar.bind(obj);
  return obj;
})();

const bar2 = foo.bar;
bar2(); // 控制台输出"foo"

这种方式把绑定逻辑藏在内部，代码看起来更清爽，也不会乱产生临时变量。

挑个适合你场景的用就行～

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