setTimeout()中的this三个解决方法
2020-05-30 本文已影响0人
ticktackkk
bind和call，apply比较不会立即执行函数
setTimeout 方法中的this指向window 可以使用bind方法来改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>确定</button>
<script>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
btn.disabled = true;
var that = this;
console.log(that);
setTimeout(function () {
this.disabled = false;
}.bind(this), 3000)
}
</script>
</body>
</html>
使用箭头函数中的this总是指向词法作用域
在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：
如果是该函数是一个构造函数，this指针指向一个新的对象
在严格模式下的函数调用下，this指向undefined
如果是该函数是一个对象的方法，则它的this指针指向这个对象
<script>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
btn.disabled = true;
setTimeout(() => {
this.disabled = false;
}, 2000)
}
</script>
原始方法，使用that=this 使that绑定外部this
<script>
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
btn.disabled = true;
var that = this;
console.log(that);
setTimeout(function () {
that.disabled = false;
}, 3000)
}
</script>
