JavaScript中call函数的使用及箭头函数this绑定异常问题排查

问题的核心在于箭头函数没有独立的this上下文：箭头函数的this是在定义时就确定的，取自它所在的词法作用域，调用时用call/apply/bind传入的this对象会被直接忽略。你的代码里，箭头函数sayName定义在全局作用域，它的this指向全局对象，而全局对象没有name属性，所以输出undefined。

解决方案：改用普通函数 #

把箭头函数替换成普通函数，普通函数的this是在调用时确定的，此时call就能正常将person绑定为函数的this：

function sayName() {
    console.log('My name is ' + this.name);
};

const person = {
    'name': 'Tester',
    'age': 34
};

sayName.call(person);

执行后控制台输出：

My name is Tester

补充：非要用箭头函数的替代写法 #

如果想保留箭头函数形式，可以直接将对象作为参数传入，不过这种写法就失去了call绑定this的意义：

const sayName = (obj) => {
    console.log('My name is ' + obj.name);
};

const person = {
    'name': 'Tester',
    'age': 34
};

sayName(person);

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