this梳理

JS中的this真的很坑，这篇文章仅用来梳理一些常见的知识点和疑问。
首先，先列出this的一些关键的理解点：

• this就是调用call方法时传递的第一个参数
• 在常见的对象使用中，只要不使用call方法指定第一个参数，this就是指向对象本身
• 顺着第二点，如果使用call传递参数，那么this就是变化的，这时候的this就指向call方法传递的第一个参数
• 在一些常用API中，比如浏览器的API或者jQuery的API中，如果涉及到this的话，这些this是在设计这些API的时候就已经指定好了的
• 如何知道this具体指代什么？有三种方法：1、console.log(this)直接打出来看看；2、看源码（对于大多数人都不可能）；3、看相应的文档（这个很好用）。

以上就是关于this的一些重要的知识点，接下来我们一条一条来理解。

1、this就是调用call方法时传递的第一个参数

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

这个函数调用打出来的结果是window，a()可以写出a.call()没有传递参数，也就是说this是没有传进去的，在这种情况下，浏览器就会默认this就是window本身。

再看另一串代码：

var object = {
  a: function(){
    console.log(this)
  }
}
object.a()

这段代码执行的结果是获得了object
object.a()可以改写成 object.a.call(object) ，这两者是完全等价的。如果不理解可以看这篇文章：this 的值到底是什么？一次说清楚

2、在对象的使用中，如果不使用call方法改变this，那么this就是指对象本身

let module = {
  a: function(){
    console.log(this)
  }
}
module.a()

调用打出来的结果就是module本身，而且module.a()可以改写成module.a.call(module)或者this.a.call(this)其实都是一样的。

当然，如果这时候使用call方法指定了this的话就另当别论了，这就涉及到我们上面说的第三点。

let b = 1
let module = {
  a:function(){
    console.log(this)
  }
}
module.a.call(b)

这个结果打出来的就是1,因为this本身是可变的，就是call方法的第一个参数，在这里就是变量b。

3、使用bind来绑定this

this的值是变化的，有些时候我们需要this不改变，这就需要JS的另一个API bind了。

var a = 5
var module = {
  a: 10,
  add: function(){
    console.log(this.a + 5)
  }
}
module.add()  // 15   这里传了this，相当于module.add.call(module)
var b = module.add  //this变化了，这里是window
b()  // 10  这里没传this，相当于b.call() this默认是window

var c = b.bind(module) //将this绑定为module，bind返回一个新的函数
c()  // 15

var b = module.add.bind(module)  //这样也行，只是上面的简写，bind返回新的函数
b() //调用这个函数

4、当我们使用一些具体的API的时候，this是什么呢？

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

在这个例子中，打出的this就是点击的对象button本身。

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

这个this的结果就是body本身也就是添加事件委托的对象，和e.currentTarget是一致的。

再举一个jQuery的例子：

$('body').on('click','div',function(){
  console.log(this)
})

这个this就是匹配的div了。

从以上的例子可以看出来，在使用不同的API的过程中，得到的this是不一样的，那么我们如何确定？方法就是开头说的那样，要么console.log(this)打出来看，要么就直接去看对应的API文档。

今天先写到这里吧~