js中的this

一句话，call的第一个参数

看几个例子
例１．

button1.onclick = function(){
  console.log(this)
}

这里的this是什么？
不要靠猜，是call的第一个参数，不知道去看MDN。
MDN的解释：处理器里的 this 值是触发事件的元素。

所以这里的this肯定就是button了

我们可以这样来改一改：

button1.onclick = function(){
  console.log(this)
}

button1.onclick.call({name: 'hua'})

这里就非常明显，this就是call的第一个参数。

例２．

button2.addEventListener('click',function(){
  console.log(this)
})

MDN的解释：通常来说this的值是触发事件的元素的引用
所以this肯定是button
例３．

$('ul').on('click', 'li', function(){
  console.log(this)
})

文档解释：当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。对于直接事件而言，this 代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector 相匹配的元素。
在这个例子中selector就是li，所以this就是li

例４．

function X(){
  return object = {
    name: 'object',
    f1(x){
      x.f2()  //调用options中的f2
    },
    f2(){
      console.log('object')
      console.log(this)
    }
  }
}

var options = {
  name: 'options',
  f1(){},
  f2(){
    console.log('options')
    console.log(this)  //打印
  }
}

var x = X()
x.f1(options)

会打印出什么呢？

做一个分析：x就是X返回的东西，也就是object，接下来调用object中的f1，并且传入options，那么f1中的x.f2()，实际上调用的是options中的f2，所以this指向options，打印出options

例５．
对上边的做一个修改

function X(){
  return object = {
    name: 'object',
    options: null,
    f1(x){      //　传入options
      this.options = x    //将自身的options也变为传入的options
      this.f2()     //this，还是自己，调用obejct的f2
    },
    f2(){
      this.options.f2.call(this)  //this.options是options，调用它的f2，并且将object当做this传过去
    }
  }
}

var options = {
  name: 'options',
  f1(){},
  f2(){
    console.log('options')
    console.log(this)　　//打印
  }
}

var x = X()
x.f1(options)