JavaScript笔记：关于this

╰+哭是因爲堅強的太久メ 2022-07-16 08:11 139阅读 0赞

this 关键字是 JavaScript 中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。但是即使是非常有经验的 JavaScript 开发者也很难说清它到底指向什么。

实际上，JavaScript 中 this 的机制并没有那么先进，但是开发者往往会把理解过程复杂化，毫无疑问，在缺乏清晰认识的情况下，this 对你来说完全就是一种魔法。

## 1、为什么要用this ##

这段代码可以在不同的上下文对象(me 和 you)中重复使用函数 identify() 和 speak()， 不用针对每个对象编写不同版本的函数。

this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计得更加简洁并且易于复用。

因为，随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this 则不会这样。当我们介绍对象和原型时，你就会明白函数可以自动引用合适的上下文对象有多重要。

## 关于this的误解 ##

**1、指向自身**

人们很容易把 this 理解成指向函数自身。

JavaScript 的新手开发者通常会认为，既然函数看作一个对象(JavaScript 中的所有函数都 是对象)，那就可以在调用函数时存储状态(属性的值)。这是可行的，有些时候也确实有用，但是在本书即将介绍的许多模式中你会发现，除了函数对象还有许多更合适存储状态的地方。

不过现在我们先来分析一下这个模式，让大家看到 this 并不像我们所想的那样指向函数本身。

console.log 语句产生了 4 条输出，证明 foo(..) 确实被调用了 4 次，但是 foo.count 仍然是 0。

显然从字面意思来理解 this 是错误的。

执行`foo.count = 0`时，的确向函数对象foo添加了一个属性count。但是函数内部代码 this.count 中的 this 并不是指向那个函数对象，所以虽然属性名相同，根对象却并不相同。

负责的开发者一定会问“如果我增加的 count 属性和预期的不一样，那我增加的是哪个 count ?”

实际上，如果他深入探索的话，就会发现这段代码在无意中创建了一个全局变量 count，它的值为 NaN。

如果要从函数对象内部引用它自身，那只使用 this 是不够的。一般来说你需要通过一个指向函数对象的词法标识符(变量)来引用它。

function foo() { 
        foo.count = 4; // foo指向它自身
    }
    setTimeout( function(){ 
        // 匿名(没有名字的)函数无法指向自身
    }, 10 );

还有一种传统的但是现在已经被弃用和批判的用法，是使用 arguments. callee 来引用当前正在运行的函数对象。这是唯一一种可以从匿名函数对象内部引用自身的方法。然而，更好的方式是避免使用匿名函数，至少在需要自引用时使用具名函数(表达式)。arguments.callee 已经被弃用，不应该再使用它。

这一节第一段代码的解决方法是，强制 this 指向 foo 函数对象：

**它的作用域**

第二种常见的误解是，this 指向函数的作用域。  
这个问题有点复杂，因为在某种情况下它是正确的，但是在其他情况下它却是错误的。

需要明确的是，this 在任何情况下都不指向函数的词法作用域。  
在 JavaScript 内部，作用域确实和对象类似，可见的标识符都是它的属性。但是作用域“对象”无法通过 JavaScript 代码访问，它存在于 JavaScript 引擎内部。

## this到底是什么 ##

排除了一些错误理解之后，我们来看看 this 到底是一种什么样的机制。

之前我们说过 *this 是在运行时进行绑定的，并不是在编写时绑定*，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

在下一章我们会学习如何寻找函数的调用位置，从而判断函数在执行过程中会如何绑定 this。