摘要：的幾種用法關(guān)于是什么理論上是執(zhí)行上下文的一個(gè)屬性，的值在進(jìn)入到執(zhí)行上下文的時(shí)候就已經(jīng)確定了，且不會(huì)再改變。默認(rèn)綁定這種情況下，不屬于任何一個(gè)函數(shù)方法內(nèi)，即在全局作用域下，這種情況下稱為默認(rèn)綁定。最后的總結(jié)用偽代碼的形式來(lái)表示例外例外本文參考

this是什么？

理論上this是執(zhí)行上下文的一個(gè)屬性，this的值在進(jìn)入到執(zhí)行上下文的時(shí)候就已經(jīng)確定了，且不會(huì)再改變。這一點(diǎn)很重要。

this的作用？

this 的機(jī)制提供了一個(gè)優(yōu)雅的方式，隱式地傳遞一個(gè)對(duì)象，這可以讓函數(shù)設(shè)計(jì)的更加簡(jiǎn)潔，并且復(fù)用性更好。

new綁定，this指向由new創(chuàng)建的對(duì)象

顯示綁定，this指向apply或者call函數(shù)的第一個(gè)參數(shù)

隱式綁定，this指向函數(shù)的調(diào)用者。

默認(rèn)綁定，嚴(yán)格模式下指向undefinded，非嚴(yán)格模式this指向全局對(duì)象。

箭頭函數(shù)綁定，this指向箭頭函數(shù)外邊包裹的普通函數(shù)

當(dāng)用new創(chuàng)建一個(gè)新的對(duì)象的時(shí)候，this指向了由new關(guān)鍵字聲明創(chuàng)建的對(duì)象。

class Person(name){
    constructor(name){
        this.name = name;
    }
    showThis(){
        return this;
    }
}
var p1 = new Person("zhang");
var p2 = new Person("zhao");
console.log(p1.showThis() === p1);    //true
console.log(p2.showThis() === p2);    //true
console.log(p1.showThis() === Persion)    //false

可以看到，這種情況下this的值指向了由new創(chuàng)建的對(duì)象的引用。this會(huì)被綁定到這個(gè)對(duì)象上去。

所謂的顯式綁定，指的是通過(guò)apply或者call方法的第一個(gè)參數(shù)。

call和apply的不同，兩個(gè)方法的第一個(gè)參數(shù)都是this賦給的對(duì)象。不同在于，之后的參數(shù)被當(dāng)作call方法的形參依次傳進(jìn)去，而apply則是接受一個(gè)數(shù)組。

看代碼：

function foo(){
    console.log(this === obj);     //true
    console.log(this.a === 2);     //true
}

var obj = {
    a:2
}

foo.call(obj);

隱式綁定用的次數(shù)比較多。一個(gè)最重要的特點(diǎn)就是，this的指定順序和在哪里定義沒有關(guān)系，而是取決于調(diào)用者。

嚴(yán)格意義來(lái)說(shuō)，this是上下文里的一個(gè)屬性（存放各種變量的變量對(duì)象同樣也是上下文里的屬性），this的值總是指向當(dāng)前上下文的父級(jí)上下文，其實(shí)也就是當(dāng)前上下文的調(diào)用者。

看代碼：

//第一個(gè)簡(jiǎn)單的例子
var obj = {
    a : 1,
    foo : function(){
        console.log(this === obj);     //trun
        console.log(this.a === 1);     //true
    },
    bar : bar
}

//假如把一個(gè)屬性定義在對(duì)象外邊
function bar(){
    console.log(this === obj);      //true
}

obj.foo();
obj.bar();     //都是true

再來(lái)一個(gè)例子

function bar(){
    console.log(this === obj1);
    console.log(this === obj2);
}
function foo(){
    console.log(this === obj1);
    console.log(this === obj2);
}

var obj1 = {
    bar: bar,
    foo: foo
}

var obj2 = {
    bar: obj1.bar,
    foo: obj1.foo,
}

obj1.foo();     //true  false
obj2.foo();     //false  true
obj1.bar();     //true  false
obj2.foo();     //false  true

很簡(jiǎn)單，foo和bar兩個(gè)方法分別由obj1和obj2調(diào)用，哪怕obj2中的foo和bar是obj1的也沒關(guān)系，與在哪里定義沒有關(guān)系，純粹看是看誰(shuí)調(diào)用的，obj2.foo()就是obj2調(diào)用的foo方法，所以，這個(gè)時(shí)候this指向obj2。

多說(shuō)一句，如果既有顯示綁定又有隱式綁定，當(dāng)然是以顯示綁定為準(zhǔn)。

這種情況下，this不屬于任何一個(gè)函數(shù)方法內(nèi)，即在全局作用域下，這種情況下稱為默認(rèn)綁定。

非嚴(yán)格模式下，這個(gè)時(shí)候this值為window全局對(duì)象。

function foo(){
    console.log(this === window);
}

foo();

嚴(yán)格模式下，this的值是undefined

"use strict";

function foo() {
  console.log( this === undefined );
}

foo();               // true
foo.call(undefined); // true
foo.call(null);      // false

箭頭函數(shù)其實(shí)是一個(gè)語(yǔ)法躺，箭頭函數(shù)的里的this指向包裹箭頭函數(shù)的那個(gè)函數(shù)的this值。很好理解。

// ES6
function foo() {
  setTimeout(() => {
    console.log(this === obj); // true
  }, 100);
}

const obj = {
  a : 1
}

foo.call(obj);

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log(_this === obj); // true
  }, 100);
}

var obj = {
  a : 1
}

foo.call(obj);

用偽代碼的形式來(lái)表示

if (`newObj = new Object()`) {
  this = newObj
} else if (`bind/call/apply(thisArgument,...)`) {
  if (`use strict`) {
    this = thisArgument
  } else {
    if (thisArgument == null || thisArgument == undefined) {
      this = window || global
    } else {
      this = ToObject(thisArgument)
    }
  }
} else if (`Function Call`) {
  if (`obj.foo()`) {
    // base value . Reference = base value + reference name + strict reference
    // 例外： super.render(obj).  this = childObj ?
    this = obj 
  } else if (`foo()`) {
    // 例外： with statement. this = with object?   
    this = `use strict` ? undefined : window || global
  }
}

本文參考