JS中的 this 指向的七种场景

àì夳堔傛蜴生んèń 2022-11-27 06:51 97阅读 0赞

**this指向问题**

this是一个关键字，指向一个对象，在不同的调用环境this指向的对象也不一样。

**1、全局this指window**

console.log(this)

**2、全局函数里的this指window**

function fn () { 
          console.log(this)
        }
       fn()

**3、事件处理函数里的this指绑定事件的DOM对象**（不一定是事件源，哪个对象绑定就是那个对象）

document.querySelector('#box').onclick = function () { 
          console.log(this)
    }

**4、没有名字的、明确指向的匿名函数的this指window**

;(function () { 
          console.log(this)
    })()
    
        setTimeout(function () { 
          console.log(this)
    }, 1000)

包括数组的map，reduce等方法里面的匿名函数this都是指window；匿名回调函数里的this也是window。

**示例1：**

var a = 2;
        function fun () { 
            console.log(this.a);
    }
        var o = {  a: 3, fun: fun }
        o.fun(); // 打印3

这时是o对象调用的函数，this指向o。只看前四行，函数没有被明确调用，指向的是window。

**示例2： 赋值语句的结果就是赋的值**

var p = {  a: 4 };
        // 把赋值的结果也就是fun这个函数放进一个自调用函数里来
        //执行，this指window
      (p.fun=o.fun)(); // 打印2

**5、对象方法里的this指对象本身，不管是字面量声明还是原型方法或者class，this都是当前实例对象**

var obj = { 
          name: 'lisi',
          say: function () { 
            console.log(this) // obj
          }
    }

**6、构造函数里的this指将来new的实例**

function Dog (name) { 
          this.name = name
    }

**7、箭头函数没有自己的this指向**

1、如果你希望this指当前对象，那么就用普通函数
     2、如果你希望this指向外层对象，用箭头函数
     3、如果内层外层都要，用普通函数，this指向内层；在外层声明一个变量把外层this存下来，比如
      const _this = this，_this指向  外层。

还没有评论，来说两句吧...