JS中搞不懂的this

this是.call()的第一个参数，如果没有call，那么去问mdn，你这个方法/函数的this是什么呀。
1.this为button

button.onclick = function(){
 console.log(this) //触发事件的元素，button
}

onclick后面是一个function，在函数内，this 是触发当前事件的元素。

2.this为button

button.addEventListener(‘click’,function(){
  console.log(this) //该元素的引用，button
})

当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this值是该元素的引用。
3.this为li

$('ul').on('click','li'/*与selector相匹配的元素*/,function(){
  console.log(this)//this代表了与selector相匹配的元素
    //li元素
})

当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。对于直接事件而言，this代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector相匹配的元素。

关于this的魔鬼题目

function X(){
  return object = {
    name: 'object',
    f1(x){
      x.f2()
    },
    f2(){
      console.log(this) //A，object/options
    }
  }
}
var options = {
  name: 'options',
  f1(){},
  f2(){
    console.log(this) //B，object/options
  }
}
var x = X()
x.f1(options)

问调用的是A还是B？打印出来的是什么？
B，options

function X(){
  return object = {
    name: 'object',
    f1(x){
      x.f2.call(this)
    },
    f2(){
      console.log(this) //C，object/options
    }
  }
}
var options = {
  name: 'options',
  f1(){},
  f2(){
    console.log(this) //D，object/options
  }
}
var x = X()
x.f1(options)

D,object

function X(){
  return object = {
    name: 'object',
    f1(x){
      this.options = x
      this.f2()
    },
    f2(){
      this.options.f2.call(this)//this.options就是x
    }
  }
}
var options = {
  name: 'options',
  f1(){},
  f2(){
    console.log(this) //this === object
  }
}
var x = X()
x.f1(options)

打印出来的this===object