浅析JS中的this

JS 中的this到底是什么

首先说结论：

fn.call (context,argument[]) ，this 就是你 call 一个函数时，传入的 context。

那大家肯定有疑问，函数调用形式多钟，如果不是这种调用形式呢？那又如何确定this呢？
接下来我们先从函数调用形式说起

函数调用形式

JS（ES5）里面有三种函数调用形式：

fn(p1, p2) 
obj.child.method(p1, p2)
fn.call(context, p1, p2) //标准调用形式

其中，第三种调用形式，才是正常调用形式函数调用标准形式

fn.call(context, p1, p2)

其他两种都是语法糖，可以等价地变为 call 形式：

fn(p1, p2) 等价于
fn.call(undefined, p1, p2)

obj.child.method(p1, p2) 等价于
obj.child.method.call(obj.child, p1, p2)

所以，我们知道不论哪种情况的函数调用，都可以转换为标准形式：

fn.call(context, p1, p2)

如此，只要是函数调用，你就可以轻松的知道this的传入形式。如果你的函数调用形式不是 call 形式，请按照「转换代码」将其转换为 call 形式。

this 传入的是什么？

在了解this 就是 call 一个函数时，传入的 context后，我们还需要了解他传入的是什么

首先我们构造一个监听函数

$div.on('click',function(){
  conlose.log('click')
  conlose.log('this')
})
click
<div></div>

在这个监听函数中，我们发现，打印出this就是我们监听的元素
那么this是否就是这个监听元素吗？实际不是这样的

接下来我们继续构造一个事件委托

 $div.on('click','button',function(){
  conlose.log('click')
  conlose.log('this')
})
click
<button></button>

在这个事件委托中，打印出的this是我们点击的元素(button)，并不是我们监听的元素

那么现在结论出来了，this ===e.currentTaget ？

$div.on('click','button',function(e){
  conlose.log('click')
  if (this === e.currentTaget){
    conlose.log('true')
  }
})
click
true

实际证明，的确如此。

通常性看来，this 在JS中是多余的，它只是为了看起来像Java而设定的

this的使用方式

在一个对象里， 可以用this表示一个对象

通常时候，其实this是多余的，我们可以直接用对象名，而不使用this。

但是，某些时候，我们并不知道对象名，这时候就不得不用this来替代了。

let module = {
  element: null,
  init: function(){
    let $div = this.element  //this.element = module.element
                             //在这里，对象名module可以用this替代
    $div.on('click','button',this.onClickButton)
    $div.on('click',function(){
      conlose.log('click')
    })
  },
  onClickButton: function(e){
    console.log('button is click')
  }
}
module.init($div) // 等同于 module.init.call(module,$div)

但是 this在一个对象中，是可以改变的

let module = {
  element: null,
  init: function(){
    let $div = this.element  
    $div.on('click','button',this.onClickButton)  //这里的this === module
  },
  onClickButton: function(e){
    console.log('button is click')
    console.log('this')  //由于触发了click监听事件，这里的this已经变成了监听事件的点击元素button
  }
}
module.init($div) // 等同于 module.init.call(module,$div)

上例中，由于监听事件的this的值是指向触发事件的元素。所以this已经改变

可以看出，this在特定场景下，是会根据API的源代码定义所改变。

那么如果我们想指定监听事件传入的this是我们想要的this，怎么办？

$div.on('click','button',function(){
  module.onClickButton.call(module，e)  //这里我们强制指定了传入this值为module
})  

$div.on('click','button',this.onClickButton.bind(this))

我们还可以用bind 来实现

$div.on('click','button',this.onClickButton.bind(this))

总结

1. this 就是你 call 一个函数时，传入的 context
2. 如果函数调用形式不是 call 形式，请将其转换为 call 形式
3. 在一个对象里， 可以用this表示一个对象
4. 在监听事件里，this的值是指向触发事件的元素
5. 任何函数都可以强制指定传入的this，也可以使用bind来改变默认传入this