JavaScript中this指向规则详解

this绑定机制概述

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

这句话的核心含义是：谁调用了函数，this就指向谁。

具体而言，通常存在以下几种情况：

全局函数中的this

全局函数

在全局环境中，this指向Window。

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

上述示例较为简单：函数A在全局环境中执行，即由全局对象Window调用该函数。此时this指向Window。

对象方法中的this

对象方法

当作为对象方法调用时，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的显式绑定

call和apply

此时this通常指向函数中指定的this值（注意这里的“通常”二字，考试要考的）。

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。

箭头函数的this特性

箭头函数

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。

最后，若内容有误欢迎指出；若对你有帮助，欢迎点赞和收藏，感谢你对本站的支持。