摘要：為什么用能夠動(dòng)態(tài)的取值，實(shí)現(xiàn)了隱式傳遞一個(gè)對(duì)象的引用上面的例子中想在中取的值用就能簡單搞定一定程度上實(shí)現(xiàn)了動(dòng)態(tài)取值這個(gè)就是綁定了，這個(gè)就是上下文對(duì)象也就是調(diào)用棧是什么始終是一個(gè)對(duì)象，函數(shù)在被調(diào)用時(shí)發(fā)生綁定，具體綁定了什么看調(diào)用的位置，有一定

this能夠動(dòng)態(tài)的取值，實(shí)現(xiàn)了隱式傳遞一個(gè)對(duì)象的引用

        var obj = {
            a : {

                b : 2,
                c : function () {
                        console.log(this.b);
                    }
            }
        }

上面的例子中想在c中取b的值用this就能簡單搞定,一定程度上實(shí)現(xiàn)了動(dòng)態(tài)取值；obj.a.c(),這個(gè)this就是綁定了obj.a，這個(gè)就是上下文對(duì)象也就是調(diào)用棧

this始終是一個(gè)對(duì)象，函數(shù)在被調(diào)用時(shí)發(fā)生綁定，具體綁定了什么看調(diào)用的位置，有一定的綁定規(guī)則

默認(rèn)綁定
當(dāng)函數(shù)不帶任何修飾被調(diào)用時(shí)，運(yùn)用默認(rèn)綁定，this就是window全局對(duì)象；但要注意的是在嚴(yán)格模式下，則不行，this會(huì)綁定成undefined

function f() {
    //"use strict"
    console.log(this.a);
}
var a = 123;
f();        //123

function f() {
    "use strict"
    console.log(this.a);
}
var a = 123;
f();        //報(bào)錯(cuò)，undefined不能夠添加屬性

隱式綁定
當(dāng)上下文對(duì)象（調(diào)用棧）調(diào)用函數(shù)時(shí)，會(huì)隱式綁定this，哪個(gè)對(duì)象調(diào)用就綁定誰

    function f() {
        console.log(this.a);
    }
    var obj = {
        a : 123,
        b : f,
    }
    obj.b();
  

上面例子實(shí)際上就是this = obj，而不是this = obj.a
這是最簡單的，但是這種綁定常常會(huì)發(fā)生隱式丟失，而采用默認(rèn)綁定

    function f() {
        console.log(this.a);
    }
    var obj = {
        a : 123,
        b : f,
    }
    var a = 345
    var f1 = obj.b;   //采取函數(shù)別名而發(fā)生了隱式丟失
    f1();             //345,這等同于直接執(zhí)行了f函數(shù)

我的理解是函數(shù)取別名是最好賦值上下文對(duì)象，也就是調(diào)用棧（var f1 = b）
例如下面例子也是隱式丟失

    function f() {
        console.log(this.a);
    }
    var obj = {
        a : 123,
        b : f,
    }
    function fn(f) {        //等同于setTimeout(obj.b, 100)
        f();
    }
    fn(obj.b);

要注意這種別名：

function f() {
    console.log(this.a);
}
var obj = {a : 1};
obj.fn = f;
obj.fn()

實(shí)際上就是：

function f() {
    console.log(this.a);
}
var obj = {
    a : 1，
    fn ： f,
};
obj.fn()

顯示綁定
javascript提供了3種call，apply，bind；作用都是改變this的指向

call
可以填入多個(gè)參數(shù)

func.call(thisValue, arg1, arg2, arg3,...)

第一個(gè)參數(shù)是this要綁定的對(duì)象，若參數(shù)為空，undefined，null，則默認(rèn)綁定window；若參數(shù)為原始值，則this綁定對(duì)應(yīng)的包裝類對(duì)象
后面參數(shù)則是傳入func的參數(shù)

    function f(n, m) {
        console.log(n, m, this.a);
    }
    var obj = {a : 1};
    f.call(obj, 3, 4);     //3 4 1

    function f() {
        console.log(this);
    }
    f.call("123");       //String?{"123"}

apply
apply與call類似只是參數(shù)不同，就是將傳入原函數(shù)的參數(shù)變成數(shù)組形式

func.call(thisValue, [arg1, arg2, arg3,...])

apply與call可以這樣理解：就是thisValue借用func函數(shù)功能來實(shí)現(xiàn)效果
類似于thisValue.fn(arg1, arg2, arg3...)
利用這一特點(diǎn)可以實(shí)現(xiàn)有趣的效果

找數(shù)組中最大的數(shù)

var arr = [11, 2, 3, 4, 5];
var nmax = Math.max.apply(null, arr);   //11

null的作用是因?yàn)橛貌坏絫his，用null代替，僅用后面的參數(shù)，有柯里化的感覺
建議我們一般定義一個(gè)比null還空的空對(duì)象：var ? = Object.create(null)

將數(shù)組中的空元素變成undefined,這個(gè)樣就可遍歷了，其屬性描述的enumerable:true

var arr = [11, , 3, 4, 5];
var arr1 = Array.apply(null, arr);  //[11, undefined, 3, 4, 5]

轉(zhuǎn)換類數(shù)組對(duì)象，利用Array的實(shí)例方法slice,前提是必須有l(wèi)ength屬性

var arr = Array.prototype.slice.apply({0 :1, 1 : 2, length : 3});  //[1, 2, empty]
var arr = Array.prototype.slice.apply({0 :1});  //[]
var arr = Array.prototype.slice.apply({length : 1});  //[empty]

bind
bind函數(shù)參數(shù)形式和call類似

func.bind(thisValue, arg1, arg2, arg3,...)

我對(duì)他的理解是對(duì)原函數(shù)進(jìn)行改造，生成自己的新函數(shù)，主要改造就是this綁定成thisValue,并且可以固定部分參數(shù)，當(dāng)然后面arg選填
類似于thisValue.fn
我們可以自定義一個(gè)簡單bind函數(shù)：

function myBind(fn, obj) {
    return function () {
        fn.apply(obj, arguments);
    }    
}
function f(n) {
    console.log(n + this.a)
}
var obj = {a : 1};
var bind = myBind(f, obj);
bind(4);               //5
    

原生態(tài)bind用法也類似

function f(n,m) {
    console.log(this.a + n + m);
}
var obj = {a : 1};
var bar = f.bind(obj, 2);
bar(3);    //6

注意點(diǎn)bind每次返回一個(gè)新函數(shù)，在監(jiān)聽事件時(shí)要注意，不然romove不掉

element.addEventListener("click", o.m.bind(o));
element.removeEventListener("click", o.m.bind(o));

因?yàn)閛.m.bind(o)返回的時(shí)新函數(shù)，所以remove的也不是開啟時(shí)的函數(shù)了
正確做法：添加一個(gè)值，記錄開啟時(shí)的函數(shù)

var listener = o.m.bind(o)
element.addEventListener("click", listener);
element.removeEventListener("click", listener);

有趣的地方：
利用call與bind實(shí)現(xiàn)原始方法

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 1);   //[2, 3]

可以拆分bind看

Array.prototype.slice.Function.prototype.call([1, 2, 3], 1)

其中Function.prototype.call 就是call方法

Array.prototype.slice.call([1, 2, 3], 1)

拆分call

[1, 2, 3].Array.prototype.slice(1)

而Array.prototype.slice就是slice
所以

[1, 2, 3].slice(1)

個(gè)人理解可以看成，Array.prototype.slice實(shí)現(xiàn)了slice功能，F(xiàn)unction.prototype.call實(shí)現(xiàn)了arguments中this的綁定以及參數(shù)的帶入。所以函數(shù)最總調(diào)用時(shí)顯示：slice([1, 2, 3], 1);

同理

var push = Function.prototype.call.bind(Array.prototype.push);
var pop = Function.prototype.call.bind(Array.prototype.pop);

同時(shí)bind也能被改寫

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

var obj = { a : 123 };
var bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, obj)() // 123

new的this綁定
當(dāng)用new來指向函數(shù)F時(shí)，函數(shù)變成構(gòu)造函數(shù)F，this也會(huì)發(fā)生變化
this = Object.create(F.prototype)
具體new的功能可看我的new篇

new綁定 > 顯示綁定 > 隱式綁定 > 默認(rèn)綁定

隱式綁定與默認(rèn)綁定比較

function f() {
        console.log(this.a);
    }
    var obj = {
    a : 123,
        f : f,
    }
var a = 456;
    obj.f();  // 123

obj.f()覆蓋了f(),因此隱式大于默認(rèn)

隱式綁定與顯示綁定比較

function f() {
    console.log(this.a);
}
var obj = {
    a : 123,
    f : f,
}
var obj1 = {
    a : 1123
}
obj.f.call(obj1);   //1123

由輸出結(jié)果可以看出：call綁定的obj1覆蓋了obj,所以顯示大于隱式

顯示綁定與new綁定

function f(n) {
    this.a = n;
    console.log(this);
}
var obj = { b : 2};
var bar = f.bind(obj);
console.log(bar(2));
console.log(new bar(2));
//{b:2,a:2}
//undfined
//{a: 2}
//{a: 2}

由輸出結(jié)果可以看出：new bar(2),{a:2}說明是新生成的空對(duì)象，添加了a的屬性，其次輸出兩個(gè)說明函數(shù)返回了一個(gè)this對(duì)象也就是{a:2},而不是undefined
所以new大于顯示

注意多層this*

var obj = {
  f: function () {
    console.log(this);
    var f1 = function () {
      //console.log(this);
    }();
  }
}

obj.f();
//{f:func}
//winodw

因?yàn)閭鹘y(tǒng)的this沒有繼承機(jī)制，所以這個(gè)匿名函數(shù)的this沒有任何修飾，采取默認(rèn)綁定
有兩種方法解決

var obj = {
  f: function () {
    var self= this
    console.log(self);
    var f1 = function () {
      //console.log(self);
    }();
  }
}

obj.f();
//{f:func}
//{f:func}

var obj = {
      f: function () {
        console.log(this);
        return () => {
              console.log(this);
        };
      }
}

obj.f()();
//{f:func}
//{f:func}

注意處理數(shù)組時(shí)使用this

var obj = {
    a : 123,
    arr : [1, 2, 3],
    f : function () {
        this.arr.forEach(function (elem) {
            console.log(this.a, elem);
        });
        
    }
}
var a = "this是window";
obj.f();
//this是window 1
//this是window 2
//this是window 3

forEach中的this指向的是window
解決辦法：

   var obj = {
   a : 123,
   arr : [1, 2, 3],
   f : function () {
       this.arr.forEach(function (elem) {
           console.log(this.a, elem);
       },this);
       
   }
   }
   var a = "this是window";
   obj.f();
   //123 1
   //123 2
   //123 3

還有一種就是賦值給一個(gè)變量self暫時(shí)保存，給遍歷時(shí)用，如同上面的self

注意回調(diào)函數(shù)中的this

var obj = new Object();
obj.f = function () {
  console.log(this === obj);
}


$("#button").on("click", obj.f);   //false

this指向的是DOM對(duì)象而不是obj，這個(gè)有點(diǎn)難以察覺，需要注意
解決辦法：硬綁定obj對(duì)象

  var obj = new Object();
  obj.f = function () {
    console.log(this === obj);
  }
  function fn(){
    obj.f.apply(obj);
  }
  
  $("#button").on("click", fn);   //true
  //$("#button").on("click", o.f.bind(obj));   //true

上面的硬綁定相當(dāng)于固定了this的對(duì)象,不會(huì)變了。
我們可以做個(gè)軟綁定

if(!Function.prototype.sorfBind) {
    Function.prototype.sorfBind = function (obj) {
        //這個(gè)this：執(zhí)行sorfBind時(shí)的調(diào)用位置綁定的this
        var fn = this;                
        var arg1 = [].slice.call(arguments, 1);
        var bound = function() {
            //這個(gè)this：執(zhí)行bound時(shí)綁定的this
            return fn.apply(
                //arg1.concat.call(arg1, arguments 作用是整合兩次執(zhí)行傳入的參數(shù)
                //(!this || this === (window || global)) 猜測(cè)是為了在嚴(yán)格模式下也試用
                (!this || this === (window || global)) ? obj : this, arg1.concat.call(arg1, arguments)   //arguments是bound函數(shù)執(zhí)行時(shí)參數(shù)的參數(shù)，
                );
        };
        bound.prototype = Object.create(fn.prototype);
        return bound;
    }
}
function f() {
    console.log("name: " + this.name);
}
var obj = {name : "obj"},
    obj1 = {name : "obj1"},
    obj2 = {name : "obj2"};
var fObj = f.sorfBind(obj);
fObj();                      //name : obj
obj1.foo = f.sorfBind(obj);
obj1.foo();                  //name : obj1
fObj.call(obj2);             //name : obj2
setTimeout(obj1.foo, 10);    //name : obj

初次綁定this后，箭頭函數(shù)內(nèi)部的this就固定了

function f() {
    return (b) => {
        console.log(this.a);
    }
}
var obj = {a : 1};
var obj1 = {a : 2};
var fn = f.call(obj);

fn();                //1
fn.call(obj1);       //1

與第一點(diǎn)類似，初次綁定后內(nèi)部this固定了也就有了繼承

function f() {
    setTimeout(() => {
        console.log(this.a);
    },10);
}
var obj = {a : 1};
f.call(obj);    //1

arguments.callee 也有改變this指向

function f() {
    console.log(this);
    if(this ==window) {
        arguments.callee();
    }
}
f(); 
//window對(duì)象
//arguments對(duì)象