重新认识JS的this、作用域、闭包、对象

作者 | 相学长

原文 | https://github.com/wuomzfx/blog/blob/master/this.md

日常开发中&＃xff0c;我们经常用到this。例如用Jquery绑定事件时&＃xff0c;this指向触发事件的DOM元素&＃xff1b;编写Vue、React组件时&＃xff0c;this指向组件本身。对于新手来说&＃xff0c;常会用一种意会的感觉去判断this的指向。以至于当遇到复杂的函数调用时&＃xff0c;就分不清this的真正指向。

本文将通过两道题去慢慢分析this的指向问题&＃xff0c;并涉及到函数作用域与对象相关的点。最终给大家带来真正的理论分析&＃xff0c;而不是简简单单的一句话概括。

相信若是对this稍有研究的人&＃xff0c;都会搜到这句话&＃xff1a;this总是指向调用该函数的对象。

然而箭头函数并不是如此&＃xff0c;于是大家就会遇到如下各式说法&＃xff1a;

• 箭头函数的this指向外层函数作用域中的this。

• 箭头函数的this是定义函数时所在上下文中的this。

• 箭头函数体内的this对象&＃xff0c;就是定义时所在的对象&＃xff0c;而不是使用时所在的对象。

各式各样的说法都有&＃xff0c;乍看下感觉说的差不多。废话不多说&＃xff0c;凭着你之前的理解&＃xff0c;来先做一套题吧&＃xff08;非严格模式下&＃xff09;。

/** * Question 1 */
var name &＃61; &＃39;window&＃39;
var person1 &＃61; { name: &＃39;person1&＃39;, show1: function () { console.log(this.name) }, show2: () &＃61;> console.log(this.name), show3: function () { return function () { console.log(this.name) } }, show4: function () { return () &＃61;> console.log(this.name) }}var person2 &＃61; { name: &＃39;person2&＃39; }
person1.show1()person1.show1.call(person2)
person1.show2()person1.show2.call(person2)
person1.show3()()person1.show3().call(person2)person1.show3.call(person2)()
person1.show4()()person1.show4().call(person2)person1.show4.call(person2)()


大致意思就是&＃xff0c;有两个对象person1&＃xff0c;person2&＃xff0c;然后花式调用person1中的四个show方法&＃xff0c;预测真正的输出。

你可以先把自己预测的答案按顺序记在本子上&＃xff0c;然后再往下拉看正确答案。

正确答案选下&＃xff1a;

person1.show1() // person1person1.show1.call(person2) // person2
person1.show2() // windowperson1.show2.call(person2) // window
person1.show3()() // windowperson1.show3().call(person2) // person2person1.show3.call(person2)() // window
person1.show4()() // person1person1.show4().call(person2) // person1person1.show4.call(person2)() // person2


对比下你刚刚记下的答案&＃xff0c;是否有不一样呢&＃xff1f;让我们尝试来最开始那些理论来分析下。

person1.show1()与person1.show1.call(person2)好理解&＃xff0c;验证了谁调用此方法&＃xff0c;this就是指向谁。

person1.show2()与person1.show2.call(person2)的结果用上面的定义解释&＃xff0c;就开始让人不理解了。

它的执行结果说明this指向的是window。那就不是所谓的定义时所在的对象。

如果说是外层函数作用域中的this&＃xff0c;实际上并没有外层函数了&＃xff0c;外层就是全局环境了&＃xff0c;这个说法也不严谨。

只有定义函数时所在上下文中的this这句话算能描述现在这个情况。

person1.show3是一个高阶函数&＃xff0c;它返回了一个函数&＃xff0c;分步走的话&＃xff0c;应该是这样&＃xff1a;

var func &＃61; person3.show()func()


从而导致最终调用函数的执行环境是window&＃xff0c;但并不是window对象调用了它。所以说&＃xff0c;this总是指向调用该函数的对象&＃xff0c;这句话还得补充一句&＃xff1a;在全局函数中&＃xff0c;this等于window。

person1.show3().call(person2) 与 person1.show3.call(person2)() 也好理解了。前者是通过person2调用了最终的打印方法。后者是先通过person2调用了person1的高阶函数&＃xff0c;然后再在全局环境中执行了该打印方法。

person1.show4()()&＃xff0c;person1.show4().call(person2)都是打印person1。这好像又印证了那句&＃xff1a;箭头函数体内的this对象&＃xff0c;就是定义时所在的对象&＃xff0c;而不是使用时所在的对象。因为即使我用过person2去调用这个箭头函数&＃xff0c;它指向的还是person1。

然而person1.show4.call(person2)()的结果又是person2。this值又发生改变&＃xff0c;看来上述那句描述又走不通了。一步步来分析&＃xff0c;先通过person2执行了show4方法&＃xff0c;此时show4第一层函数的this指向的是person2。所以箭头函数输出了person2的name。也就是说&＃xff0c;箭头函数的this指向的是谁调用箭头函数的外层function&＃xff0c;箭头函数的this就是指向该对象&＃xff0c;如果箭头函数没有外层函数&＃xff0c;则指向window。这样去理解show2方法&＃xff0c;也解释的通。

这句话就对了么&＃xff1f;在我们学习的过程中&＃xff0c;我们总是想以总结规律的方法去总结结论&＃xff0c;并且希望结论越简单越容易描述就越好。实际上可能会错失真理。

下面我们再做另外一个相似的题目&＃xff0c;通过构造函数来创建一个对象&＃xff0c;并执行相同的4个show 方法。

/** * Question 2 */var name &＃61; &＃39;window&＃39;
function Person (name) { this.name &＃61; name; this.show1 &＃61; function () { console.log(this.name) } this.show2 &＃61; () &＃61;> console.log(this.name) this.show3 &＃61; function () { return function () { console.log(this.name) } } this.show4 &＃61; function () { return () &＃61;> console.log(this.name) }}
var personA &＃61; new Person(&＃39;personA&＃39;)var personB &＃61; new Person(&＃39;personB&＃39;)
personA.show1()personA.show1.call(personB)
personA.show2()personA.show2.call(personB)
personA.show3()()personA.show3().call(personB)personA.show3.call(personB)()
personA.show4()()personA.show4().call(personB)personA.show4.call(personB)()


同样的&＃xff0c;按照之前的理解&＃xff0c;再次预计打印结果&＃xff0c;把答案记下来&＃xff0c;再往下拉看正确答案。

正确答案选下&＃xff1a;

personA.show1() // personApersonA.show1.call(personB) // personB
personA.show2() // personApersonA.show2.call(personB) // personA
personA.show3()() // windowpersonA.show3().call(personB) // personBpersonA.show3.call(personB)() // window
personA.show4()() // personApersonA.show4().call(personB) // personApersonA.show4.call(personB)() // personB


我们发现与之前字面量声明的相比&＃xff0c;show2方法的输出产生了不一样的结果。为什么呢&＃xff1f;虽然说构造方法Person是有自己的函数作用域。但是对于person1来说&＃xff0c;它只是一个对象&＃xff0c;在直观感受上&＃xff0c;它跟第一道题中的person1应该是一模一样的。JSON.stringify(new Person(&＃39;person1&＃39;)) &＃61;&＃61;&＃61; JSON.stringify(person1)也证明了这一点。

说明构造函数创建对象与直接用字面量的形式去创建对象&＃xff0c;它是不同的&＃xff0c;构造函数创建对象&＃xff0c;具体做了什么事呢&＃xff1f;我引用红宝书中的一段话。

使用 new 操作符调用构造函数&＃xff0c;实际上会经历一下4个步骤&＃xff1a;

• 创建一个新对象&＃xff1b;

• 将构造函数的作用域赋给新对象&＃xff08;因此this就指向了这个新对象&＃xff09;&＃xff1b;

• 执行构造函数中的代码&＃xff08;为这个新对象添加属性&＃xff09;&＃xff1b;

• 返回新对象。

所以与字面量创建对象相比&＃xff0c;很大一个区别是它多了构造函数的作用域。我们用chrome查看这两者的作用域链就能清晰的知道:

personA的函数的作用域链从构造函数产生的闭包开始&＃xff0c;而person1的函数作用域仅是global&＃xff0c;于是导致this指向的不同。我们发现&＃xff0c;要想真正理解this&＃xff0c;先得知道到底什么是作用域&＃xff0c;什么是闭包。

有简单的说法称闭包就是能够读取其他函数内部变量的函数。然而这是一种闭包现象的描述&＃xff0c;而不是它的本质与形成的原因。

我再次引用红宝书的文字&＃xff08;便于理解&＃xff0c;文字顺序稍微调整&＃xff09;&＃xff0c;来描述这几个点&＃xff1a;

...每个函数都有自己的执行环境&＃xff08;execution context&＃xff0c;也叫执行上下文&＃xff09;&＃xff0c;每个执行环境都有一个与之关联的变量对象&＃xff0c;环境中定义的所有变量和函数都保存在这个对象中。

...当执行流进入一个函数时&＃xff0c;函数的环境就会被推入一个环境栈中。当代码在环境中执行时&＃xff0c;会创建一个作用域链&＃xff0c;来保证对执行环境中的所有变量和函数的有序访问。函数执行之后&＃xff0c;栈将环境弹出。

...函数内部定义的函数会将包含函数的活动对象添加到它的作用域链中。

具体来说&＃xff0c;当我们 var func &＃61; personA.show3() 时&＃xff0c;personA的show3函数的活动对象&＃xff0c;会一直保存在func的作用域链中。只要不销毁func&＃xff0c;那么show3函数的活动对象就会一直保存在内存中。&＃xff08;chrome的v8引擎对闭包的开销会有优化&＃xff09;

而构造函数同样也是闭包的机制&＃xff0c;personA的show1方法&＃xff0c;是构造函数的内部函数&＃xff0c;因此执行了 this.show3 &＃61; function () { console.log(this.name) }时&＃xff0c;已经把构造函数的活动对象推到了show3函数的作用域链中。

我们再回到this的指向问题。我们发现&＃xff0c;单单是总结规律&＃xff0c;或者用一句话概括&＃xff0c;已经难以正确解释它到底指向谁了&＃xff0c;我们得追本溯源。

红宝书中说道&＃xff1a;

...this引用的是函数执行的环境对象&＃xff08;便于理解&＃xff0c;贴上英文原版&＃xff1a;It is a reference to the context object that the function is operating on&＃xff09;。...每个函数被调用时都会自动获取两个特殊变量&＃xff1a;this和arguments。内部在搜索这个两个变量时&＃xff0c;只会搜索到其活动对象为止&＃xff0c;永远不可能直接访问外部函数中的这两个变量。

我们看下MDN中箭头函数的概念&＃xff1a;

一个箭头函数表达式的语法比一个函数表达式更短&＃xff0c;并且不绑定自己的 this&＃xff0c;arguments&＃xff0c;super或 new.target。...箭头函数会捕获其所在上下文的 this 值&＃xff0c;作为自己的 this 值。

也就是说&＃xff0c;普通情况下&＃xff0c;this指向调用函数时的对象。在全局执行时&＃xff0c;则是全局对象。

箭头函数的this&＃xff0c;因为没有自身的this&＃xff0c;所以this只能根据作用域链往上层查找&＃xff0c;直到找到一个绑定了this的函数作用域&＃xff08;即最靠近箭头函数的普通函数作用域&＃xff0c;或者全局环境&＃xff09;&＃xff0c;并指向调用该普通函数的对象。

或者从现象来描述的话&＃xff0c;即箭头函数的this指向声明函数时&＃xff0c;最靠近箭头函数的普通函数的this。但这个this也会因为调用该普通函数时环境的不同而发生变化。导致这个现象的原因是这个普通函数会产生一个闭包&＃xff0c;将它的变量对象保存在箭头函数的作用域中。

故而personA的show2方法因为构造函数闭包的关系&＃xff0c;指向了构造函数作用域内的this。而

var func &＃61; personA.show4.call(personB)
func() // print personB


因为personB调用了personA的show4&＃xff0c;使得返回函数func的作用域的this绑定为personB&＃xff0c;进而调用func时&＃xff0c;箭头函数通过作用域找到的第一个明确的this为personB。进而输出personB。

讲了这么多&＃xff0c;可能还是有点绕。总之&＃xff0c;想充分理解this的前提&＃xff0c;必须得先明白js的执行环境、闭包、作用域、构造函数等基础知识。然后才能得出清晰的结论。

我们平常在学习过程中&＃xff0c;难免会更倾向于根据经验去推导结论&＃xff0c;或者直接去找一些通俗易懂的描述性语句。然而实际上可能并不是最正确的结果。如果想真正掌握它&＃xff0c;我们就应该追本溯源的去研究它的内部机制。

我上述所说也是我自己推导出的结果&＃xff0c;即使它不一定正确&＃xff0c;但这个推断思路跟学习过程&＃xff0c;我觉得可以跟大家分享分享。