Arrow function과 lexical binding

function을 콜백으로 쓸때 스코프가 달라져서

this를 다른데 옮기거나, bind 함수를 사용했었다.

const that = this;
app.assets.loadFromUrl('path/file', 'material', function (err, asset) {
	that.shadow.model.material = asset.resource;
});

이런식이나

app.assets.loadFromUrl('path/file', 'material', function (err, asset) {
	this.shadow.model.material = asset.resource;
}.bind(this));

이렇게 사용했는데

그냥 Arrow function 쓰면 렉시컬 스코프(선언되는 위치가 중요)로 바인딩되서 위 예시처럼 안쓰고 그냥 this써도 된다.

app.assets.loadFromUrl(path.file', 'material', (err, asset) => {
	this.shadow.model.material = asset.resource;
});

최진우 블로그