彻底弄懂this指针指向

普通函数的this指向

• 全局this

console.log(this) // window

function globalFunc() {
  console.log(this) // window
}

globalFunc() // 相当于window.globalFunc(), 全局方法就是window在调用,所以指向window

在浏览器中指向window

• 函数(this指向调用者)

var obj = {
  clg: function() {
    console.log(this)
  }
}

obj.clg() // this = obj

对象调用方法指向该对象

var a = 5
var obj = {
  a: 10,
  clg: function() {
    console.log(this.a)
  }
}

var func = obj.clg
func() // a = 5, this === window

因为函数其实是地址,obj.clg赋值给func,其实是将函数地址赋值给func,函数只有一份,obj.clg()是通过对象寻址到函数的,是对象调用的,所以this指向obj,而func()是window.func寻址到的函数,是window调用的,所以指向window,也就是谁调用,this指向谁

var a = 5
var obj = {
  a: 10,
  clg: function() {
    function func() {
      console.log(this)
    }
    func() // 指向window,没有对象调用就相当于window调用的
  }
}

obj.clg()

var a = 5
var obj = {
  a: 10,
  clg: function() {
    setTimeout(function() {
      console.log(this)
    }, 500)
  }
}

obj.clg()

func没有被对象调用,所以是window调用的,this指向window

• 箭头函数(箭头函数没有this指针,根据词法作用域找最近的this,只有函数有this)
  词法作用域是指找到作用域链中最近的一个变量,this和argument是函数才有的局部变量

var obj = {
  arrow: {
    func: () => {
      console.log(this) // window
    }
  }
}

obj.arrow.func()

箭头函数没有this指针,会根据词法作用域进行查找,对象也没有this指针,所以func对象和arrow对象都没有this局部变量,所有this找到了window上

var obj = {
  arrow: function() {
   setTimeout(() => {
     console.log(this) // obj
   }, 500)
  }
}

obj.arrow()

箭头函数没有this,通过词法作用域,找到arrow为函数,有this,则其this为arrow的this,arrow是obj调用的,所以this指向obj,所以箭头函数的this指向obj

• call/apply/bind

var a = 1
var obj1 = {
  a: 2
}

var obj2 = {
  a: 3
}

function clga() {
  console.log(this.a)
}

clga() // 1
clga.call(obj1) // 2
clga.apply(obj1) // 2
var f = clga.bind(obj2)
f() // 3

均可以修改this对象,注意apply和call都会执行函数,bind只是绑定this,但是bind之后,不论赋值给谁,调用的时候,this都会指向绑定的对象,所以此时f()中的this不是指向window而是指向obj2

注意: 当需要多个this的时候,可以使用that或者_this等保存对应的this,然后通过词法作用域,内部都可以拿到这个this