js中各种this超详细解释

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);