JavaScript中this总结

摘要：普通函数调用函数在全局作用域下运行在非严格模式下，指向全局对象，在严格模式下，会变成。使用来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。即构造函数的指向它实例化出来的对象。

JavaScript中的this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

先来列举一下都有哪些函数调用方式：

普通函数调用

对象方法调用

call()、apply() 调用

bind()

构造函数调用

ES6箭头函数

通俗来说，“函数被谁调用，this就指向谁”。

函数在全局作用域下运行；在非严格模式下，this指向全局对象window，在严格模式下，this会变成undefined。

function foo1(){
  return this;
}

foo1() === window; // true 

function foo2(){
  "use strict";
  return this;
}

foo2() === undefined; // true

当以对象里的方法的方式调用函数时，它们的this是调用函数的对象。

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  console.log(this.x); // 1
}

var obj = {
  x: 1,
  foo: foo
};

obj.foo(); 

上面代码中，调用foo的是对象obj ，所以这里的this指向对象obj。

如果将对象里的foo方法赋给一个变量：

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

var obj = {
  x: 1,
  foo: foo
};

var fn = obj.foo;
fn(); 

将obj.foo赋给了fn变量，而fn是在全局作用域中运行，因此this指向window，由于window下没有x这个变量，所以this.x为undefined。

如果把obj.foo传递给一个自己声明的函数。

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

var obj = {
  x: 1,
  foo: foo
};

// 自定义函数
function todoFn(cb) {
  cb();    
};

todoFn(obj.foo);

将obj.foo传递给自定义函数作为回调函数执行。结果一样。因为它仍然是在全局作用域中运行。

最后来看看在setTimeout()中又会输出怎样的结果。

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  setTimeout(function(){
    console.log(this); // window
  }, 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

第一个this还是对象方法调用方式；但在setTimeout()里的this指向的是全局作用域window。为什么会这样？

原因是，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上，该函数是在全局作用域中执行的，所以this就指向 window。

上面代码的后三段代码中，都出现了同样的问题，就是它们的this都丢失了。怎么做才能让它们的this仍然指向原来的对象？

后面即将提到的call()、apply()及bind()方法都能解决这一问题。

使用call()或者apply()可以改变上下文的this值。

// 定义一个对象
var obj = {
  x: "local"
};

// 定义一个全局变量
var x = "global";

// 定义函数，返回值取决于调用方式
function speak(){
  return this.x;
}

speak(); // "global"
speak.call(obj); // "local"
speak.apply(obj); // "local"

直接调用sayName()时，相当于普通函数调用，this指向window，值为global；使用call()或apply()作用一致，都让this指向了对象obj。只不过在给call()和apply()传递参数时有区别，如：

function add(c, d) {
  return this.a + this.b + c + d;
}

var obj = {
  a: 1,
  b: 2
};

// 第一个参数作为 this 使用的对象，而后续参数作为参数传递给函数
add.call(obj, 3, 4); // 10

// 第一个参数同样是作为 this 使用的对象
// 第二个参数是传递一个数组
add.apply(obj, [3, 4]); // 10

Function.prototype.bind()会创建一个新的包装函数，这个函数会忽略它当前的this绑定（无论绑定的对象是什么）， 并把我们提供的对象绑定到this上。

var x = 9;
var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

// 相当于对象方法调用，this指向对象 o
obj.getX(); // 81

// 将对象 o 的方法getX赋值给 f，f 执行时是在全局环境中，this指向全局作用域
var f = obj.getX;
f(); // 9

// 创建一个新函数，将this绑定到对象 o 中
var f2 = obj.getX.bind(o);
f2(); // 81

接着上面【对象方法调用】里的几个丢失this的例子。如何用call()
、apply()或bind()来绑定this到指定的对象。

先看看这个例子：

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  console.log(this.x); // 1
}

var obj = {
  x: 1,
  foo: foo
};

// 使用call()或apply()
var fn1 = obj.foo;
fn1.call(obj);
//fn.apply(obj);

// 使用bind()
var fn2 = obj.foo.bind(obj);
fn2();

再看这个回调函数的例子：

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  console.log(this.x); // 1
}

var obj = {
  x: 1,
  foo: foo
};

// 自定义函数
function todoFn(cb) {
  cb.call(obj);
  // cb.apply(obj);
};

todoFn(obj.foo);

只需要在执行回调函数的时候使用call()或apply()将this绑定到obj对象即可。

最后看定时器的例子：

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  setTimeout(function(){
    console.log(this); // {x: 1, foo: ƒ}
  }.bind(this), 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

这里是使用了bind()方法，将上下文的this绑定到定时器里的匿名函数，它最终还是指向对象obj。

如果函数或者方法调用之前带有关键字new，它就构成构造函数调用。使用new来调用函数， 或者说发生构造函数调用时，会自动执行下面的操作。

创建（或者说构造） 一个全新的对象。

这个新对象会被执行 [[ 原型 ]] 连接。

这个新对象会绑定到函数调用的this。

如果函数没有返回其他对象， 那么new表达式中的函数调用会自动返回这个新对象。

来看一个例子：

function foo(x){
  this.x = x;
  console.log(this); // foo {x: 2}
}
var f = new foo(2); 
console.log(f.x); // 2

使用new来调用foo()时， 会构造一个新对象并把它绑定到foo()调用中的this上。即构造函数的this指向它实例化出来的对象。

箭头函数本身没有this，是根据外层（函数或者全局）作用域来决定this。

先来看一个例子：

var x = 1;
function testFn() {
  var fn1 = function() {
    console.log(this); // window
    console.log(this.x); // 1
  }
  var fn2 = () => {
    console.log(this); // window 
    console.log(this.x); // 1
  }
  fn1(); 
  fn2(); 
}
testFn();

两段代码输出的结果一致。但运行的机制不一样。

fn1是普通函数调用，前面说过普通函数调用this指向window；

fn2是箭头函数，它会继承外层函数testFn的this，而testFn是在全局作用域中运行的，所以它的this是window，因此fn2箭头函数的this也是window。

对上面对例子做一点改动：

var x = 1;
function testFn() {
  var fn1 = function() {
    console.log(this); // window
    console.log(this.x); // 1
  }
  var fn2 = () => {
    console.log(this); // {x: 2} 
    console.log(this.x); // 2
  }
  fn1(); 
  fn2(); 
}
testFn.call({ x: 2 });

改变了testFn的调用方式。

fn1依然是普通函数调用，this指向window；

fn2箭头函数依然是继承它外层函数testFn的this，但这里testFn通过call使this指向了对象{id: 2}，所以fn2的this也指向该对象。

接着上面【对象方法调用】里的setTimeout例子。如果使用箭头函数会怎样？

function foo() {
  console.log(this); // {x: 1, foo: ƒ}
  console.log(this.x); // 1
  setTimeout(() => {
    console.log(this); // {x: 1, foo: ƒ}
    console.log(this.x); // 1
  }, 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

这里定时器回调的this由它外层函数foo的作用域决定，而foo是由obj调用，所以它的this指向对象obj，所以定时器的this也指向对象obj。

另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

JavaScript的this取决于被调用的方式。

如果是普通函数调用方式。非严格模式下，this指向window，严格模式下，this是undefined；

如果是对象调用方式，this指向该对象；

如果是call()、apply()或bind()方式调用，this指向被绑定的对象；

如果是构造函数调用方式，this指向实例化出来的新对象；

如果是箭头函数，是根据当前的词法作用域来决定this， 具体来说，箭头函数会继承外层函数调用的this绑定。

原文地址：https://github.com/daijingfeng/blog/issues/2

参考资料：

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

2、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

3、http://es6.ruanyifeng.com/#docs/function#箭头函数

4、《JavaScript权威指南(第6版)(中文版)》

5、《你不知道的JavaScript（上卷）》