본문 바로가기

Dev/javascript

[javascript] Arrow function and 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) {
	that.shadow.model.material = asset.resource;
}.bind(this));

이렇게 사용했는데

 

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

app.assets.loadFromUrl('assets/common/shadow/19352261/Shadow_plane.json', 'material', (err, asset) => {
this.shadow.model.material = asset.resource;
});

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