JavaScript初学者必看“this”

译者按: JavaScript的this和Java等面向对象语言中的this大不同，bind()、call()和apply()函数更是将this的灵活度进一步延伸。

原文: JavaScript: The Keyword ‘This’ for Beginners

译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。

若是对JavaScript的关键字this理解不够深入，有时候会掉入意想不到的坑。在这里咱们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括全部的状况，但平常大部分状况均可以使用这些规则来正确推断。

1. this的值一般是由所在函数的执行环境决定，也就是说要看函数是如何被调用的；
2. 同一个函数每一次调用，this均可能指向不一样的对象;

全局对象 (Global Object)

打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J)，而且输入:

console.log(this);

看看输出了什么？

// Window {}

window对象！ 由于在全局做用域下，this指向全局对象。在浏览器中全局对象就是window对象。 为了让你更加清楚理解为何this会指向window对象，咱们来看另一个例子：

var myName = 'Brandon';

咱们能够经过在控制台输入myName来访问其值：

myName
// 输出 'Brandon'

其实，全部在全局定义的变量都绑定到window对象。咱们来作以下测试：

window.myName
// 输出 'Brandon'
window.myName === myName
// 输出 true

如今咱们将this放到函数内部，看看有何效果。

function test(){
  return this;
}
test();

你会发现this依然指向全局的window对象。由于this关键字没有处于一个声明的对象内部，默认指向全局window对象。这一点可能对于大部分初学者来讲有点难以理解。当读完这篇文章，你就会豁然开朗。 注意：若是在strcit模式下，上面的例子中this为undefined。

声明的对象 (Declared Object)

当this关键字在一个声明对象内部使用，其值会被绑定到调用该this的函数的最近的父对象。咱们用例子来讲明这个问题：

var person = {
  first: 'John',
  last: 'Smith',  
  full: function() {
    console.log(this.first + ' ' + this.last);
  }
};
person.full();
// 输出 'John Smith'

在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 所以，this指向person。

为了更好的描述this其实是指向person对象的，你能够拷贝以下代码到浏览器控制台，将this打印出来。

var person = {
  first: 'John',
  last: 'Smith',  
  full: function() {
    console.log(this);
  }
};
person.full();
// 输出 Object {first: "John", last: "Smith", full: function}

咱们接下来看一个更复杂的例子：

var person = {
  first: 'John',
  last: 'Smith',
  full: function() {
    console.log(this.first + ' ' + this.last);
  },
  personTwo: {
    first: 'Allison',
    last: 'Jones',
    full: function() {
      console.log(this.first + ' ' + this.last);
    }
  }
};

在这里咱们有嵌套的对象，在这个时候，this分别指向谁呢？ 咱们将其打印出来看一看：

person.full();
// 输出 'John Smith'
person.personTwo.full();
// 输出 'Allison Jones'

你会发现知足咱们前面所描述的规则：其值会被绑定到调用this的函数的最近的父对象。

new关键字

当使用new关键字构建一个新的对象，this会绑定到这个新对象。咱们来看一个例子：

function Car(make, model) {
  this.make = make;
  this.model = model;
};

根据第一条规则，你可能会推断this指向全局对象。可是若是咱们使用new关键字来声明一个新的变量，Car函数中的this将会绑定一个新的空对象，而后初始化this.make和this.model的值。

var myCar = new Car('Ford', 'Escape');
console.log(myCar);
// 输出 Car {make: "Ford", model: "Escape"}

call, bind, 和apply

咱们能够显示的在call()，bind()，apply()中设置this的绑定对象。这三个函数很相似，可是咱们须要注意它们微小的区别。

<!-- `call`能够接收任意个数的参数，其中第一个必须是一个`this`对象，其他依次是全部的参数。 -->

咱们来看一个例子：

function add(c, d) {
  console.log(this.a + this.b + c + d);
}
add(3,4);
// 输出 NaN

add函数输出NaN, 由于this.a和this.b未定义。

如今咱们引入对象，而且使用call()和apply()来调用：

function add(c, d) {
  console.log(this.a + this.b + c + d);
}
var ten = {a: 1, b: 2};
add.call(ten, 3, 4);
// 输出 10
add.apply(ten, [3,4]);
// 输出 10

当咱们使用add.call()，第一个参数是this须要绑定的对象，剩下的是add函数原本的参数。 所以，this.a指向ten.a,this.b指向ten.b。add.apply()也相似，除了第二个参数是一个数组，用于存储add函数的参数。

bind()函数和call()相似，可是bind()函数不会当即被调用。bind()函数会返回一个函数，而且将this绑定好。接下来咱们来用例子来帮助理解bind()函数的应用场景：

var small = {
  a: 1,
  go: function(b,c,d){
    console.log(this.a+b+c+d);
  }
}
var large = {
  a: 100
}

执行:

small.go(2, 3, 4);
// 输出 10

若是咱们想使用large.a的值，而不是small.a呢？ 咱们可使用call/apply:

small.go.call(large, 2, 3, 4);
// 输出 109

可是，若是咱们如今还不知道这三个参数应该传入什么值，应该怎么办呢？ 咱们可使用bind:

var bindTest = small.go.bind(large, 2);

若是咱们将bindTest在控制台下打印出来，咱们会看到：

console.log(bindTest);
// 输出 function (b,c,d){console.log(this.a+b+c+d);}

注意：该函数已经将this绑定到large对象，而且传入了第一个参数b。因此，咱们接下来是须要传入余下的参数便可：

bindTest(3, 4);
// 输出 109

箭头函数(=>)

由于须要很大的篇幅，咱们会专门写一篇博客来介绍。

结论

当你读完这篇博客，你应该能够理解大多数状况下this指向的对象。 接下来咱们来总结一下：

1. this的值一般是由当前函数的执行环境所决定；
2. 在全局做用域，this指向全局对象 (window对象)；
3. 当使用new关键字声明，this指向新建对象；
4. 咱们可使用call(), bind(), apply()来设置this；
5. 箭头函数不会绑定this。

欢迎加入咱们Fundebug的全栈BUG监控交流群: 622902485。

版权声明:

转载时请注明做者Fundebug以及本文地址：

https://blog.fundebug.com/2017/05/17/javascript-this-for-beginners/