【面向JS--this】

前言

JS中的 this 和原型链、闭包一样，是谈及最多的问题，网上找这类的材料能找一大堆。

this 本身原本很简单，它不能脱离 类/对象 来说，也就是说 this 是面向对象语言里常见的一个关键字，它不能赋值，总是指向类的当前实例。

this说白了就是找大佬，找拥有当前上下文（context）的对象（context object）。

大佬可以分为六层，层数越高权力越大，this只会认最大的。

第一层：世界尽头

权力最小的大佬是作为备胎的存在，在普通情况下就是全局，浏览器里就是window；在use strict的情况下就是undefined。

function showThis () {  console.log(this)}function showStrictThis () {  'use strict'  console.log(this)}showThis() // windowshowStrictThis() // undefined

注意：所有无主的对象及函数，它的指向都是window

第二层：点石成金

第二层大佬说白了就是找这个函数前面的点”.”(通过点语法来调用方法)。

如果用到this的那个函数是属于某个上下文对象的，那么这个上下文对象绑定到this。

比如下面的例子，boss是returnThis的上下文对象，或者说returnThis属于boss。

var boss = {  name: 'boss',  returnThis () {    return this  }}boss.returnThis() === boss // true

加深：

var boss1 = {  name: 'boss1',  returnThis () {    return this  }}var boss2 = {  name: 'boss2',  returnThis () {    return boss1.returnThis()  }}var boss3 = {  name: 'boss3',  returnThis () {    var returnThis = boss1.returnThis    return returnThis()  }}boss1.returnThis() // boss1boss2.returnThis() // boss1boss3.returnThis() // window

只要看使用this的那个函数。

在boss2.returnThis里，使用this的函数是boss1.returnThis，所以this绑定到boss1；

在boss3.returnThis里，使用this的函数是returnThis，所以this绑定到备胎。

要想把this绑定到boss2怎么做呢？

var boss1 = {  name: 'boss1',  returnThis () {    return this  }}var boss2 = {  name: 'boss2',  returnThis: boss1.returnThis}boss2.returnThis() //boss2// 在这里可能还是会有人蒙，感觉和上面的差不多，这里我们要进入一个概念，一个函数如果return something后，它就和原来的函数没有关系了// 所以上面的boss2.returnThis()因为最终是return boss1.returnThis(),所以它的this是boss1

第三层：指腹为婚

第三层大佬是Object.prototype.call和Object.prototype.apply，它们可以通过参数指定this。（注意this是不可以直接赋值的，this = 2会报ReferenceError。）

function returnThis () {  return this}var boss1 = { name: 'boss1' }returnThis() // windowreturnThis.call(boss1) // boss1returnThis.apply(boss1) // boss1

第四层：海誓山盟

第四层大佬是Object.prototype.bind，他不但通过一个新函数来提供永久的绑定，还会覆盖第三层大佬的命令。

function returnThis () {  return this}var boss1 = { name: 'boss1'}var boss1returnThis = returnThis.bind(boss1)boss1returnThis() // boss1var boss2 = { name: 'boss2' }boss1returnThis.call(boss2) // still boss1

第五层：内有乾坤

一个比较容易忽略的会绑定this的地方就是new。当我们new一个函数时，就会自动把this绑定在新对象上，然后再调用这个函数。它会覆盖bind的绑定。

function showThis () {  console.log(this)}showThis() // windownew showThis() // showThisvar boss1 = { name: 'boss1' }showThis.call(boss1) // boss1new showThis.call(boss1) // TypeErrorvar boss1showThis = showThis.bind(boss1)boss1showThis() // boss1new boss1showThis() // showThis

第六层：军令如山

最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的this不再妖艳，被永远封印到当前词法作用域之中，称作 Lexical this ，在代码运行前就可以确定。没有其他大佬可以覆盖。

这样的好处就是方便让回调函数的this使用当前的作用域，不怕引起混淆。

所以对于箭头函数，只要看它在哪里创建的就行。

function callback (cb) {  cb()}callback(() => { console.log(this) }) // windowvar boss1 = {  name: 'boss1',  callback: callback,  callback2 () {    callback(() => { console.log(this) })  }}boss1.callback(() => { console.log(this) }) // still windowboss1.callback2(() => { console.log(this) }) // boss1

下面这种奇葩的使用方式就需要注意：

var returnThis = () => thisreturnThis() // windownew returnThis() // TypeErrorvar boss1 = {  name: 'boss1',  returnThis () {    var func = () => this    return func()  }}returnThis.call(boss1) // still windowvar boss1returnThis = returnThis.bind(boss1)boss1returnThis() // still windowboss1.returnThis() // boss1var boss2 = {  name: 'boss2',  returnThis: boss1.returnThis}boss2.returnThis() // boss2

如果你不知道最后为什么会是 boss2，继续理解“对于箭头函数，只要看它在哪里创建”这句话。

本文摘抄自 JavaScript This 的六道坎