js中各种this超详细解释

本文深入探讨JavaScript中this关键字的多种使用场景及指向规则,包括全局、事件处理、自执行函数、call/bind、箭头函数、对象方法、构造函数、原型链及getter/setter中的this指向,帮助读者全面理解并正确运用this。

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

1-全局中的this

全局中的this就是window对象

<script>
    console.log(this);//window
</script>

2-事件处理函数中的this


var box=document.getElementById("box");
	box.onmouseover=function(){
		console.log(this);//box
	}
<div id="con" onclick="console.log(this)">con</div> //con

 3-自执行函数中的this

  1. 在非严格模式下浏览器中运行,this指的是window
  2. 在非严格模式node交互界面中,this指的是默认暴露出的模块
  3. 在非严格模式node的js文件中,this指的是global对象
(function(){
	console.log(this); //window
})()

 

// 在严格模式下this为undefined (严格模式下函数调用时省略window)

(function(){
	"use strict" //开启严格模式
	console.log(this); //undefined
})()

4-call、bind中的this

//函数.call()会直接调用该函数,并且call中的第0个参数就是函数执行中的this,后面的参数是函数执行时的参数

function fn(m,n){
	console.log(this.a);
}

fn.call({a:1},2,3); //1 2 3


//函数.bind()会返回一个新的函数,新函数的参数就是原函数执行中的this,这个新函数不会立即执行,this被修改,但是只能被修改一次

function fn(){
	console.log(this.b);
}

var fn1=fn.bind({b:2});
fn1(); //2

 5-箭头函数中的this

与定义时环境中的this一样,bind和call不能修改其内部this指向

var fn=()=>{
	console.log(this);
}

fn();//window
	
var box=document.getElementById("box");
box.onclick=function(){
	setTimeout(()=>{
		console.log(this); //box
	},1500)
}

全局中定义箭头函数this为window对象

fn=()=>{
	console.log(this);
}

fn();//window

对象内部定义的箭头函数this指向window

<script>
	var a=1;
	var obj={
		a:2,
		fn1:()=>{
			console.log(this.a);
		},
		fn2:function(){
			console.log(this.a);
		}
	}
	
	obj.fn1(); //1
	obj.fn2(); //2
</script>

因为归根到底,obj对象也是在全局中定义的,但是普通的函数就指向对象本身了,因为普通函数被谁调用,this就指向谁

对象内部的函数返回箭头函数

<script>
	var x=1;
	var obj1={
		x:2,
		fn3:function(){
			return function(){
				console.log(this.x);
			}
		},
		
		
		fn4:function(){
			return ()=>{
				console.log(this.x);
			}
		}
	}
	
	var innerFn3=obj1.fn3();
	innerFn3(); //this为window,因为此处的innerFn3是在全局中调用的
		
	var innerFn4=obj1.fn4();
	innerFn4(); //this为obj1,因为此处的innerFn4是在obj内部定义的
</script>

6-对象方法内部的this

对象调用对象内部的函数时,this指向该对象

var obj1={
	a:1,
	fn1:function(){
		console.log(this);
	}
}

obj1.fn1(); //obj
obj1.fn1.bind({z:"zds"})(); //zds

但是如果后续添加的函数是箭头函数,this指向还是遵循箭头函数在哪定义,this就指向谁

var obj2={
	m:2				
};

//全局定义一个箭头函数fn3
var fn3=()=>{
	console.log(this);
}

obj2.fn3=fn3;
obj2.fn3(); //window

多层嵌套对象中的函数调用时,this指向为“就近原则”

var obj3={
	x:1,
	y:{
		p:3,
		fn1:function(){
			console.log(this);
		}
	},
}

obj3.y.fn1();//y对象

var temp=obj3.y.fn1;
temp();//window

7-构造函数中的this

function Person(name,age){
	this.name=name;	
	this.age=age;
	return 1; //返回非null的对象,那么实例化的对象就是返回出的对象
	//return {};
}

var p1=new Person('朱东帅',22);
console.log(p1);

8-原型链上函数的this

var p={
	a:1,
	fn:function(){
		console.log(this.a)
	}
}

var c=Object.create(p); //以p为模板创建一个新的对象
console.log(c);		
console.log(c.a); //如果一个对象上没有某个属性或者方法时,它会随着原型链__proto__去找
console.log(c.__proto__); //p对象
console.log(p.__proto__); //js内置对象

c.fn(); //1

9-geter和seter

var obj={
	a:1,
	b:2,
	get sum(){
		console.log('正在尝试访问sum...');
		//return 2;
		return this.a+this.b;
	},
	set sum(z){
		console.log('正在设置sum');
		this.a=z/2;
		this.b=z/2;
	}
}

console.log(obj.sum);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值