JavaScript中this指向

在了解this指向时，我们先了解下我们常用几种函数调用方法.

• 普通函数

  function foo(){ console.log("move")}foo()

直接可以调用

• 对象的方法调用

  var bar = { foo:function(){ console.log("move") }} bar.foo()

通过对象 . 的方式调用

• 构造函数

  funcion Foo(){ .... }new Foo()

通过new关键字调用

• 绑定事件函数

这里包括点击，鼠标，键盘，只要满足触发条件就会执行函数

• 定时器

setTimeout(function(){console.log("move")},1000)

间隔多少毫秒调用一次或者多次

• 立即执行函数

(function(){console.log("move")})()

这个函数比较特殊，它会立即执行，无需再调用

了解到了函数的调用方法，我们再来看看它 this 的指向,先看结果

普通函数=>window

对象的调用=>调用该函数的对象

构造函数=>调用该方法的对象，谁调用就指向谁

绑定事件函数=>绑定事件的对象

定时器=>window

立即执行函数=>window

接下来我们通过实例看下this的指向

• 普通函数

图中我们可以看到this指向window

• 对象的调用

图中我们可以看到this指向的是一个对象，也就是bar

• 构造函数

图中我们可以看到this指向的是一个对象，谁调用它就指向谁

• 绑定事件函数

图中我们可以看到，this指向的是调用它的对象，也就是btn这个元素

• 定时器

图中我们可以看到，this指向window

• 立即指向函数

图中我们可以看到，this指向window

以上this的指向并不是一成不变的，可以手动的修改this指向， **call()**, apply(), bind()方法可以修改this指向.

ES6中新增了箭头函数 =>,这里我们了解下它的this指向，箭头函数本身是没有this指向的，它的this指向是继承来的 ，箭头函数中this是固定的,正因为它没有this，所以它也无法修改this，**call()**, apply(), bind()方法是不能用的.

我们看个案例理解下它的this指向：

function foo() {
    setTimeout(function(){
    console.log('id:', this.id);
}, 100);}
var id = 01
foo.call({ id: 11 })
//普通函数输出01



function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 01;
foo.call({ id: 11 })
//箭头函数输出 11

上面的例子，我们知道了在普通函数中，定时器的指向是window对象，我们再调用call做指向时，由于是定时器延时执行，this指向的是window，这是输出结果结果为01.但是在箭头函数中，是在foo()这个函数中定义的，所以说就算延迟执行，它的指向也不是调用的对象，而是定义这个箭头函数时的对象.