摘要：的五種不同情形默認(rèn)情況在默認(rèn)的，純粹的函數(shù)調(diào)用時(shí)，視作全局性調(diào)用，此時(shí)的指向全局對(duì)象，在瀏覽器環(huán)境下，也即對(duì)象。構(gòu)造函數(shù)當(dāng)一個(gè)函數(shù)被當(dāng)做構(gòu)造函數(shù)，用關(guān)鍵字新建一個(gè)對(duì)象的時(shí)候，這個(gè)函數(shù)內(nèi)部的以及原型鏈上的都會(huì)指向這個(gè)新建的對(duì)象。

在默認(rèn)的，純粹的函數(shù)調(diào)用時(shí)，視作全局性調(diào)用，此時(shí)的this指向全局對(duì)象Global，在瀏覽器環(huán)境下，也即window對(duì)象。

window.x = "Jackie"

function func() {
  console.log(this.x)
}

func() // Jackie

在嚴(yán)格模式（"use strict"）下，會(huì)禁止this指向全局對(duì)象，此時(shí)的this會(huì)是undefined。

此時(shí)this指向調(diào)用這個(gè)方法的對(duì)象。

var x = "Property of Window"

var obj = {}
obj.x = "Property of obj"
obj.f = function () {
    console.log(this.x)
}

obj.f() // Property of obj

// 值得注意的情況
var f = obj.f
f() // Property of Window

call、apply和bind都可以改變一個(gè)函數(shù)的this指向。

call和apply會(huì)將它們的調(diào)用對(duì)象的this指向它們的第一個(gè)參數(shù)。

function f () {
  console.log(this.x)
}

var x = "Property of Window"

var obj = {
  x: "Property of obj"
}

f.apply(obj)     // "Property of obj"

當(dāng)傳入的第一個(gè)參數(shù)為undefined，或者不傳入?yún)?shù)時(shí)，在非嚴(yán)格模式下，自動(dòng)會(huì)將this指向全局對(duì)象Global，在瀏覽器里是window對(duì)象，嚴(yán)格模式下則會(huì)是undefined：

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

f.apply()             // window
f.apply(undefined)     // window

function ff () {
  "use strict"
  console.log(this)
}
ff.apply()             // undefined
ff.apply(undefined) // undefined

call和apply沒(méi)有本質(zhì)區(qū)別。唯一的區(qū)別在于：

call()方法接受的是若干個(gè)參數(shù)的列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

bind和前面兩者也并未有什么本質(zhì)的區(qū)別，只不過(guò)bind將第一個(gè)參數(shù)綁定當(dāng)調(diào)用函數(shù)的this上，并將這個(gè)函數(shù)返回（不執(zhí)行）。

function f () {
  console.log(this.x)
}

var x = "Property of Window"

var obj = {
  x: "Property of obj"
}

var ff = f.bind(obj)
ff() // "Property of obj"

當(dāng)一個(gè)函數(shù)被當(dāng)做構(gòu)造函數(shù)，用new關(guān)鍵字新建一個(gè)對(duì)象的時(shí)候，這個(gè)函數(shù)內(nèi)部的this以及原型鏈上的this都會(huì)指向這個(gè)新建的對(duì)象。

function Jackie(para) {
  this.para = para
  console.log(this)
}
Jackie.prototype.log = function(){
  console.log(this)
}

Jackie("hehe")                 // Window
var p = new Jackie("haha")     // Jackie {para: "haha"}
p.log()                     // Jackie {para: "haha"}

JavaScript中超時(shí)調(diào)用的代碼都是在全局作用域中執(zhí)行的，因此函數(shù)中this的值會(huì)指向window對(duì)象，在嚴(yán)格模式下也一樣。因?yàn)槌瑫r(shí)調(diào)用的代碼都會(huì)有一個(gè)隱式綁定：setTimeout(f, time) == setTimeout(f.bind(window), time)。

"use stric"
var x = "Property of Window"

var obj = {}
obj.x = "Property of obj"
obj.ff = function () {
    setTimeout(
        function () {
            console.log(this.x)
        }, 100)
}

obj.ff()     // Property of Window

// 可以這么解決問(wèn)題
obj.fff = function () {
    var that = this
    setTimeout(
        function () {
            console.log(that.x)
        }, 100)
}
obj.fff()     // Property of obj

事件監(jiān)聽(tīng)函數(shù)中的this指向監(jiān)聽(tīng)對(duì)象。

var one = document.getElementById("one")
one.onclick = function () {
  console.log(this)
};

one.click() // 

箭頭函數(shù)中this的指向，在函數(shù)定義時(shí)即綁定完畢，且后續(xù)無(wú)法更改。

var obj = {
  x: 1
}

var f1 = () => {
  console.log(this)
}
f1.apply(obj) // Window

var f2 = function () {
  var f3 = () => {
    console.log(this)
  }
  return f3
}

var f4 = f2.apply(obj)
f4() // Object {x: 1}

一個(gè)更神奇的例子，超時(shí)調(diào)用的代碼在定義時(shí)，綁定了this的指向。

function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 }); // id: 42

var obj = {x: 0, name: "obj"}
var robj = {x: -1, name: "robj"}
var factory = function (x) {
  this.x = x
  console.log(this)
}

var factoryBind = factory.bind(obj)
robj.factory = factoryBind
robj.factory(2) // Object {x: 2, name: "obj"}，作為方法的綁定的優(yōu)先級(jí)低于bind的顯式綁定

factoryBind.call(robj, 3) // Object {x: 3, name: "obj"}，call的優(yōu)先級(jí)低于bind
console.log(robj) // Object {x: -1, name: "robj", factory: function}，未對(duì)robj進(jìn)行修改
console.log(obj) // Object {x: 3, name: "obj"}，修改的是obj，因?yàn)閠his指針指向未變化

var p = new factoryBind(4) // factory {x: 4}
console.log(p) // factory {x: 4}
console.log(obj) // Object {x: 3, name: "obj"}，構(gòu)造函數(shù)綁定的優(yōu)先級(jí)高于bind的顯式綁定

可以見(jiàn)得，優(yōu)先級(jí)從高到低：

new，構(gòu)造綁定

bind，顯式綁定

call/apply，顯示綁定

作為方法綁定

默認(rèn)綁定