[聚合文章] 解析js中的this对象

前言

（几天之前写了源码分析之后，感觉太疲惫了，写一些相对轻巧的内容调剂一下，希望喜欢的同学可以点个赞和收藏~）

进入正题，this对象在js中是很常见，但是在这里也经常会出错，本文将对常见的this对象的情况做一些总结

正文

this 对象是在函数 运行 时，基于函数的执行环境绑定的。

其实这句话的本质就是，谁调用了函数， this 就指向谁

具体的来说，通常有以下几种情况：

全局函数

在全局环境中，this指向Window

//例子1
  function A() {
    console.log(this)
  }
  A();//Window

上面的例子很简单，函数A在全局环境中执行，也就是全局对象 Window 调用了函数。此时this指向 Window

对象方法

作为对象方法调用时，this指向调用该方法的对象

//例子2
var  b = {
    getThis:function(){
        console.log(this)
    }
}
b.getThis()//b

到这里我们举的例子都比较简单易懂，接下来来一个有意思的：

//例子3
  var c = {
    getFunc:function(){
      return function(){
        console.log(this)
      }
    }
  }
  var cFun = c.getFunc()
  cFun()//Window

这个例子和前一个例子不一样，运行 c.getFunc() 时，首先返回的是一个匿名函数，我们将这个函数赋值给 cFun ，接着在 全局环境 中调用了 cFun() ，所以此时 this 指向的还是 Window 。

如果我们一定要让这里返回的是 c 对象呢？在开头我们说过， this 对象是在函数 执行 时确定的，在例子3中，执行 c.getFunc() 时， this 对象指向的还是c，所以我们只要保持住这个 this 就好了,对上面的代码稍微改动：

//例子4
  var c = {
    getFunc:function(){
        var that = this //在这里保留住this
      return function(){
        console.log(that)
      }
    }
  }
  var cFun = c.getFunc()
  cFun()//c

这也就是我们经常可以在一些代码中看到 var self = this 或者 var that = this 之类的原因了。

call和apply

此时this对象通常指向函数中指定的this值(注意这里的通常2字，考试要考的)

call 和 apply 算是老生常谈，但还是稍微介绍下，怕新同学可能没接触过（其实是为了凑点字数），拿 call 来说，语法是这样的

fun.call(thisArg, arg1, arg2, ...)

这个方法怎么用呢，看下面的例子：

//例子5
var d = {
    getThis:function(){
        console.log(this)
    }
}
var e = {
   name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

在这里我们就可以看出call函数的意思了:指定一个对象 o1 去调用其他对象 o2 的方法，此时 this 对象指向 o1

好了，那为什么前面我们说 通常 呢？因为，这里的 thisArg 是可以指定为 null 和 undefined 的。请看：

//例子6
var d = {
    getThis:function(){
        console.log(this)
    }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此时的 this 指向全局对象 Window

箭头函数

es6中的箭头函数现在也用的比较频繁，但是有个需要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种情况的根本原因是: 箭头函数没有this对象，所以箭头函数的this就是外层代码的this

//例子7
  var f = {
      getThis:()=>{
          console.log(this)
      }
  }
  f.getThis()//Window

这个例子和前面例子2是基本一样的，只是把普通函数改写成箭头函数，但是此时的this对象已经指向了外层的 Window 。

考虑到这一点可能不好理解，我们再看几个例子:

//例子8
  var g = {
    getThis:function(){
      return function(){console.log(this)}
    }
  }
  var h = {
    getThis:function(){
      return ()=> console.log(this)
    }
  }
  g.getThis()()//Window
  h.getThis()()//h

这个例子里，g的 getThis 写法就和之前的例子3一样，由于函数在全局环境中 运行 ，所以此时 this 指向 Window ；h的 getThis 使用了箭头函数，所以this指向了 外层代码块的this 所以，此时 this 指向的是h。

总结

小结一下，

• 一般情况下 this 对象指向调用函数的对象，全局环境中执行函数 this 对象指向 Window
• 在 call和apply 函数中 this 指向指定的对象，如果指定的对为 undefined 或者 null ，那么 this 对象指向 Window
• 在箭头函数中， this 对象等同于外层代码块的 this

然后依然是每次都一样的结尾， 如果内容有错误的地方欢迎指出；如果对你有帮助，欢迎点赞和收藏，转载请征得同意后著明出处，如果有问题也欢迎私信交流，主页添加了邮箱地址~溜了