javascript 之 this 指向问题

前言

关于 this 指向的问题，之前我一直都相信这样的说法：谁调用它，this 就指向谁。可是在开发中往往有一些不一样的情况；所以在这里说说我对 this 的一些认知和理解。

首先，我们要知道的是，this 的指向，是在函数被调用的时候被确定的。也就是在执行上下文被创建时确定的。

例 1：

function fn() {
  var a = 10;
  console.log(this); // window
  console.log(this.a); // undefined
}
fn();

按照我们上面说的 this 最终指向的是调用它的对象，这里的函数 fn 实际是被 Window 对象所点出来的，如下代码可以得到证明。

function fn() {
  var a = 10;
  console.log(this); // window
  console.log(this.a); // undefined
}
window.fn();

其实 alert 也是 window 的一个属性，也是 window 点出来的。

例 2：

var obj = {
	a = 10;
	fn:function() {
		console.log(this); // {a: 10, fn: ƒ}
		console.log(this.a); // 10
	}
}
obj.fn();

这里的 this 指向的对象是 obj,因为调用这个 fn 是通过 obj.fn()执行的，那么自然指向的就是对象 obj，还有就是，this 的指向在函数创建的时候是决定不了的，只有在调用的时候才能决定，谁调用的就指向谁。

其实上面两个例子也并不是很准确，下面看看接下来的几个例子。

例 3：

var obj = {
	a = 10;
	fn: function() {
		console.log(this.a); // 10
		console.log(this); // {a: 10, fn: ƒ}
	}
}
window.obj.fn();

例 3 和例 2 几乎是一样的，但是这里的 this 为什么不是指向 window，如果按照上面的理论，最终 this 指向的应该是调用它的对象 window,而不是 obj。
好，话不多说，暂且先不说为什么 this 没有指向 window，我们再来看一段代码。

var obj = {
  a: 10,
  b: {
    a: 20,
    fn: function () {
      console.log(this); // {a: 20, fn: ƒ}
      console.log(this.a); // 20
    },
  },
};

obj.b.fn();

这里同样也是对象 obj 点出来的，但是 this 并没有执行它，那是不是之前说的都是错误的呢？其实只能说一开始说的不准确；接下来要补充的才是重点。

情况一：如果一个函数中有 this，但是它没有被上一级的对象所调用，在非严格模式下那么 this 指向的就是 window。
情况二：如果一个函数中有 this，这个函数有被上一级的对象所调用，那么 this 指向的就是上一级的对象。
情况三：如果一个函数中有 this，这个函数包含多个对象，尽管这个函数是被最外层的对象所调用，this 指向的也只是它上一级的对象，例 3 就可以证明这一点，接下来可以再来几个例子来说明。

var obj = {
  a: 10,
  b: {
    fn: function () {
      console.log(this); // {fn: ƒ}
      console.log(this.a); // undefined
    },
  },
};

obj.b.fn();

尽管对象 b 中没有属性 a，这个 this 指向的也是对象 b，因为 this 只会指向它的上一级对象，不管这个对象中有没有 this 要的东西。

还有比较特殊的情况，例 4：

var obj = {
  a: 10,
  b: {
    a: 20,
    fn: function () {
      console.log(this.a); //undefined
      console.log(this); // window
    },
  },
};

var fun = obj.b.fn;
fun();

这里的 this 指向的是 window，到这里是不是搞得有些蒙了？其实就是还有句话，this 永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的；例 4 中虽然函数 fn 是被对象 b 所引用，但是在将 fn 赋值给变量 fun 的时候并没用执行，所以最终指向的是 window。

构造函数 this

fnuction Fun() {
	this.str = "构造函数"
}
var a = new Fun();
console.log(a.str);  // 构造函数

这里之所以对象 a 可以点出函数 Fun 里面的 str 是因为 new 关键字可以改变 this 的指向，将这个 this 指向对象 a，这里用变量 a 创建了一个 Fun 的实例，相当于复制了一份 Fun 到对象 a 里面，此时只是创建好，并没有执行，而调用这个函数 Fun 的是对象 a，那么 this 指向的自然就是对象 a，那么为什么对象 a 中会有 str，因为已经复制了一份 Fun 函数到对象 a 中，用了 new 关键字就相当于复制了一份。

除此之外，我们还可以自行改变 this 的指向，在 javascript 中提供了call，apply，bind来解决，一般用来指定 this 的环境。
例如，我们通常会遇到这样的问题

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name);
    // console.log(this);
  },
};
var b = a.fn;
console.log(b()); // undefined

我们想打印对象 a 里面的 name 却打印出来 undefined 是什么情况？如果直接执行 a.fn()是可以的。

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name);
  },
};
console.log(a.fn()); // 张三

这里能够打印是因为这里的 this 指向的是函数 a，那为什么上面的不是指向 a 呢？那么为了可以达到目的，就需要通过以下方法实现。

1、call()

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name); // 张三
  },
};
var b = a.fn;
b.call(a);

通过 call 方法，给第一个参数添加要把 b 添加到哪个环境中，简单来说，this 就会指向那个对象。
call 方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
  name: "张三",
  fn: function (m, n) {
    console.log(this.name); //张三
    console.log(m + n); // 3
  },
};
var b = a.fn;
b.call(a, 1, 2);

2、apply()

apply 方法和 call 方法有些相似，它也可以改变 this 的指向

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name); //张三
  },
};
var b = a.fn;
b.apply(a);

同样 apply 也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
  name: "张三",
  fn: function (m, n) {
    console.log(this.name); //张三
    console.log(m + n); //30
  },
};
var b = a.fn;
b.apply(a, [10, 20]);

或者

var a = {
  name: "张三",
  fn: function (m, n) {
    console.log(this.name); //张三
    console.log(m + n); //30
  },
};
var b = a.fn;
var arr = [10, 20];
b.apply(a, arr);

注意：如果 call 和 apply 的第一个参数是 null,那么 this 指向的是 window 对象

var a = {
  name: "张三",
  fn: function () {
    console.log(this); //Window
  },
};
var b = a.fn;
b.apply(null);

3、bind()

bind 方法和 call、apply 方法有些不同，但不管怎么说它们都是用来改变 this 的指向。
先来说说它们的不同吧。

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name);
  },
};
var b = a.fn;
b.bind(a);

我们发现代码没有打印，对，这就是 bind 和 call、apply 方法的不同，实际上 bind（）返回的是一个修改过后的函数。

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name);
  },
};
var b = a.fn;
var c = b.bind(a);
console.log(c); //ƒ (){console.log(this.name);}

那么我们现在执行一下函数 c 看看，能不能打印出对象 a 里面的 name

var a = {
  name: "张三",
  fn: function () {
    console.log(this.name); // 张三
  },
};
var b = a.fn;
var c = b.bind(a);
c();

OK!同样 bind 也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
  name: "张三",
  fn: function (num1, num2, num3) {
    console.log(this.name); //张三
    console.log(num1, num2, num3); // 10  1  2
  },
};
var b = a.fn;
var c = b.bind(a, 10);
c(1, 2);