setTimeout内に、thisを入れる方法を教えて下さい。

Question

###前提・実現したいこと

setTimeout内に、thisを入れる方法を教えて下さい。

###発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set property 'pointerEvents' of undefined

###該当のソースコード

var element = document.querySelectorAll('a');
for (var i = 0; i < element.length; i++) {
	var them = element[i];
	them.addEventListener('click', function() {
		this.style.pointerEvents = 'none';
		console.log('start');

		setTimeout(function() {
			this.style.pointerEvents = 'auto'; // <- ここです！
			console.log('end');
		}, 300);
	}, false);
}

Answer 1

変数束縛 (ES3)

var thisArg = this;

setTimeout(function () {
  thisArg.style.pointerEvents = 'auto'; // <- ここです！
   console.log('end');
}, 300);

Function.prototype.bind (ES5)

setTimeout(function() {
  this.style.pointerEvents = 'auto'; // <- ここです！
   console.log('end');
}.bind(this), 300);

アロー関数 (ES6)

setTimeout(() => {
  this.style.pointerEvents = 'auto'; // <- ここです！
   console.log('end');
}, 300);

setTimeout の第三引数 (HTML Living Standard)

setTimeout(function (thisArg) {
  thisArg.style.pointerEvents = 'auto'; // <- ここです！
   console.log('end');
}, 300, this);

Re: pokkur さん

Comments

[pokkur]

think49 さん、丁寧に教えていただきありがとうございます！ おかげさまでアロー関数の便利さを知れました✌️

[think49]

アロー関数はIE未対応のため、対象ブラウザには留意して下さい。
Web制作ではBabel等のトランスコンパイラが使われることが多いようです。