持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

铃铛说点题外话

上一节课说了改变this的显示绑定的三种方式：apply、bind和call，针对于这三种的区别也详细的介绍了并且使用防抖的案例进行的解释。这这一篇我们就顺着上一节课改变this指向开始说吧，下一篇再说说箭头函数和普通函数的区别

铃铛说正文

先总结性的说说能改变this指向的四种大方向：new实例化、apply、call、bind显示绑定、隐式绑定和默认绑定。

先说第一点，JS里面为什么需要this？
- 常见的面向对象的编程语言中，比如 Java、C++、Switch、Dart等等一系列语言中，this 通常只会出现在类的方法中。
- 也就是你需要有一个类，类中的方法（特别是实例方法）中，this 代表的是当前调用对象。
- 但是JavaScript 中的this 更加灵活，无论是它出现的位置还是它代表的含义。
下面说一个this灵活使用的例子

var obj = {
  name: "xiaobai",
  eating: function () {
    console.log(obj.name + "在吃东西")
  },
  studying: function () {
    console.log(obj.name + "在学习")
  }
}

obj.eating()   //xiaobai在吃东西
obj.studying()   //xiaobai在学习

这里我们会发现，每一次调用obj这个对象里面的属性前面都需要加上obj.xxx，那么如果我们采用的this，上面的代码就可以变成下面这样，我们就不需要记得最开始的对象名字了。

var obj = {
  name: "syl",
  eating: function () {
    console.log(this.name + "在吃东西")
  },
  studying: function () {
    console.log(this.name + "在学习")
  }
}

obj.eating()   //xiaobai在吃东西
obj.studying()    //xiaobai在学习

关于this的指向我们也可以记住这样一句话 this的指向与函数所在的位置无关，与调用方式和调用的位置有关。

这里我们先简单的看看这句话的分析

function foo() {
  console.log(this)
}

//1.直接调用函数
foo()   //window

//2.创建一个对象，对象中的函数指向foo
var obj = {
  name: "xiaobai",
  foo: foo
}

obj.foo()    //obj

//3.使用apply调用
foo.apply("apply")   //String{"apply"}

这里我们可以看出来this指向的就是上文说的之和调用方式和调用位置有关，但是这几种方式之间也有一个优先级：new实例化>显示调用>隐式调用>默认调用。

跟铃铛说再见

关于this的指向我们就说到这里了，下一篇我们说说箭头函数，箭头函数到底和普通函数有什么区别。

下一篇见~~~

细说JS系列（十三）

铃铛说点题外话

铃铛说正文

跟铃铛说再见