JavaScript中this的指向取决于function被谁调用,而不取决于其定义。

示例一

function fn() {    console.log(this)}fn()

上例中,fn是被全局对象调用,所以this指向全局对象。

示例二

const obj = {    foo: function () {        console.log(this)    }}let fn = obj.foofn()obj.foo()

上例中,fn办法指向obj.foo,因为fn办法被全局对象调用,因而this指向全局对象。而间接调用obj.foo(),此时foo办法被obj调用,因而this指向obj。

示例三

function Foo() {    console.log(this)}const f = new Foo()

上例中,Function Foo被当作构造函数进行了实力化,此时this指向实力化对象f。
ES2015中的class关键字是一种语法糖,其本质还是申明一个构造函数,因而其外部this指向可参考构造函数。

示例四

function foo() {    return () => {        console.log(this)    }}foo()()

箭头函数尽管也是一种函数,然而其不扭转外部this指向,也就是说在查找箭头函数外部this指向时,查找的仍然是包裹它的function的调用者。在上例中,foo函数返回的函数是被全局对象调用,因而this指向全局对象。

基于下面的四个例子,能够总结出在JavaScript中查找this的步骤为:

  • 沿着作用域链由外向外查找查找最近的function(箭头函数不是function),看这个function最终被谁调用。
  1. 被全局对象调用(作为函数调用),如foo(), this指向全局对象。
  2. 被其余对象调用(作为办法调用),如foo.bar(),this指向最终调用这个办法的对象。
  3. 被当作结构函数调用,如new Person,this指向新生成的实力化对象。
  4. 非凡调用,如fn.call, fn.apply, fn.bind,此时this指向调用时传入的参数。
  • 如果找不到function,this就指向全局对象。

this指向的全局对象是什么?

在下面提到很屡次this指向全局对象,那这个全局对象到底是什么?

浏览器环境下

  • 非严格模式下,全局对象为window。
  • 严格模式下,全局对象为undefined。

node环境下

如果在命令行中通过node *.js 执行时,分为上面两种状况。

  • 如果this没有在任何函数作用域中
if (true) {    console.log(this)}console.log(this)// trueconsole.log(this === module.exports)

在上例中,this指向{}。
因为nodejs为保障文件的模块作用域,在执行文件代码时,会为所有的文件代码增加一个包裹函数,下面的执行相似于:

// exports 指向module.exportsfunction wrapped(exports) {    if (true) {        console.log(this)    }    console.log(this)}wrapped()

因而this会指向{}。

  • 如果this处在函数作用域中,this指向调用者。
function fn() {    console.log(this)}fn()

在上例中,fn是全局对象调用,而node环境中,全局对象是Global,因而this指向Global。