JavaScript初学者必看“this”

译者按: JavaScript的

this

和Java等面向对象语言中的

this

大不一样，

bind()

、

call()

和

apply()

函数更是将

this

的灵活度进一步延伸。

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

译者: Fundebug

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

如果对JavaScript的关键字

this

理解不够深刻，有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断

this

到底指向什么。虽然没有囊括所有的情况，但日常大部分情况都可以使用这些规则来正确推断。

this

的值通常是由所在函数的执行环境决定，也就是说要看函数是如何被调用的；

同一个函数每一次调用，

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

指向的对象。
接下来我们来总结一下：

this

的值通常是由当前函数的执行环境所决定；

在全局作用域，

this

指向全局对象 (

window

对象)；

当使用

new

关键字声明，

this

指向新建对象；

我们可以使用

call()

,

bind()

,

apply()

来设置

this

；

箭头函数不会绑定

this

。

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



版权声明:

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

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