如何在傳入 Array.forEach() 的 Function 使用 this ?
Array.prototype 下的 method 都要我們傳入 Function，若該 Function 含有 this 想讀取 Object 的 Property，就會出現錯誤，該怎麼解決這個常見的錯誤呢 ?
Version
ECMAScript 2015
For Loop
const student = {
name: 'Sam',
friends: ['Kevin', 'John', 'Mike'],
sayHello: function() {
for(let i = 0; i < this.friends.length; i++)
console.log(`${this.name} say Hello to ${this.friends[i]}`);
}
};
student.sayHello();
一個常見的 OOP 需求，object 內有 property，而 method 想要讀取 property 的值。
若使用 for loop 搭配 this 讀取 property，則完全沒有問題。
const student = {
name: 'Sam',
friends: ['Kevin', 'John', 'Mike'],
sayHello: function() {
this.friends.forEach(function(friend) {
console.log(`${this.name} say Hello to ${friend}`);
});
}
};
student.sayHello();
若將 for loop 改成 Array.prototype 的 forEach() 後， this 成為 undefined 。
因為 sayHello() 是 student 的 method，所以 this 指向 student ，但傳入 forEach() 的 function 並不是 student 的 method，所以 this 指向 undefined 。
這該怎麼解決呢 ?
Self
const student = {
name: 'Sam',
friends: ['Kevin', 'John', 'Mike'],
sayHello: function() {
const self = this;
this.friends.forEach(function(friend) {
console.log(`${self.name} say Hello to ${friend}`);
});
}
};
student.sayHello();
最傳統、最常見的方法就是將 this 指定給 self ，如此傳入 forEach() 的 function 可透過 Closure (Lexical Scope) 存取 self 。
Bind
const student = {
name: 'Sam',
friends: ['Kevin', 'John', 'Mike'],
sayHello: function() {
this.friends.forEach(function(friend) {
console.log(`${this.name} say Hello to ${friend}`);
}.bind(this));
}
};
student.sayHello();
既然傳入 forEach() 的 function 的 this 不見了，我們可以透過 bind() 再度將 this 繫結進去。
forEach 傳入 this
const student = {
name: 'Sam',
friends: ['Kevin', 'John', 'Mike'],
sayHello: function() {
this.friends.forEach(function(friend) {
console.log(`${this.name} say Hello to ${friend}`);
}, this);
}
};
student.sayHello();
其實 Array.prototype 下的 method，除了傳入 function 外，還有第二個引數，可以將 this 傳進去。
Arrow Function
const student = {
name: 'Sam',
friends: ['Kevin', 'John', 'Mike'],
sayHello: function() {
this.friends.forEach(friend => console.log(`${this.name} say Hello to ${friend}`));
}
};
student.sayHello();
最漂亮的解法是改用 ECMAScript 2015 的 Arrow Function，它沒有自己的 this ，而會使用 parent scope 的 this ，也就是 sayHello() 的 this ，因此可以順利讀取到 object 的 property。
Conclusion
- 只要在 object 的 method 中，傳入 Anonymous Function 到其他 function 中，卻又試圖存取 object 的 property，就會踩到這個雷，有多種解法可以解決，但最優雅的就是 ECMAScript 2015 的 Arrow Function