ES6回调函数里箭头函数的this指向问题

箭头函数的使用和回调函数中this指向

1】定义函数的方式：

①function

const aaa=function(){

}

②对象字面量中定义函数

const obj={
	bbb:function(){
	
	},
	ccc(){
	
	}
}

③ES6中的箭头函数

const ddd = (参数列表) =>{
    
}

2】箭头函数参数问题

①放入两个参数

const sum = (num1,num2) => {
return num1+num2
}

②放入一个参数（可以不加括号）

const power = num => {
return num * num
}

3】箭头函数内部只有一行代码，不需要用return

const mul = (num1,num2) => num1 * num2
//不需要return，会自动执行return
const demo = () => console.log('Hello Demo')
//此时demo的返回值，就是log()的返回值，如果没有返回值，n那么demo的返回值就是undefined

4】什么时候使用箭头函数

当我们将一个函数作为参数传到另一个函数里面的时候

5】回调函数中this的指向

①this关键字本来的用法：

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

②箭头函数总结this用法

除了箭头函数，其他函数的this指向是：谁调用的就指向谁。如果是回调函数调用的话，就需要从设计回调函数的代码底层来找到相应的对象。

箭头函数this指向：一层一层往上找，找到离自己最近的this，就指向他。（注意：只要有对象出现，对象里面就有this）

• 此时this指向的上一层，不论是否是回调函数调用，都是同样的方式处理，根据具体代码来找该方法所属的对象。

出现下面这种情况主要是因为setTimeout()是一个回调函数

<script type="text/javascript">
			setTimeout(function(){
				console.log(this)
			})//window
//此时，可以注意到非箭头函数的this都是指向setTimeout()方法的对象window
			setTimeout(()=>{
				console.log(this)
			})//window
//箭头函数里面的this往外层一层层找this，现在已经是最外层了，所以只能找到this=window
			const obj={
				aaa:function(){
					setTimeout(function(){
						console.log(this)
					})//window
					setTimeout(()=>{
						console.log(this)
					})//obj
//可以注意到箭头函数的this是指向obj对象，this表示的是该setTimeout()函数所属的对象，此时就不能用从setTimeout()回调函数底层来思考所属的对象了，就只能根据具体代码来一层一层找对象，最终找到obj对象
					}
				}
			obj.aaa()
		</script>

<script type="text/javascript">
			const obj={
				aaa:function(){
				setTimeout(function(){
                    
					setTimeout(function(){
						console.log(this)
                    	})//window
                    
                      setTimeout(()=>{
						console.log(this)
					   })//window
					
                })
                 
				  setTimeout(()=>{
                      
					 setTimeout(function(){
						console.log(this)
                    	 })//window
                      
                       setTimeout(()=>{
                        console.log(this)
						})//obj
                      
                  })
					}
				}
			obj.aaa()
		</script>

总结：在回调函数里尽量使用箭头函数，避免一些问题，或者是在回调函数中使用const that= this 来规避一些this指向的问题