如何使用箭头函数绑定对象方法？代码示例及问题咨询

嘿，这个问题问得很到位！其实用箭头函数确实能实现类似bind的效果，但你之前的写法踩了几个小坑，咱们来一步步理清：

先说说你之前写法的问题 #

你尝试的这两种写法：

const greet = person.greet(()=>(person.greet))
const greet = person.greet(()=>(function(){person.greet}))

本质上犯了同一个错误：你把person.greet当成了一个接受函数参数的方法，并且直接调用了它（加了括号()），导致person.greet立即执行。但person.greet本身没有返回值（它只是打印内容，没有return语句），所以greet变量自然会是undefined。

正确的箭头函数绑定方式 #

要通过箭头函数实现和bind类似的效果，你需要用箭头函数包裹对person.greet的调用，而不是把箭头函数传给它。写法很简单：

const person = { 
  name: 'jordan', 
  greet: function(){console.log('hello, ' + this.name)} 
}

// 正确的箭头函数写法
const greet = () => person.greet();

当你调用greet()时，箭头函数会内部调用person.greet()，由于是通过person.的方式访问并调用方法，greet函数里的this会自动绑定到person对象，和你用bind的效果一致。

箭头函数 vs bind的小区别 #

• bind会创建一个新的函数实例，永久绑定this到指定对象，还可以顺便绑定参数（比如person.greet.bind(person, 'extraArg')）；
• 箭头函数则是通过词法作用域来固定调用逻辑，它本身没有自己的this，这里我们是直接通过引用person对象来确保方法调用时的this指向。如果后续person变量被重新赋值，箭头函数的调用结果也会跟着变，而bind创建的函数不会受影响。

举个例子：

// bind的情况
const greetBind = person.greet.bind(person);
person = { name: 'new name', greet: () => console.log('new greet') };
greetBind(); // 依然输出 "hello, jordan"

// 箭头函数的情况
const greetArrow = () => person.greet();
person = { name: 'new name', greet: () => console.log('new greet') };
greetArrow(); // 输出 "new greet"

希望这个解释能帮到你！

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