JS中箭头函数和普通函数this指向问题

一、普通函数中的this

（1）普通函数中的this代表它的直接调用者，如obj.fn()，fn的this指向就是obj
（2）默认情况下，没有直接的调用者,this的指向为window
（3）严格模式下，设置了‘use strict’，this的指向为undefined
（4）当使用call，apply，bind绑定时，this指向绑定对象

注释
　　JS中方法虽然不互通，但是调用时可以修改函数主体执行，使用call，apply，bind方法即可做到

1、call使用方法
　　　　　　 函数.call(调用主体，…参数)　
　　
　　call方法第一个参数（调用主体）是this的指向。当第一个参数（调用主体）为null/undefined时默认指向window。

2、apply使用方法　　　
　　　　　　　函数.apply(调用主体，[参数])　
　　
　　call方法相似，只是传入参数不同，apply接受两个参数，第一个参数（调用主体）是this的指向，第二个参数为数组（参数外加一个数组框[ ],但是使用的是里边的内容），同样第一个参数如果为null/undefined则默认指向window。
　　
3、bind使用方法
　　　　　　　函数.bind(调用主体，…参数)
　　bind和call及其相似，只不过bind是返回一个函数，不直接进行执行，而call是直接执行这个方法。

二、箭头函数中的this

（1）箭头函数和普通函数不同，箭头函数的this被强行绑定到上下文中，上下文this是什么箭头函数this就是什么，而不是和普通函数似的是调用者为this的指向，箭头函数this指向看上下文，要看箭头函数声明位置的上下文，如果声明没有执行，则上下文不一定是其箭头函数的指向（后边例题有详细讲解）

三、实例详解

（1）hello是全局函数，没有直接调用它的对象，也没有使用严格模式，this指向

windowfunction hello() { 
   console.log(this);  // window 
}  
hello();123

（2）hello是全局函数，没有直接调用它的对象，但指定了严格模式（‘use strict’），this指向undefined

function hello() { 
   'use strict';
   console.log(this);  // undefined
}  
hello();1234

（3）hello直接调用者是obj，第一个this指向obj，setTimeout里匿名函数没有直接调用者，this指向window

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(function () {
      console.log(this);    // window
    });
   }    
}
obj.hello();123456789

（4）hello直接调用者是obj，第一个this指向obj，setTimeout箭头函数，this指向最近的函数的this指向，即也是obj

const obj = {
    num: 10,
   hello: function () {
    console.log(this);    // obj
    setTimeout(() => {
      console.log(this);    // obj
    });
   }    
}
obj.hello();
12345678910

（5）diameter是普通函数，里面的this指向直接调用它的对象obj。perimeter是箭头函数，this应该指向上下文函数this的指向，这里上下文没有函数对象，就默认为window，而window里面没有radius这个属性，就返回为NaN。

const obj = {
  radius: 10,  
  diameter() {    
      return this.radius * 2
  },  
  perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter())    // 20
console.log(obj.perimeter())    // NaN12345678

（6）obj.foo()虽然obj调用，但是foo为箭头函数，而箭头函数声明在全局变量中，this的指向为window

let foo=（）=>{
console.log(this)
}
let obj={
foo:foo
}
foo()
obj.foo()1234567

(7)箭头函数的 this 始终指向函数定义时的 this，而此箭头函数没有被函数包裹，外边只有obj，但是obj是一个对象，不能改变作用域，所以上下文为obj的外边，全局作用域，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this”所以还是window

let obj={
foo:()=>{
console.log(this)//window
}
}
obj.foo()12345

(8)obj对象里边套用对象，但是还是对象，所以箭头函数的上下文还是全局中，还是window

let obj={
foo:{
foo:{
foo:()=>{
console.log(this)//window
}
}
}
}12345678

(9)箭头函数的声明位置是fn执行函数中声明的，fn包裹着箭头函数，所以箭头函数的上下文就是fn函数中的this，显然fn是普通函数，调用者是obj这个对象，所以箭头函数的this也zhi’xia指向obj

let obj={
fn:function(){
let foo=()=>{
console.log(this)//obj
}
foo()
}
}
obj.fn()//obj12345678

(10)obj.fn相当于返回了一个完整的函数，但是并没有执行，所以箭头函数也没有在上边的代码中声明，而是被带到了新的作用域中，被fn包裹着暴露在全局作用域中了，此时执行f(),这个时候才进行箭头函数声明注意箭头函数声明的位置箭头函数的上下文中的this就是f的this指向，很明显是window

let obj={
fn:function(){
let foo=()=>{
console.log(this)
}
foo()
}
}
let f=obj.fn
f()//window123456789

(11)这个为什么不是和上一个没有太大的区别吗？还是要注意箭头函数的声明位置obj.fn()是执行了这个函数，返回了foo箭头函数，在执行的时候箭头函数foo已经声明在上边代码中了，被obj和fn函数一层一层包裹，此时的shan上下文为上边fn函数，fn是obj调用的所以this

let obj{
fn:function(){
let foo=()=>{
console.log(this)
}return foo
}
}
let f=obj.fn()
f()//obj12345678

在箭头函数的this指向问题中一定要注意什么时候声明，声明时候的位置，作用域是哪里

原文链接：https://blog.csdn.net/qq_41260655/article/details/108364097

作者：r.ZhS