【我眼中的】 - 【6】this指向问题

重要的事情说三遍：this 永远指向最后调用它的那个对象、this 永远指向最后调用它的那个对象、this 永远指向最后调用它的那个对象。

1. this的六道坎

（偶然间读到一篇超级nice的博客，觉得比我之前写的棒多了，so，毫不犹豫的转载过来。👉博客原文）

this is all about context.

说白了this就是找大佬，找拥有当前上下文（context）的对象（context object）。
大佬可以分为六层，层数越高权力越大，this只会认最大的。

第一层：世界的尽头

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

function showThis () {
  console.log(this)
}

function showStrictThis () {
  'use strict'
  console.log(this)
}

showThis() // window
showStrictThis() // undefined

第二层：点石成金

第二层大佬说白了就是找这个函数前面的点.。

如果用到this的那个函数是属于某个 context object 的，那么这个 context object 绑定到this。

比如下面的例子，boss是returnThis的 context object ，或者说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() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?

答案是boss1和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

没错，只要让使用this的函数是属于boss2就行。

第三层：指腹为婚

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

function returnThis () {
  return this
}

var boss1 = { name: 'boss1' }

returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1

第四层：海誓山盟

第四层大佬是Object.prototype.bind，他不但通过一个新函数来提供永久的绑定，还会覆盖第三层大佬的命令【即：bind（）提供永久绑定，会覆盖call()和apply()】。

function returnThis () {
  return this
}

var boss1 = { name: 'boss1'}

var boss1returnThis = returnThis.bind(boss1)

boss1returnThis() // boss1

var boss2 = { name: 'boss2' }
boss1returnThis.call(boss2) // still boss1

第五层：内有乾坤

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

function showThis () {
  console.log(this)
}

showThis() // window
new showThis() // showThis

var boss1 = { name: 'boss1' }
showThis.call(boss1) // boss1
new showThis.call(boss1) // TypeError

var boss1showThis = showThis.bind(boss1)
boss1showThis() // boss1
new boss1showThis() // showThis

第六层：军令如山

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

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

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

function callback (cb) {
  cb()
}

callback(() => { console.log(this) }) // window

var boss1 = {
  name: 'boss1',
  callback: callback,
  callback2 () {
    callback(() => { console.log(this) })
  }
}

boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1

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

var returnThis = () => this

returnThis() // window
new returnThis() // TypeError

var boss1 = {
  name: 'boss1',
  returnThis () {
    var func = () => this
    return func()
  }
}

returnThis.call(boss1) // still window

var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // still window

boss1.returnThis() // boss1

var boss2 = {
  name: 'boss2',
  returnThis: boss1.returnThis
}

boss2.returnThis() // boss2

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

2.改变`this`指向的方法

ES6 的箭头函数
函数内部使用 _this = this
使用 apply、call、bind
new 实例化一个对象

⭐ 箭头函数
箭头函数的 this 始终指向函数定义时的 this，而非执行时。

箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }

};

a.func2()     // Cherry

⭐ 函数内部使用 _this = this

var name = "windowsName";

var a = {

    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        var _this = this;
        setTimeout( function() {
            _this.func1()
        },100);
    }

};

a.func2()       // Cherry

这个例子中，在 func2 中，首先设置 var _this = this;，这里的 this 是调用 func2 的对象 a，为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。我们将 this(指向变量 a) 赋值给一个变量 _this，这样，在 func2 中我们使用 _this 就是指向对象 a 了。