原文参考(medium.freecodecamp.org/a-guide-to-…)

this 关键词是Javascript中最广为使用的并且令人误解的词。今天我将尝试改变它。

当学习代词时，让我们回到古老的学校时代。

菲尔普斯游得很快，因为他想赢得比赛。

注意代词he的使用。我们在这不直接称呼菲尔普斯但是用代词he指代菲尔普斯。类似地，JavaScript使用this关键字作为指示对象来引用上下文中的对象，即主题。

例如：

在上面的代码中，我们有一个对象car，它有make,model和fullName属性。 fullName的值是一个function，它可以用两种不同的语法打印car的全称

• 使用this => this.make+” “ +this.model，这个this指向上下文中的对象，所以this.make实际上是car.make,并且this.model也是如此

• 使用点表示法，我们可以访问对象的属性car.make和car.model。
  

这就是this!

现在我们已经理解了this是什么，这只是最基础的用法，让我们来做一些规则以致于我们可以记住。

JS中的this关键词指向它所属的对象。

var car={
  make:'....'
  func:()=>{
    console.log(this.make)
  }
}

上面代码片段中的this属于对象car

依赖于用法，它有不同的值

1. 在一个方法里
2. 在一个函数里
3. 单独
4. 在一个事件中
5. call()和apply()

在一个方法里

当this在一个方法里使用，它指向方法所有者对象。

在一个对象中的定义的函数被叫做方法。让我们再举一次car的例子。

var car= {
  make: "Lamborghini",
  model: "Huracán",
  fullName: function () {
    console.log(this.make+" " +this.model);
    console.log(car.make+ " " +car.model);
  }
}
car.fullName();

fullName()在这里是一个方法。在这个方法里的this属于car

在一个函数里

在一个函数里，this有一点复杂。首先要理解的是，与所有对象都具有属性一样，函数也具有属性。无论函数何时执行，它都能获取this属性，该属性是一个变量，其中包含调用它的对象的值。

如果函数没有被对象调用，那么函数内部的this属于全局对象，称之为窗口。在这个案例里，this将引用全局作用域中定义的值。让我们看一个更好理解的例子：

var make= "Mclaren";
var model= "720s"
function fullName(){ 
  console.log(this.make+ " " + this.model);
}
var car = {
    make:"Lamborghini",
    model:"Huracán",
    fullName:function () {
      console.log (this.make + " " + this.model);
    }
}
car.fullName(); // Lmborghini Huracán
window.fullName(); // Mclaren 720S
fullName(); // Mclaren 720S

这里make，model和fullName是全局定义的，而car对象也有fullName的实现。当car对象被调用时，这指的是在对象内定义的属性。另一方面，其他两个函数调用是相同的并返回全局定义的属性。

单独

当单独使用而不是在任何函数或对象内部时，this指的是全局对象。

var make = 'Mclaren';
var model = '720s'
var name = 'Ferrari';
console.log(this.name); //Ferrari

这里的this指的是全局名称属性。

在一个事件中

事件可以是任何类型，但为了简单和清晰起见，让我们进行点击事件。

只要单击一个按钮并引发一个事件，它就可以调用另一个函数来根据点击执行某个任务。如果this在函数内部使用，它将引用引发事件的元素。在DOM中，所有元素都存储为对象。这就是为什么当引发一个事件时它会引用该元素，因为该webpage元素实际上是DOM中的一个对象。

比如：

<button onclick="this.style.display='none'">
  Remove Me!
</button>

call()、apply()& bind()

• bind：允许我们在方法上设置this的值。
• call和apply：允许我们借用函数并在函数调用上设置this的值。

未完待续···