摘要：指向的改變構(gòu)造函數(shù)中的操作符會(huì)調(diào)用函數(shù)的內(nèi)部的方法，創(chuàng)建對(duì)象，之后調(diào)用函數(shù)的方法，把新創(chuàng)建對(duì)象作為值。調(diào)用函數(shù)時(shí)與設(shè)置的值以及箭頭函數(shù)皆為動(dòng)態(tài)的改變指針的方法。這一特性使得箭頭函數(shù)在中的函數(shù)中使用起來(lái)很方便。

原文地址

通常所說(shuō)的：如果是全局環(huán)境中，this指向全局對(duì)象，如果是對(duì)象的方法，這this指向這個(gè)對(duì)象。

例子1：

var foo = {
  bar: function() {
    console.log(this)
  }
}

foo.bar();
(foo.bar)();

(foo.bar = foo.bar)();
(false || foo.bar)();
(foo.bar, foo.bar)();

例子1前兩者為foo，后面都是全局對(duì)象。后三者并沒(méi)有指向foo。所以我們上面的通常說(shuō)法不精確。

在全局環(huán)境中，this指向全局對(duì)象。而在普通函數(shù)調(diào)用中，this是由激活上下文的調(diào)用者提供，即調(diào)用這個(gè)函數(shù)的父作用域，以及函數(shù)調(diào)用的語(yǔ)法形式，決定了this的值，這是一個(gè)動(dòng)態(tài)可變的值。

例子2：

var foo = {
  bar: function() {
    console.log(this)
    console.log(this === foo)
  }
}

foo.bar() // foo, true

var fn = foo.bar

console.log(fn === foo.bar) // true

fn() // global, false

例子2中，第一次調(diào)用指向foo，把foo.bar賦值給fn之后，this沒(méi)有指向foo。是什么導(dǎo)致this指向的變化呢？

this是執(zhí)行上下文的一個(gè)屬性：

activeExecutionContext = {
  VO: {...},
  this: thisValue
}

在普通函數(shù)調(diào)用中，this是由激活上下文的調(diào)用者提供，即調(diào)用這個(gè)函數(shù)的父作用域，函數(shù)調(diào)用的語(yǔ)法形式，決定了this的值，這是一個(gè)動(dòng)態(tài)可變的值。

為什么會(huì)引起這個(gè)差異呢？
因?yàn)橐妙愋偷牟煌幚?，是否?huì)獲取真實(shí)的值，所導(dǎo)致的。

引用類型存在形式：

1 標(biāo)識(shí)符（變量名，函數(shù)名，函數(shù)參數(shù)名，全局對(duì)象屬性名）

2 屬性訪問(wèn)器（foo.bar(); foo["bar"](), 點(diǎn)標(biāo)記法；可以動(dòng)態(tài)設(shè)置屬性名的方括號(hào)[]）

為了從引用類型中獲取真實(shí)的值，存在類似getValue的方法。而函數(shù)上下文的規(guī)則是，函數(shù)上下文中this由調(diào)用者提供，并由調(diào)用形式?jīng)Q定。如果調(diào)用的圓括號(hào)左側(cè)是一個(gè)引用類型，this為這個(gè)引用類型，如果是非引用類型，這為null，但為null無(wú)意義，被隱式轉(zhuǎn)化為全局對(duì)象。

this是一個(gè)指針，便于代碼的更為簡(jiǎn)潔地復(fù)用。

// 無(wú)this
function upper(context) {
  return context.name.toUpperCase()
}
function speak(context) {
  var greeting = "Hello, I"m " + upper(context)
  console.log(greeting)
}

var me = {
  name: "m"
}

var you = {
  name: "y"
}

speak(me)

// 利用this

function upper() {
  return this.name.toUpperCase()
}
function speak() {
  var greeting = "Hello, I"m " + upper.call(this)
  console.log(greeting)
}

speak.call(me)

這里this可以簡(jiǎn)化上下文對(duì)象的傳遞。其他OPP語(yǔ)言中this關(guān)鍵字和OPP密切相關(guān)，一般是引用剛創(chuàng)建的對(duì)象，但在ECMAScript中，this只限于引用創(chuàng)建過(guò)的對(duì)象，this的指向和函數(shù)調(diào)用形式有關(guān)，不一定引用類型調(diào)用就指向引用類型。

1 構(gòu)造函數(shù)中的this

function C() {
  console.log(this)
  this.x = 10
}

var a = new C()
console.log(a.x);

new操作符會(huì)調(diào)用函數(shù)的內(nèi)部的Construct方法，創(chuàng)建對(duì)象，之后調(diào)用函數(shù)的Call方法，把新創(chuàng)建對(duì)象作為this值。

2 調(diào)用函數(shù)時(shí)call與apply設(shè)置this的值

var b = 10
function a(c) {
  console.log(this.b)
  console.log(c)
}

a(20)
a.call({b: 20}, 30)
a.apply({b: 20}, [40])

call,apply,bind皆為動(dòng)態(tài)的改變this指針的方法。其中call和apply是當(dāng)Object沒(méi)有某個(gè)方法，但是其它對(duì)象有，可以借助call和apply改變this的指向，調(diào)用其它對(duì)象的方法。bind為綁定this為某個(gè)對(duì)象。

典型的應(yīng)用：

將類數(shù)組元素轉(zhuǎn)化為數(shù)組：
Array.prototype.slice.apply(document.getElementsByTagName("*"))

檢查類型：

function isArray(obj) {
  return Object.prototpye.toString.call(obj) === "[object Array]"
}

箭頭函數(shù)則與前三者不同。
If kind is Arrow, set the [[ThisModel]] internal slot of F to lexical.If the
value is "lexical", this is an ArrowFunction and does not have a local this

If thisModel is lexical, return NormalCompletion(undefined).

箭頭函數(shù)沒(méi)有自己的this綁定，同時(shí)在函數(shù)執(zhí)行時(shí)綁定this會(huì)被直接忽略。其中this總是指向定義時(shí)所在的對(duì)象，而不是運(yùn)行時(shí)所在的對(duì)象。即箭頭函數(shù)的this值是lexical
scope 的this值。這一特性使得箭頭函數(shù)在React中的render函數(shù)中使用起來(lái)很方便。

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

var id = 0

foo.call({id: 42})

// 容易誤解的地方
// {id: 42}
// 是箭頭函數(shù)定義所在的對(duì)象還是運(yùn)行時(shí)所在的對(duì)象。由于箭頭函數(shù)位于foo函數(shù)內(nèi)部，只有foo函數(shù)運(yùn)行之后他才會(huì)生成，所以foo運(yùn)行時(shí)所在的對(duì)象，即箭頭函數(shù)定義所在的對(duì)象。

var f = () => 5;
// 近似等價(jià)于
var f = function() {return 5;}.bind(this);

綜上，call,apply,bind使得JavaScript具有動(dòng)態(tài)改變this的特性，而箭頭函數(shù)使得JavaScript具有固定this的指向的特性。一動(dòng)一靜，相得益彰。

  this.x = 0
  let module = {
    x: 1,
    getX: function() {
      console.log(this.x)
    }
  }
  module.getX()
  let get = module.getX
  get() // 0
  let boundGetX = get.bind(module)
  boundGetX() // 1
  let ES7boundGetx = module::get
  ES7boundGetx() // 1

class P {
  foo() {
    console.log("P.foo")
  }
}

class C extends P {
  foo() {
    super.foo()
  }
}

var c1 = new C()
c1.foo() // P.foo

var D = {
  foo: function() {
    console.log("D.foo")
  }
}

var E = {
  foo: C.prototype.foo
}

Object.setPrototypeOf(E, D)
E.foo() // P.foo

可見(jiàn)super的綁定是靜態(tài)綁定，創(chuàng)建時(shí)即完成綁定。所以E委托了D，但并不能調(diào)用到D.foo()，類似于箭頭的函數(shù)的this綁定。

鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)；

function Constructor() {
  this.art = 0
}

Constructor.prototype.fn_0 = function() {
  console.log("0")
  return this;
}

Constructor.prototype.fn_1 = function() {
  console.log("1")
  return this;
}

new Constructor().fn_0().fn_1()

調(diào)用的方法返回this即可。

end()的實(shí)現(xiàn)

function end() {
  return this.prevObject || this.constructor(null)
}

// 設(shè)置preObject的函數(shù)
function pushStack( ele ) {
  // Build a new jQuery macthed element set
  var ret = jQuery.merge( this.constructor(), elems);
  ret.prevObject = this // ret.pervObject 設(shè)置為當(dāng)前jQuery對(duì)象引用
  ret.context = this.context
  return ret;
}

pushStack函數(shù)在很多涉及DOM操作的函數(shù)都有調(diào)用，用于緩存了當(dāng)前的this。由于只存儲(chǔ)當(dāng)前，所以這里只需要一個(gè)preObject即可，無(wú)需放在一個(gè)數(shù)組里。

this是JavaScript特性之一，具有腳本語(yǔ)言的動(dòng)態(tài)特性，帶來(lái)很多便捷，同時(shí)由于super和箭頭函數(shù)的特性，使得this具有了靜態(tài)的特性，在這兩種情況下，this是固定且無(wú)法改變的。其利與弊都是this的靈活，雙刃劍。所以才有了ES2015中super和箭頭函數(shù)的固定this的特性。

this可被重新賦值么？（不能，this是保留字）

1 call參數(shù)為null時(shí)，this的指向

function a() {
  console.log(this)
}
a.call(null)

2 調(diào)用形式對(duì)this的影響

var foo = {
  bar: function() {
    console.log(this)
  }
}

foo.bar();
(foo.bar)();

(foo.bar = foo.bar)();
(false || foo.bar)();
(foo.bar, foo.bar)();

《你所不知道的JavaScript（上卷）》

關(guān)于JavaScript的執(zhí)行域,標(biāo)識(shí)符解析,閉包的研究

深入ECMA-262-3 第三章、This

JavaScript內(nèi)部原理實(shí)踐——真的懂JavaScript嗎？