JS-this指向
普通函数
this的值取决于函数是如何被调用的
<body>
<script>
// 函数普通中 this指向window
function foo() {
console.log(this)
}
foo()
// this的指向是在函数调用时确定的
// 函数是由对象调用的, 函数中的this指向调用它的对象
// 对于全局函数是由window对象调用的
// window.foo()
</script>
</body>
构造函数
构造函数中的this指向实例对象
<body>
<script>
function Person() {
// 构造函数中this指向创建的实例对象
}
var p = new Person()
</script>
</body>
对象的方法
对象的方法中的this指向对象
<body>
<script>
const obj = {
sayHi() {
console.log(this)
},
}
obj.sayHi()
</script>
</body>
事件回调
事件回调中的this指向触发事件的对象
<body>
<div>1111</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click', function () {
// 事件的回调用, 由对应dom对象调用的
console.log(this)
})
</script>
</body>
定时器
定时器中的this指向window
<body>
<script>
// 定时器的回调是由window对象调用的, 因此, 回调中的this指向window对象
window.setTimeout(function () {
console.log(this)
}, 1000)
</script>
</body>
箭头函数
箭头函数的this值是在函数定义时确定的，而不是在函数调用时。箭头函数会捕获其父级作用域的this值，无论这个this值如何变化，箭头函数中的this都会保持不变。
判断方法: 找this的父级作用域, 函数作用域或全局作用域
<body>
<script>
const fn = () => {
console.log(this)
}
fn()
const obj = {
name: 'xiaoming',
}
// call()调用函数, 同时改变this的指向
function foo() {
// 在foo作用域中, this指向obj的
console.log(this)
const bar = () => {
console.log(this)
}
bar()
}
foo.call(obj)
</script>
</body>
function Person() {
this.age = 0;
// 普通函数
setInterval(function growUp() {
// 这里的this指向window或undefined（取决于是否在严格模式下）
this.age++;
console.log(this.age); // 这里的this不会按预期指向Person实例
}, 1000);
// 箭头函数
setInterval(() => {
// 这里的this捕获的是Person实例的this
this.age++;
console.log(this.age); // 这里的this会按预期指向Person实例
}, 1000);
}
var p = new Person();
应用
<body>
<button>点击</button>
<script>
document.querySelector('button').addEventListener('click', function () {
// 在事件回调中, this指向button的dom对象
console.log(this)
setTimeout(() => {
// 在定时的普通回调中, this指向window
// 在定时的箭头回调中, this指向外部(定义时)的this, 也就是dom
this.innerHTML = '点击了'
}, 1000)
})
// 在回调函数定义时, 尽量使用箭头函数
</script>
</body>
