JavaScript this绑定全解析-优快云博客

this是JavaScript中的一个关键字，但是又一个相对比较特别的关键字，不像function、var、for、if这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。

this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。

这一次，我们一起来彻底搞定this到底是如何绑定的吧！

理解this

1.1.为什么使用this

常见面向对象的编程语言中，比如Java，C++，Swift，Dart等等一系列语言中，this通常只会出现在类的方法中。
也就是你需要有一个类，类中的方法中，this代表的是当前调用对象。
但是JavaScript中的this更加灵活，无论是他出现的位置还是它代表的含义。
使用this有什么意义呢？下面的代码中，我们通过对象字面量创建出来一个对象，当我们调用对象的方法时，希望将对象的名称一起进行打印。
如果没有this，我们的代码会是下面的写法：
在方法中，为了能够获得name名称，必须通过obj的引用（变量名称）来获取。
但是这样做有一个弊端，如果我改了obj的名字，那么所有方法中的obj都需要改。

var obj = {
  name: "why",
  running: function() {
    console.log(obj.name + " running");
  },
  eating: function() {
    console.log(obj.name + " eating");
  },
  studying: function() {
    console.log(obj.name + " studying");
  }
}

上面的代码，我们就可以通过this来进行优化。

当我们通过obj去调用这些方法时，this就是指向obj对象。

var obj = {
  name: "why",
  running: function() {
    console.log(this.name + " running");
  },
  eating: function() {
    console.log(this.name + " eating");
  },
  studying: function() {
    console.log(this.name + " studying");
  }
}

是不是很方便快捷呢？上面只是应用this的一个场景而已，开发中用到this的场景到处都是，这也是她为什么不容易理解的原因。

1.2. this指向什么

this在全局作用域下指向什么？

console.log(this); // window

var name = "why";
console.log(this.name); // why
console.log(window.name); // why

但是，开发中很少直接在全局作用域下使用this，通常都是在函数中使用
所有的函数在被调用时，都会创建一个执行上下文：

通过控制台打印很简单的看出，全局作用域下，this指向window。
这个上下文中记录着函数的调用栈。函数的调用方式、传入的参数信息等。
this也是其中的一个属性。
我们先来看一个让人困惑的问题：
定义一个函数，通过三种不同的方式调用，产生了三种不同的结果

// 定义一个函数
function foo() {
  console.log(this);
}

// 1.调用方式一: 直接调用
foo(); // window

// 2.调用方式二: 将foo放到一个对象中,再调用
var obj = {
  name: "why",
  foo: foo
}
obj.foo() // obj对象

// 3.调用方式三: 通过call/apply调用
foo.call("abc"); // String {"abc"}对象

函数在调用时，JavaScript会默认给this绑定一个值
this的绑定和定义的位置没有关系
this的绑定与调用方式以及调用的位置有关系
this是在运行时被绑定的

this绑定规则

2.1.默认绑定

独立的函数调用我们可以理解成函数没有被绑定到某个对象上调用

案例一：普通函数调用

该函数直接被调用，并没有进行任何的对象关联
这种独立的函数调用会使用默认绑定，通常默认绑定时，函数中的this指向全局对象（window）

function foo() {
  console.log(this); // window
}
foo();

案例二：函数调用链（一个函数调用另一个函数）

所有的函数调用都没有被绑定到某个对象上

// 2.案例二:
function test1() {
  console.log(this); // window
  test2();
}
function test2() {
  console.log(this); // window
  test3()
}
function test3() {
  console.log(this); // window
}
test1();

案例三：将函数作为参数，传入到另一个函数中

function foo(func) {
  func()
}
function bar() {
  console.log(this); // window
}
foo(bar);

我们对案例进行一些修改，考虑一下打印结果是否会发生变化

function foo(func) {
  func()
}
var obj = {
  name: "why",
  bar: function() {
    console.log(this); // window
  }
}
foo(obj.bar);

这里的结果依然是window，因为在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用

2.2. 隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的；

也就是他的调用位置中，是通过某个对象发起的函数调用。

案例一：通过对象调用函数

function foo() {
  console.log(this); // obj对象
}

var obj = {
  name: "why",
  foo: foo
}

obj.foo();

foo的调用位置是obj.foo方式进行调用的，那么foo调用时this会隐式的被绑定到obj对象上

案例二：案例一的变化

function foo() {
  console.log(this); // obj对象
}

var obj1 = {
  name: "obj1",
  foo: foo
}

var obj2 = {
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();

我们通过obj2又引用了obj1对象，再通过obj1对象调用foo函数；那么foo调用的位置上其实还是obj1被绑定了this；

案例三：隐式丢失

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

var obj1 = {
  name: "obj1",
  foo: foo
}

// 讲obj1的foo赋值给bar
var bar = obj1.foo;
bar();

结果最终是window，为什么是window呢？
因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定；

2.2. 显式绑定

隐式绑定有一个前提条件：

必须在调用的对象内部有一个对函数的引用
如果没有这样的引用，在调用时，会报函数找不到的错误
正是通过这个引用，间接的帮this绑定到了这个对象上

2.3.1 call 、apply

通过call或者apply绑定this对象

显示绑定后，this就会明确的指向绑定的对象

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

foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123

2.3.2 bind函数

如果我们希望一个函数总是显式的绑定到一个对象上，可以怎么做？

方案一：自己手写一个辅助函数

我们手动写一个bind的辅助函数
这个辅助函数的目的是在执行foo时，总是让他的this绑定到obj对象上

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

var obj = {
  name: "why"
}

function bind(func, obj) {
  return function() {
    return func.apply(obj, arguments);
  }
}

var bar = bind(foo, obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

案例二：使用Function.prototype.bind

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

var obj = {
  name: "why"
}

var bar = foo.bind(obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

2.3.3 内置函数

有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。

这些内置函数会要求我们传入另外一个函数；
我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
这些函数中的this又是如何绑定的呢？

案例一： setTimeout

setTimeout中会传入一个函数，这个函数中的this通常是window

setTimeout(function() {
  console.log(this); // window
}, 1000);

为什么这里是window呢？

这个和setTimeout源码的内部调用有关
setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象

案例二：数组的forEach
数组有一个高阶函数forEach，用于函数的遍历

在forEach中传入的函数打印的也是window对象
这是因为默认情况下传入的函数是自动调用函数（默认绑定）

var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
  console.log(this); // 三次window
});

我们是否可以改变this指向呢？

var names = ["abc", "cba", "nba"];
var obj = {name: "why"};
names.forEach(function(item) {
  console.log(this); // 三次obj对象
}, obj);

3.1 ES6箭头函数

在ES6中新增一个非常好用的函数类型：箭头函数

箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。

我们来看一个模拟网络请求的案例：

这里我们使用setTimeout来模拟网络请求。请求到数据后如何可以存放到data中呢？
我们需要拿到obj对象，设置data；
但是直接拿到的this是window，我们需要在外层定义： var _ this = this
在setTimeout的回调函数中使用_ this就代表了obj对象

var obj = {
  data: [],
  getData: function() {
    var _this = this;
    setTimeout(function() {
      // 模拟获取到的数据
      var res = ["abc", "cba", "nba"];
      _this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

上面的代码在ES6之前是我们常用的方式，从ES6开始，我们会使用箭头函数：

为什么setTimeout的回调函数中可以直接使用this呢？
因为箭头函数并不绑定this对象，那么this引用就会从上层作用域中找到对应的this

var obj = {
  data: [],
  getData: function() {
    setTimeout(() => {
      // 模拟获取到的数据
      var res = ["abc", "cba", "nba"];
      this.data.push(...res);
    }, 1000);
  }
}

obj.getData();