常見 Closure 的雷

ECMAScript 提供眾多的 Higher Order Function,如 Array.prototype 下的 method,如 setTimeout(),當我們將 Function 傳入後,且該 Function 含有 this 想讀取 Object 的 Property 時,就會出現錯誤,該怎避免這個常見的問題呢 ?

Version


ECMAScript 5
ECMAScript 2015

For Loop


1
2
3
4
5
6
7
8
9
10
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,則完全沒有問題。

array000

1
2
3
4
5
6
7
8
9
10
11
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


1
2
3
4
5
6
7
8
9
10
11
12
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

array002

Bind


1
2
3
4
5
6
7
8
9
10
11
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 綁定進去。

array003

forEach 傳入 this


1
2
3
4
5
6
7
8
9
10
11
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 傳進去。

array004

Arrow Function


1
2
3
4
5
6
7
8
9
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 中,以 Closure 傳到其他 Higher Order Function 時,卻又試圖存取 object 的 property,就會踩到這個雷,有多種解法可以解決,但最優雅的就是 ECMAScript 2015 的 Arrow Function
2018-12-11