JavaScript：this指向问题

简介

关于js中this的指向常常让初学者感到迷茫，其实只要理解到位，还是比较简单的

所有情况都可归结与以下五种，只要把以下五种搞懂this就理解到位了

1.默认绑定

默认绑定就是独立调用，不借助任何其他手段。在浏览器环境下，默认绑定中的this===window

举例

//独立调用
function fn(){
	console.log(this)
}
fn()
//定时器
setTimeout(function () {
  console.log(this);
}, 1000);
//立即指向函数
（function fn(){
	console.log(this)
})()

2.隐式绑定

通常是指通过对象.的形式来调用函数，隐式绑定中的this===obj

举例

let obj={
a:1,
foo:function(){
		console.log(this)
	}
}

obj.foo()

3.显示绑定

通常是指使用call apply bind这三者其中的一个来显示的指明this的指向，通常是用来改变this的指向

举例

function fn(){
	console.log(this)
}
fn()
//目前this肯定指向window 因为是独立调用

let obj={}
fn.call(obj)()
//此时this指向了obj

4. new 绑定

通常是指new 后面一个构造函数，生成一个实例对象，此时this指向实例化后的对象

举例

function Fn(){
	console.log(this)
	this.a=10
}
let fn=new Fn()
//fn.a==10

5. 箭头函数

箭头函数特点是没有this，他的this就是其外层函数(普通函数)的this,如果没有外层函数，那么就是window,理解了前四点，箭头函数this轻松搞定

举例

//其没有外层函数，那么指向window
setTimeout(()=>{
console.log(this)
})

//指向外层函数也就是obj
let obj={
a:1,
foo:function(){
		console.log(this)
		let test=()=>{
			console.log(this)
		}
		test()
	}
}

obj.foo()

优先级

new绑定 > 显示绑定 > 隐式绑定 > 默认绑定