js中的this指向

js中的this指向

首先记住一句话：在箭头函数中this是静态的，在声明箭头函数时this指向就已经确定。非箭头函数中this时动态的，在调用时确定的。而且箭头函数中的this不能被call bind apply改变this指向

在普通函数中

this指向只和谁调用它有关系，跟函数在哪里声明无关

function test() {
  var a = 2
  console.log(this.a);
}

test() // undefined

函数在最外层被调用 此时的this指向window，在window并未声明a这个变量，所以打印undefined

var name = 'aaa'
var obj = {
  name: 'bbb',
  show: function() {
    console.log(this.name);
  }
}
obj.show() // bbb

此时是obj这个对象调用show函数，此时的this就指向obj，所以会打印出bbb

总结：普通函数中this永远指向最后调用它的那个对象

箭头函数中

箭头函数中this指向其父级上下文

var name = 'aaa'
var obj = {
  name: 'bbb',
  show: () => {
    console.log(this.name);
  }
}
obj.show() // aaa

call bind apply方法对箭头函数无法改变this

var name = 'aaa'

var obj = {
  name: 'bbb',
  show: () => {
    console.log(this.name);
  }
}

var obj1 = { name: 'ccc' }

obj.show.call(obj1) // aaa

弄清以上两种情况时，其他情况就比较容易理解了

最后