this 指向

本文详细探讨了JavaScript中this的关键概念,包括全局作用域、事件处理、对象方法调用时的this指向变化,以及典型示例解析。重点讲解了为何在不同上下文中this会指向window、事件源或调用对象,并通过代码实例揭示其背后的逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

this的指向问题:
首先:
1.this永远指向某个对象
2.this的指向取决于调用他的对象
其次:this的几种种情况
1.在全局作用域中或普通函数中默认指向window(全局对象)
2.事件中,函数内部的this指向事件源
3.对象方法调用时,this指向调用对象

1.在全局作用域中或普通函数中默认指向window(全局对象)

console.log(this)//window
function a(){
	console.log(this)
}
a()//winodw

2.事件中,函数内部的this指向事件源

<div style="width: 200px; height: 200px; background: #0000FF;" id="box">
box.onclick = function(){
	console.log(this)
}//box标签

3.对象方法调用时,this指向调用对象
在使用过程中 这点遇见众多问题,讲下我的理解

var fn = {
    user:"冰冻黑熊",
    fn1:function(){
        console.log(this.user);  //冰冻黑熊
    }
}
fn.fn1();
window.fn.fn1();//冰冻黑熊

this指向fn,因为fn1函数通过fn来调用指向,所以This指向fn 即可调用user
window.fn.fn1(),this同样指向fn,当window与fn同时调用fn1时,this只会指向fn1的上一级(fn)

var fn = {
    name:'冰冻黑熊'
    fn1:{
        name:'冰冻白熊',
        fn2:function(){
            console.log(this.name); //冰冻白熊
        }
    }
}
fn.fn1.fn2();

原因同上fn与fn1同时调用fn2(),但this只指向fn2()的上一级(fn1),fn1的作用域中 name的值为冰冻白熊

var fn = {
	name:'冰冻黑熊',
	fn1:{
		name:'冰冻白熊',
		fn2:function(){
			console.log(this)//window
			console.log(this.name)//undefined
		}
	}
}
var a = fn.fn1.fn2
a()

为什么会这样?因为 在将fn.fn1.fn2赋值给a时,并没有执行,a()执行时,调用a()的是window.所以指针指向window

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值