A guide to this in JavaScript

原文参考(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的值。

未完待续···