this到底指向谁?
this指向简单的来说就是 谁调用我 我就指向谁。
1.web全局环境里面this的指向
console.log(this) // 指向window
2.事件绑定中的this的指向
事件绑定中的this指向的就是事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- div的样式 -->
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
<script>
//获取div 元素 绑定点击事件 点击div 控制台输出this
const div = document.querySelector('div')
div.addEventListener('click',function(){
console.log(this);
})
</script>
</head>
<body>
</body>
</html>
3. 普通函数中的this的指向
普通函数中this指向就是看前面有没有点,有点的话this就指向谁。 如果没有点 this就指向window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj = {
fn: function () {
console.log(this);
},
fn1: {
fn2: function () {
console.log(this);
},
fn3:{
fn4: function(){
console.log(this);
}
}
}
}
obj.fn(); //obj
obj.fn1.fn2(); //obj.fn1
obj.fn1.fn3.fn4() // obj.fn3
</script>
</body>
</html>
4. 闭包中的this指向
闭包中的this指向 默认指向window
const obj = {
fn:function(){
return function(){
console.log(this);
}
}
}
obj.fn()() //window
5.回调函数中this的指向
回调函数中this 指向window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function obj(arr) {
console.log(this);
}
obj([{ name: "张三", age: "18" }]) //window
</script>
</body>
</html>
6.箭头函数中的this
箭头函数中没有自己的this,所用到的this都是上下文中的this
箭头函数可以保留this的指向,因为它本身没有。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- div的样式 -->
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
<script>
//获取div 元素 绑定点击事件 点击div 控制台输出this
//因为箭头函数没有自己的this指向 所以在这里使用了箭头函数他的this会指向外层的window
const div = document.querySelector('div')
div.addEventListener('click', () => {
console.log(this);
})
</script>
</head>
<body>
</body>
</html>
7.构造函数中的this指向
当一个函数用作构造函数时(使用new关键字),它的this
被绑定到正在构造的新对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function star() {
// 构造函数需要通过 this 上创建属性 然后给他们赋值
this.name = '周杰伦'
}
const star1 = new star()
console.log(star1.name) // 周杰伦
function star2() {
// 如果函数具有返回对象的 return 语句,
// 则该对象将是 new 表达式的结果。
// 否则,表达式的结果是当前绑定到 this 的对象。
this.age = 17;
return { age: 18 };
}
const star3 = new star2();
console.log(star3.age); // 18
</script>
</body>
</html>