摘要：回調(diào)函數(shù)中調(diào)用在回調(diào)函數(shù)中一般有兩種情況回調(diào)函數(shù)為匿名函數(shù)時(shí)，回調(diào)函數(shù)的會指向，需要對回調(diào)函數(shù)。回調(diào)函數(shù)為箭頭函數(shù)時(shí)，回調(diào)函數(shù)的會指向他的直接上層。

this簡單而又神秘，使用場景多變而又復(fù)雜，這造就了它成為了初級javascript開發(fā)人員不愿接觸的東西，高級javascript都想探究的東西。文本亦是對this的致敬。

this是什么？
this是當(dāng)前執(zhí)行環(huán)境的上下文，通常由函數(shù)的調(diào)用方式?jīng)Q定其值。

this的原理

首先，從函數(shù)的調(diào)用開始

函數(shù)的調(diào)用一般有三種情況（ES5中）

1.foo(p1,p2);
   2.obj.foo(p1,p2);
   3.foo().call(context,p1,p2);//或者apply

通常情況下，大部分童鞋常用的都是前兩種方式，只有在不得不綁定context的情況下才會使用第三種。其中，第三種方式，才是函數(shù)調(diào)用的正確方式。

foo().call(context,p1,p2);

之所以，我們在使用前兩種方式也能正常的運(yùn)行，這其實(shí)就是一種語法糖而已，在js運(yùn)行機(jī)制中，會把前兩種調(diào)方式，當(dāng)做下面的方式進(jìn)行處理

foo(p1, p2) 等價(jià)于  
foo.call(undefined, p1, p2)

 obj.foo(p1, p2) 等價(jià)于
 obj.foo.call(obj, p1, p2)  

因此，如果我們以后再調(diào)用函數(shù)時(shí)，能準(zhǔn)確的找到context，就可以唯一的確認(rèn)this的值

this的使用場景

3.1 全局環(huán)境使用

 無論是否在嚴(yán)格模式下，在全局執(zhí)行環(huán)境中（在任何函數(shù)體外部）this 都指向全局對象。

// 在瀏覽器中, window 對象同時(shí)也是全局對象：
   console.log(this === window); // true
   var a=1;
   console.log(this.a) //1
   console.log(window.a) //1

3.2 普通函數(shù)中調(diào)用

  在非嚴(yán)格模式下，且this的值沒有被調(diào)用函數(shù)設(shè)置，this 的值默認(rèn)指向全局對象。

   funnction func(){
     console.log(this)
   }
   //瀏覽器環(huán)境中
   func()  // window
   //node環(huán)境中
   func()  // global

  
  在嚴(yán)格模式下，this的值如果不設(shè)置，就是是undefined
  

   funnction func(){
     "use strict"
     console.log(this)
   }
  func() === undefined; // true

3.3 作為對象中的方法調(diào)用

var obj={
    name:"我是對象obj",
    ofun:function(){
    console.log(this.name)
    }
}
var name="我是全局name";
var func= obj.ofun;
obj.ofun(); //我是對象obj
func(); //我是全局name

這里有兩點(diǎn)需要注意：

   1.函數(shù)作為對象的方法進(jìn)行調(diào)用時(shí)，this指向當(dāng)前的對象。                  
   2.對象中的函數(shù)方法名存儲的僅是一個(gè)函數(shù)的地址（地址中會有該函數(shù)的屬性：[[value]、[[writable]]、[[enumerable]]、[[congifable]]）
   當(dāng)把一個(gè)對象的方法賦值給另一個(gè)變量（例如：func）時(shí)，引擎會將函數(shù)多帶帶保存在內(nèi)存中，然后再將函數(shù)的地址賦值給foo屬性的value屬性。

3.4 構(gòu)造函數(shù)中使用

  this在構(gòu)造函數(shù)中使用，值為實(shí)例化的對象

function Fun(name){
     this.name=name;
     this.speak=function(){
        console.log(this.name);
     }
   }
   var fun1=new Fun("jack");
   fun1.speak();
   var fun2=new Fun("rose");
   fun2.speak();//rose

3.5 bind/call/apply

this再被bind/call/apply強(qiáng)制綁定上下文執(zhí)行環(huán)境時(shí)，屬于硬綁定。
 

  function foo(somerthing){
     console.log(this.a);
   }
   var obj={
     a:2
   }
   var bar = function(){
     foo.call(obj);
   };
   bar(); //2
   //硬綁定的bar不可能再修改它的this
   bar.call(window);//2
 }

硬綁定的典型應(yīng)用場景就是創(chuàng)建一個(gè)包裹函數(shù)，傳入所有的參數(shù)并返回接收到的所有值；

  function foo(somerthing){
     console.log(this.a,something);
     return this.a +something;
   }
   var obj={
     a:2
   }
   var bar = function(){
     return foo.apply(obj,arguments);
   };
   var b=bar(3);// 2 3
   console.log(b);//5

由于硬綁定是一種非常常用的模式，所以在ES5中提供了內(nèi)置的方法Function.prototype.bind,它的用法如下；

   function foo(somerthing){
     console.log(this.a,something);
      return this.a +something;
   }
   var obj={
     a:2
   }
   var bar=foo.bind(obj);
   var b=bar(3);// 2 3
   console.log(b);//5

call，apply，bind方法的區(qū)別：

　　a：第一個(gè)參數(shù)都是要綁定的上下文執(zhí)行環(huán)境，即this的值。
　　b：都可在函數(shù)調(diào)用時(shí)傳遞參數(shù)。call，bind方法需要直接傳入，而apply方法需要以數(shù)組的形式傳入。
　　c：call，apply方法是在調(diào)用之后立即執(zhí)行函數(shù)，而bind方法沒有立即執(zhí)行，需要將函數(shù)再執(zhí)行一遍。有點(diǎn)閉包的味道。
　　d：改變this對象的指向問題不僅有call，apply，bind方法，也可以使用that/self等變量來固定this的指向。

3.6 回調(diào)函數(shù)中調(diào)用

  在回調(diào)函數(shù)中一般有兩種情況：
   1. 回調(diào)函數(shù)為匿名函數(shù)時(shí)，回調(diào)函數(shù)的this會指向window，需要對回調(diào)函數(shù)bind(this)。
   2. 回調(diào)函數(shù)為箭頭函數(shù)時(shí)，回調(diào)函數(shù)的this會指向他的直接上層。
   

  var obj = {
      name: "test for call-func",
      ofun: function(){
            //undefined 丟失
            setTimeout(function(){
              console.log(this.name)
            }, 100);
           //work well 硬綁定
            setTimeout(function(){
               console.log(this.name)
            }.bind(this), 100);//test for call-func
           // arrow function  test for call-func
           setTimeout( () => console.log(this.id), 100)
      }
    };

    obj.ofun();

3.7 自執(zhí)行函數(shù)
自執(zhí)行或者立即執(zhí)行函數(shù)中的this指向Window
首先自執(zhí)行函數(shù)的幾種調(diào)用方式

//常見的有兩種：
(function(){})()    （function(){}()）//w3c推薦方式
//只有表達(dá)式才能被執(zhí)行符號()執(zhí)行
+function test(){}();//+ - ! =等運(yùn)算符可以使前面的函數(shù)成為表達(dá)式，加上后面()可立即執(zhí)行。
//函數(shù)聲明無法立即執(zhí)行一個(gè)函數(shù)，但是函數(shù)表達(dá)式可以
var a = function(){}();//這種是函數(shù)表達(dá)式，后面有()可以立即執(zhí)行。成為一個(gè)立即執(zhí)行函數(shù)。

var obj = {
    number: 3,
    xxx: (function () {
        console.log(this + "--")//立即執(zhí)行函數(shù)中的this指向window，因?yàn)榱⒓磮?zhí)行函數(shù)是window調(diào)用的
        console.log(this.number + "~~~")//刪除上面一行，此處this.number返回undefined
        return function () {
            console.log(this.number + "】")
            this.number += 7;
            console.log(this + "+")
        }
    })()
}

obj.xxx() //相當(dāng)于obj.xxx.call()，所以此處的this指向obj
console.log(obj.number) //10