JavaScript|This指向
1 普通函数
普通函数中的this指向window
示例
<!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>
<script>
// 函数普通中 this指向window
function foo() {
console.log(this)
}
foo()
// this的指向是在函数调用时确定的
// 函数是由对象调用的, 函数中的this指向调用它的对象
// 对于全局函数是由window对象调用的
// window.foo()
</script>
</body>
</html>
2 构造函数
构造函数中的this指向实例对象
<!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>
<script>
function Person() {
// 构造函数中this指向创建的实例对象
}
var p = new Person()
</script>
</body>
</html>
3 对象的方法
对象的方法中的this指向对象
<!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>
<script>
const obj = {
sayHi() {
console.log(this)
},
}
obj.sayHi()
</script>
</body>
</html>
4 事件回调
事件回调中的this指向触发事件的对象
<!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>
<div>1111</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click', function () {
// 事件的回调用, 由对应dom对象调用的
console.log(this)
})
</script>
</body>
</html>
5 定时器
定时器中的this指向window
<!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>
<script>
// 定时器的回调是由window对象调用的, 因此, 回调中的this指向window对象
window.setTimeout(function () {
console.log(this)
}, 1000)
</script>
</body>
</html>
6 箭头函数
箭头函数不绑定this, 和定义时作用域中的this一致
示例
<!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>
<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>
</html>
<!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>
<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>
</html>
示例
<!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>
document.querySelector('button').addEventListener('click', function () {
// 在事件回调中, this指向button的dom对象
console.log(this)
setTimeout(() => {
// 在定时的普通回调中, this指向window
// 在定时的箭头回调中, this指向外部(定义时)的this, 也就是dom
this.innerHTML = '点击了'
}, 1000)
})
// 在回调函数定义时, 尽量使用箭头函数
</script>
</body>
</html>
