在JS中,this的指向会随着执行的环境不同,从而指向不同的对象,本文就是对this关键字指向来一波总结,以便那些,对于this指向比较迷的前端人
目录
1. 单独使用,this表示全局对象
这个很好理解,看下面这段代码的输出
<script>
console.log(this)
</script>
毫无疑问,这里的this是指向的全局windows对象,打印看看
1.1 即使在严格模式下,this也依然表示全局对象
<script>
'use strict'
console.log(this)
</script>
2. 在function函数中
2.1 常规模式
<script>
function demo() {
console.log(this) //指向全局window对象
}
demo()
</script>
this也还是指向全局的windows对象
2.2 严格模式
<script>
function demo1() {
"use strict"
console.log(this) //undefined
}
demo1()
</script>
开启了严格模式下,this就成了undefined,这是因为严格模式下,对于这里,this就是未定义的一个变量,那如果还想访问到this改怎么办?可以如下
const that = this;
function demo1() {
"use strict"
console.log(that) //undefined
}
demo1()
3. 在对象的属性方法中,指向当前所处的对象
3.1 常规模式
<script>
const obj = {
name: '盲僧',
skill_q: '神龙摆尾',
say() {
console.log(this) //指向当前所在的对象,再次示例中this表示obj对象
}
}
obj.say()
</script>
在这里的this指向就指向了整个obj对象,包含obj所有的属性方法。
3.2 严格模式
<script>
const obj1 = {
name: '盲僧',
skill_q: '神龙摆尾',
say() {
"use strict"
console.log(this)
}
}
obj1.say()
</script>
打印看看
可见,在对象的属性方法中,无论开启严格模式与否,都同样的指向当前所处的对象!
4. 在html中,指向接收事件的html元素
<div id="app" onclick="console.log(this)">点击我</div>
点击下试试;
那么我们就可以直接写如下代码:
<div id="app" onclick="this.style.color = '#ff0000';this.style.fontSize='40px'">点击我</div>
点击这个div标签,发现 点击我 三个字颜色变为了 红色,字体变大;目的达到
总结:
this指向:
- 单独使用时,无论是否开启严格模式,this始终指向全局的windows对象
- 作为单独函数,函数体内的this指向,在严格模式下 this为undefined,常规模式 下指 向全局windows对象
- 作为对象的属性方法时,无论是否开启严格模式,this指向当前所处的对象
- 在html中,指向接收事件的html元素