JavaScript中this关键字的使用

this的值通常是由所在函数的执行环境决定,也就是说要看函数是如何被调用的;同一个函数每一次调用,this都可能指向不同的对象。

全局对象 (Global Object)

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

console.log(this):

看看输出:

JavaScript中this关键字的使用

window对象在全局作用域下,this指向全局对象。在浏览器中全局对象就是window对象。为什么this会指向window对象,来看另外一个例子:

var myName = 'Brandon';可以通过在控制台输入myName来访问其值:

JavaScript中this关键字的使用

this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部,默认指向全局window对象。注意:如果在strcit模式下,上面的例子中this为undefined。

声明的对象 (Declared Object)

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

JavaScript中this关键字的使用

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

为了更好的描述this实际上是指向person对象的,可以拷贝如下代码到浏览器控制台,将this打印出来。

JavaScript中this关键字的使用

new关键字

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

JavaScript中this关键字的使用

all, bind, 和apply

可以显示的在call(),bind(),apply()中设置this的绑定对象。这三个函数很类似,需要注意它们微小的区别。

<!-- call可以接收任意个数的参数,其中第一个必须是一个this对象,其余依次是所有的参数。 -->

来看一个例子:

JavaScript中this关键字的使用

bind()函数和call()类似,但是bind()函数不会立即被调用。bind()函数会返回一个函数,并且将this绑定好。用例子来帮助理解bind()函数的应用场景:

JavaScript中this关键字的使用