web前端this指向（小白学前端）

this指向

总结this指向的相关问题。在事件调用环境，谁触发事件，函数里的this指向的就是谁；全局环境：浏览器运行的页面的全局对象指向window，如果用单独js文件运行this指向module.exports对象（导出的对象）；函数内部，①this最终指向的是调用它的对象②函数被多层对象所包含，如果函数被最外层对象调用，this指向的也只是他的上层对象③this指向与函数的声明无关，只与调用函数的时候所指向的对象有关

事件调用环境

	let box = document.querySelector('.box')
	let lili =  document.querySelector('.lili')
	box.onclick = move;
	lili.onclick = move;
	fuction move(){
		this.style.left = '100px'
	}

全局环境

浏览器运行的页面的全局对象指向window，如果用单独js文件运行this指向module.exports对象（导出的对象）

	console.log(this)
	console.log(this === module.exports)

函数内部

函数内部分为三种情况

this最终指向的是调用它的对象

	fuction move(){
		console.log(this)
		this.style.left = '100px'
	}
	move();			//window		undefined
	window.move()	//window
	var abc = 10	//可在window对象下找到abc属性

	var obj = {
		a:10,
		b:function(){
			console.log(this)
		}
	}
	
	obj.b();		//this指向obj
	window.obj.b()		//this指向obj

函数被多层对象所包含

函数被多层对象所包含，如果函数被最外层对象调用，this指向的也只是他的上层对象

	var obj = {
		a:10,
		b:{
			fn:function(){
				console.log(this)
			}
		}
	}
	
	var abc = obj.b.fn;
	window.obj.b.fn()		//this指向b
	abc()				//this指向window,前面省略了window

总结：this指向与函数的声明无关，只与调用函数的时候所指向的对象有关

构造函数

	function fn(){
		this.num = 10;
		console.log(this.num)
	}
	/**
		var obj =new fn();	//{num:10}
		console.log(obj)	//{num:10}
		console.log(obj.num)	//10
		
		new
		1、调用了函数
		2、在函数内隐式自动创建一个对象var obj{}
		3、把创建出来的对象和this绑定
		4、如果构造函数没有返回值，隐式返回this对象
	*/	
	fn.num = 20;
	fn.prototype.num = 30;
	fn.prototype.method = function(){
		console.log(this.num)
	}
	var prototype  = fn.prototype;
	var method = prototype.method
	new fn()			//10
	new fn().method();	//10
	prototype.method();	//30
	method()			//underfined

箭头函数

	function fn(){
		this.num = 10;
		return ''
	}
	var obj = new fn();
	console.log(obj.num)	//underfined
	//返回出来的不是一个对象，this还是指向实例化对象
	//返回出来一个对象function，this是指向return对象
	//返回出来是一个数据类型，this还是指向实例化对象
	//返回出来是null对象，this还是指向实例化对象

	let box = document.querySelector('.box')
	let lili =  document.querySelector('.lili')
	box.onclick = move;
	lili.onclick = move;
	fuction move(){
		setTimeout(()=>{
			this.style.left = '100px'
		},1000)
	}

//setTimeout中的匿名function()是this指向window

//改为箭头函数，this指向,是根据他所在地方上下文决定，实际是调用上一层this的作用域内


var obj = {
	fn:()=>{
		console.log(this)	
		//因为obj是一个对象，没有形成作用域，因此this还是指向window
	}
}

总结：箭头函数this指向是声明就固定了