1.含義

this就是屬性或方法“當(dāng)前”所在的對(duì)象。

    let person = {
        name: 'ABC',
        age: 18,
        greeting: function () {
            console.log('Hi! I\'m ' + this.name + ', '+this.age +' year\'s old');
        }
    };
    console.log(person.greeting());//Hi! I'm ABC, 18 year's old

上面代碼中，this.name表示name屬性所在的那個(gè)對(duì)象。由于this.name是在greeting方法中調(diào)用，而greeting方法所在的當(dāng)前對(duì)象是person，因此this指向person，this.name就是person.name。

this的指向是可變的。因?yàn)閷?duì)象的屬性可以賦給另一個(gè)對(duì)象，所以屬性所在的當(dāng)前對(duì)象是可變的

    let person = {
        name: 'ABC',
        age: 18,
        greeting: function () {
            console.log('Hi! I\'m ' + this.name + ', '+this.age +' year\'s old!');
        }
    };
    let mPerson = {
        name: '一二三',
        age:27
    };

    mPerson.greeting=person.greeting;
    mPerson.greeting();//Hi! I'm 一二三, 27 year's old!

上面代碼中，person .greeting屬性被賦給mPerson，于是mPerson.greeting就表示greeting方法所在的當(dāng)前對(duì)象是mPerson，所以this.name就指向mPerson.name。
這個(gè)例子，this的動(dòng)態(tài)指向有點(diǎn)不太清楚，那換個(gè)例子更加清楚一點(diǎn)

    function Greeting(){
        console.log('Hi! I\'m ' + this.name + ', '+this.age +' year\'s old!');
    }
    let person = {
        name: 'ABC',
        age: 18,
        greeting: Greeting
    };
    let mPerson = {
        name: '一二三',
        age:27,
        greeting: Greeting
    };
    console.log(person.greeting());//Hi! I'm ABC, 18 year's old!
    console.log(mPerson.greeting());//Hi! I'm 一二三, 27 year's old

上面代碼中，函數(shù)Greeting內(nèi)部使用了this關(guān)鍵字，隨著Greeting所在的對(duì)象不同，this的指向也不同。

只要函數(shù)被賦給另一個(gè)變量，this的指向就會(huì)變。

    let person = {
        name: '張三',
        age: 18,
        greeting: function () {
            return '姓名：' + this.name + '年齡:' + this.age;
        }
    };
    var name = '李四';
    var age = 27;
    let mGreeting = person.greeting;
    console.log(mGreeting()); // 姓名：李四,年齡:27

上面代碼中，person.greeting被賦值給變量mGreeting，內(nèi)部的this就會(huì)指向mGreeting運(yùn)行時(shí)所在的對(duì)象（本例是頂層對(duì)象）。
另外注意，頂層對(duì)象里面的變量不能使用let,原因去查一下let和var的區(qū)別吧。

    let person = {
        name: '張三',
        age: 18,
        greeting: function () {
            return '姓名：' + this.name + ',年齡:' + this.age;
        }
    };
    var name = '李四';
    let age = 27;//
    let mGreeting = person.greeting;
    console.log(mGreeting()); // 姓名：李四,年齡:undefined

總結(jié)一下，JavaScript 語言之中，一切皆對(duì)象，運(yùn)行環(huán)境也是對(duì)象，所以函數(shù)都是在某個(gè)對(duì)象之中運(yùn)行，this就是函數(shù)運(yùn)行時(shí)所在的對(duì)象（環(huán)境）。這本來并不會(huì)讓用戶糊涂，但是 JavaScript 支持運(yùn)行環(huán)境動(dòng)態(tài)切換，也就是說，this的指向是動(dòng)態(tài)的，沒有辦法事先確定到底指向哪個(gè)對(duì)象，這才是最讓我們感到困惑的地方。

2.實(shí)質(zhì)

它的設(shè)計(jì)目的就是在函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。
JavaScript 語言之所以有 this 的設(shè)計(jì)，跟內(nèi)存里面的數(shù)據(jù)結(jié)構(gòu)有關(guān)系。內(nèi)存中的對(duì)象，我們?cè)诎阉x值給變量時(shí)，會(huì)把這個(gè)對(duì)象的內(nèi)存地址賦值給變量。

var obj = { name : 5 };
//內(nèi)存中
var obj = 對(duì)象地址;
{
  name: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

對(duì)象的屬性的值保存在屬性描述對(duì)象的value屬性里面，問題在于屬性的值可能是一個(gè)函數(shù)。

var obj = { name: function () {} };

這時(shí)，引擎會(huì)將函數(shù)單獨(dú)保存在內(nèi)存中，然后再將函數(shù)的地址賦值給對(duì)象的屬性的value屬性。

{
  name: {
    [[value]]: 函數(shù)的地址
    ...
  }
}

由于函數(shù)是一個(gè)單獨(dú)的值，所以它可以在不同的環(huán)境（上下文）執(zhí)行。

var getName = function () {
console.log(name);
};
var obj = { getName: getName  };
// 單獨(dú)執(zhí)行
getName ()
// obj 環(huán)境執(zhí)行
obj.getName()

上面代碼中，函數(shù)體里面使用了變量name。該變量由運(yùn)行環(huán)境提供。
現(xiàn)在問題就來了，由于函數(shù)可以在不同的運(yùn)行環(huán)境執(zhí)行，所以需要有一種機(jī)制，能夠在函數(shù)體內(nèi)部獲得當(dāng)前的運(yùn)行環(huán)境（context）。所以，this就出現(xiàn)了，它的設(shè)計(jì)目的就是在函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運(yùn)行環(huán)境。
所以更加準(zhǔn)確的使用時(shí)這樣的

var getName = function () {
console.log(this.name);
};

上面代碼中，函數(shù)體里面的this.name就是指當(dāng)前運(yùn)行環(huán)境的name。

var getName = function () {
console.log(this.name);
};
var name = 'zhangsan';
var obj = { 
  name:'lisi',
  getName: getName
  };
// 單獨(dú)執(zhí)行
getName ()//zhangsan
// obj 環(huán)境執(zhí)行
obj.getName()//lisi

上面代碼中，函數(shù)getName 在全局環(huán)境執(zhí)行，this.name指向全局環(huán)境的name；在obj環(huán)境執(zhí)行，this.name指向obj.name。

3.使用場(chǎng)合

（1）全局環(huán)境
全局環(huán)境使用this，它指的就是頂層對(duì)象window

this === window // true
function func() {
  console.log(this === window);
}
func() // true

上面代碼說明，不管是不是在函數(shù)內(nèi)部，只要是在全局環(huán)境下運(yùn)行，this就是指頂層對(duì)象window.
（2）構(gòu)造函數(shù)
構(gòu)造函數(shù)中的this，指的是實(shí)例對(duì)象

var Obj = function (p) {
  this.p = p;
};
var o = new Obj('Hello World!');
o.p // "Hello World!"

上面代碼定義了一個(gè)構(gòu)造函數(shù)Obj。由于this指向?qū)嵗龑?duì)象，所以在構(gòu)造函數(shù)內(nèi)部定義this.p，就相當(dāng)于定義實(shí)例對(duì)象有一個(gè)p屬性。
（3）對(duì)象的方法
對(duì)象的方法里面包含this，this的指向方法運(yùn)行時(shí)所在的對(duì)象。

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

上面代碼中，obj.getName方法執(zhí)行時(shí)，它內(nèi)部的this指向obj。
注意，規(guī)則很不容易把握,

特別注意，尤其注意

內(nèi)部使用this的方法賦值給另一個(gè)對(duì)象，就會(huì)改變this的指向。

重新再次聲明：對(duì)象的方法里面包含this，this的指向方法運(yùn)行時(shí)所在的對(duì)象

var obj ={
  getName: function () {
    console.log(this);
  }
};
(false || obj.foo)() // window
(1, obj.foo)() // window

上面代碼是不是感覺有點(diǎn)頭暈了，this怎么會(huì)指向window呢？換個(gè)更加直觀點(diǎn)的代碼看看

   var obj ={
        foo: function () {
            console.log(this);
        }
    };
    obj.foo() // obj
    let newObj  = obj.foo;
    newObj  ();//window

上面代碼中的obj.foo就是一個(gè)值。這個(gè)值真正調(diào)用的時(shí)候，運(yùn)行環(huán)境已經(jīng)不是obj了，而是全局環(huán)境，所以this不再指向obj，而是newObj運(yùn)行的環(huán)境window。
可以這樣理解，JavaScript 引擎內(nèi)部，obj和obj.foo儲(chǔ)存在兩個(gè)內(nèi)存地址，稱為地址一和地址二。obj.foo()這樣調(diào)用時(shí)，是從地址一調(diào)用地址二，因此地址二的運(yùn)行環(huán)境是地址一，this指向obj。但是，上面的情況，都是直接取出地址二，賦值給變量，來進(jìn)行調(diào)用，這樣的話，運(yùn)行環(huán)境就是全局環(huán)境，因此this指向全局環(huán)境。（這個(gè)理解了，基本this的指向就沒啥大問題了~~~）。
再來個(gè)頭疼的，要是對(duì)象嵌套了好幾層呢？
this所在的方法不在對(duì)象的第一層，這時(shí)this只是指向當(dāng)前一層的對(duì)象，而不會(huì)繼承更上面的層。

    let a = {
        aP: 'Hello',
        b: {
            bF: function() {
                console.log(this.aP);
            }
        }
    };
    a.b.bF();//undefined

上面代碼中，a.b.bF方法在a對(duì)象的第二層，該方法內(nèi)部的this不是指向a，而是指向a.b。a對(duì)象，其實(shí)可以看做一下的結(jié)構(gòu)：

  let b ={
        bF: function() {
            console.log(this.aP);
        }
    };
    let a = {
        aP: 'Hello',
        b: b
    };
 a.b.bF();//undefined

這樣一看就明白多了，a.b.bF()運(yùn)行時(shí)，this指向b對(duì)象，b對(duì)象沒有aP屬性，所以結(jié)果undefined。
有沒有思考過嵌套對(duì)象內(nèi)部的方法賦值給一個(gè)變量，this的指向呢？

    let a = {
        b: {
            aP: 'Hello',
            bF: function() {
                console.log(this);
            }
        }
    };
   let hello=a.b.bF;
   hello();//window

上面代碼中，bF是多層對(duì)象內(nèi)部的一個(gè)方法。為求簡便，將其賦值給hello變量，結(jié)果調(diào)用時(shí)，this指向了頂層對(duì)象。

    let a = {
        b: {
            aP: 'Hello',
            bF: function() {
                console.log(this);
            }
        }
    };
   let hello=a.b;
   console.log(hello);//{aP: "Hello", bF: ?}
   hello.bF();//{aP: "Hello", bF: ?}

上面代碼中，為了避免這個(gè)問題，可以只將m所在的對(duì)象賦值給hello，這樣調(diào)用時(shí)，this的指向就不會(huì)變。
遇到多層的要是看不出，記住只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰，實(shí)際上this的最終指向的是那個(gè)調(diào)用它的對(duì)象。

4.使用注意點(diǎn)

4.1避免多層 this

由于this的指向是不確定的，所以切勿在函數(shù)中包含多層的this。

let obj = {
        f1: function () {
            console.log(this);
            let f2 = function () {
                console.log(this);
            }();
        }
    }
    obj.f1();
//{f1: ?}
//window

上面代碼包含兩層this，結(jié)果運(yùn)行后，第一層指向?qū)ο髈bj，第二層指向全局對(duì)象，因?yàn)閷?shí)際執(zhí)行時(shí)，等同下面的代碼。

    let temp = function () {
        console.log(this);
    };
    let obj = {
        f1: function () {
            console.log(this);
            let f2 = temp();
        }
    }
    obj .f1();

看到這里會(huì)不會(huì)有點(diǎn)意外？為什么對(duì)象內(nèi)部定義的函數(shù)，卻不屬于該對(duì)象。一開始也是云里霧里，后來查閱了一些資料發(fā)現(xiàn)：
對(duì)象的內(nèi)部函數(shù)執(zhí)行時(shí)，沒有被當(dāng)前對(duì)象所調(diào)用，因而this指向了全局對(duì)象window，所以上面的代碼就成立
要想更加詳細(xì)了解，可以參考這篇文章，值得一看，給了我很大幫助，我這篇主要是為自己準(zhǔn)備，存在理解上的偏差和不足。
怎么讓兩個(gè)this保持一致呢？那就在f1方法內(nèi)添加指向外層this的變量。

    let obj = {
        f1: function () {
            console.log(this);
            let _that = this;
            let f2 = function () {
                console.log(_that);
            }();
        }
    }
    obj.f1();
    //{f1: ?}
    //{f1: ?}

上面代碼定義了變量_that，固定指向外層的this，然后在內(nèi)層使用_that，就不會(huì)發(fā)生this指向的改變。
另外，JavaScript 提供了嚴(yán)格模式，也可以硬性避免這種問題。嚴(yán)格模式下，如果函數(shù)內(nèi)部的this指向頂層對(duì)象，就會(huì)報(bào)錯(cuò)。

4.2避免數(shù)組處理方法中的 this

數(shù)組的map和foreach方法，允許提供一個(gè)函數(shù)作為參數(shù)。這個(gè)函數(shù)內(nèi)部不應(yīng)該使用this。

    let obj = {
        v: 'hello',
        p: [ 'a1', 'a2' ],
        f: function f() {
            this.p.forEach(function (item) {
                console.log(this.v + ' ' + item);
            });
        }
    }
    obj.f();
//undefined a1
//undefined a2

上面代碼中，this其實(shí)是指向window對(duì)象，因此取不到obj .v的值。原因跟上一段的多層this是一樣的，foreach方法為回調(diào)函數(shù)，運(yùn)行的環(huán)境在window中，所以內(nèi)層的this不指向外部，而指向頂層對(duì)象。
解決這個(gè)問題，第一，可以使用中間變量固定this；第二，foreach可以設(shè)置第二個(gè)參數(shù)，設(shè)置函數(shù)內(nèi)部的this對(duì)象，這樣把內(nèi)部的this設(shè)置指向外部，固定它的運(yùn)行環(huán)境。第三，還可以使用箭頭函數(shù)，保障this指向。具體可以去查一下箭頭函數(shù)相關(guān)資料。箭頭函數(shù)和其他函數(shù)有個(gè)明顯的區(qū)別：箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定。箭頭函數(shù)的this在定義時(shí)就確定，就是所在作用域。

4.3避免回調(diào)函數(shù)中的 this

回調(diào)函數(shù)中的this往往會(huì)改變指向，最好避免使用（4.2中也是回調(diào)函數(shù)，容易忘記?。?br> 回調(diào)函數(shù)，是在設(shè)置回調(diào)函數(shù)的對(duì)象的環(huán)境中被調(diào)用的。所以this的指向會(huì)根據(jù)設(shè)置回調(diào)函數(shù)的對(duì)象變化而變化。
為了解決這個(gè)問題，可以采用下面的一些方法對(duì)this進(jìn)行綁定，也就是使得this固定指向某個(gè)對(duì)象，減少不確定性。

5.綁定 this 的方法

javaScript 提供了call、apply、bind這三個(gè)方法，來切換/固定this的指向。

5.1Function.prototype.call()

函數(shù)實(shí)例的call方法，可以指定函數(shù)內(nèi)部this的指向（即函數(shù)執(zhí)行時(shí)所在的作用域），然后在所指定的作用域中，調(diào)用該函數(shù)。

call方法可以接受多個(gè)參數(shù),第一個(gè)參數(shù)就是this所要指向的那個(gè)對(duì)象，后面的參數(shù)則是函數(shù)調(diào)用時(shí)所需的參數(shù)

func.call(thisValue, arg1, arg2, ...)
function add(a, b) {
   console.log(a + b);
}
add.call(this, 1, 2) // 3

call方法的第一個(gè)參數(shù)為個(gè)對(duì)象。如果參數(shù)為空、null和undefined，則默認(rèn)傳入全局對(duì)象。

    let obj = {};
    let f = function () {
        console.log(this);
    };
    f()// Window
    f.call();// Window
    f.call(null);// Window
    f.call(undefined);// Window
    f.call(window);// Window
    f.call(obj); // obj

call方法的應(yīng)用：調(diào)用對(duì)象的原生方法

    let obj = {};
    console.log(obj.hasOwnProperty('toString')); // false
    // 覆蓋掉繼承的 hasOwnProperty 方法
    obj.hasOwnProperty = function () {
        return true;
    };
    console.log(obj.hasOwnProperty('toString')); // true
    console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); // false

上面代碼中，hasOwnProperty是obj對(duì)象繼承的方法，如果這個(gè)方法一旦被覆蓋，就不會(huì)得到正確結(jié)果。call方法可以解決這個(gè)問題，它將hasOwnProperty方法的原始定義放到obj對(duì)象上執(zhí)行，這樣無論obj上有沒有同名方法，都不會(huì)影響結(jié)果。

5.2Function.prototype.apply()

apply方法的作用與call方法類似，也是改變this指向，然后再調(diào)用該函數(shù)。唯一的區(qū)別就是，它接收一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù)，使用格式如下

func.apply(thisValue, [arg1, arg2, ...])

apply方法的第一個(gè)參數(shù)也是this所要指向的那個(gè)對(duì)象，如果設(shè)為null或undefined，則等同于指定全局對(duì)象。第二個(gè)參數(shù)則是一個(gè)數(shù)組，該數(shù)組的所有成員依次作為參數(shù)，傳入原函數(shù)。原函數(shù)的參數(shù)，在call方法中必須一個(gè)個(gè)添加，但是在apply方法中，必須以數(shù)組形式添加。

function f(x, y){
  console.log(x + y);
}
f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

apply方法的應(yīng)用：

1.找出數(shù)組最大元素

  let a = [12, 5, 9, 32,2];
  console.log(Math.max.apply(null, a)); // 32

JavaScript 不提供找出數(shù)組最大元素的函數(shù)。結(jié)合使用apply方法和Math.max方法，就可以返回?cái)?shù)組的最大元素。
2.將數(shù)組的空元素變?yōu)閡ndefined

 let a = [12, , 9,,2,'A'];
console.log(JSON.stringify(Array.apply(null,a)));//[12,null,9,null,2,"A"]

通過apply方法，利用Array構(gòu)造函數(shù)將數(shù)組的空元素變成undefined?？赵嘏cundefined的差別在于，數(shù)組的forEach方法會(huì)跳過空元素，但是不會(huì)跳過undefined。因此，遍歷內(nèi)部元素的時(shí)候，會(huì)得到不同的結(jié)果。
3.轉(zhuǎn)換類似數(shù)組的對(duì)象

   let newArr1 = Array.prototype.slice.apply({0: 1, length: 1});
    console.log(JSON.stringify(newArr1));// [1]
    let newArr2 = Array.prototype.slice.apply({0: 1});
    console.log(JSON.stringify(newArr2));// []
    let newArr3 = Array.prototype.slice.apply({0: 1, length: 2});
    console.log(JSON.stringify(newArr3));// [1, null]
    let newArr4 = Array.prototype.slice.apply({length: 1});
    console.log(JSON.stringify(newArr4));// [null]

上面代碼的apply方法的參數(shù)都是對(duì)象，但是返回結(jié)果都是數(shù)組，這就起到了將對(duì)象轉(zhuǎn)成數(shù)組的目的。從上面代碼可以看到，這個(gè)方法起作用的前提是，被處理的對(duì)象必須有l(wèi)ength屬性，以及相對(duì)應(yīng)的數(shù)字鍵。
4.綁定回調(diào)函數(shù)的對(duì)象

var o = new Object();
o.f = function () {
  console.log(this === o);
}
var f = function (){
  o.f.apply(o);
  // 或者 o.f.call(o);
};
// jQuery 的寫法
$('#button').on('click', f);

上面代碼中，點(diǎn)擊按鈕以后，控制臺(tái)將會(huì)顯示true。由于apply方法（或者call方法）不僅綁定函數(shù)執(zhí)行時(shí)所在的對(duì)象，還會(huì)立即執(zhí)行函數(shù)，因此不得不把綁定語句寫在一個(gè)函數(shù)體內(nèi)。更簡潔的寫法是采用下面介紹的bind方法。

5.3Function.prototype.bind()

bind方法用于將函數(shù)體內(nèi)的this綁定到某個(gè)對(duì)象，然后返回一個(gè)新函數(shù)

    let counter = {
        count: 0,
        add: function () {
            this.count++;
        }
    };
    let func = counter.add.bind(counter);
    func();
    func();
    console.log(counter.count);//2

上面代碼中，counter.add方法被賦值給變量func。這時(shí)必須用bind方法將add內(nèi)部的this，綁定到counter，否則就會(huì)出錯(cuò)。

    let counter = {
        count: 0,
        add: function () {
            this.count++;
        }
    };
    let func = counter.add;
    func();
    func();
    console.log(counter.count);//0

this綁定到其他對(duì)象也是可以的

    let counter = {
        count: 0,
        add: function () {
            this.count++;
        }
    };
    let obj = {
        count: 100
    };
    let func = counter.add.bind(obj);
    func();
    console.log(counter.count);//0
    console.log(obj.count);//101

上面代碼中，bind方法將add方法內(nèi)部的this，綁定到obj對(duì)象。結(jié)果調(diào)用func函數(shù)以后，遞增的就是obj內(nèi)部的count屬性，counter的count沒有變化。

bind還可以接受更多的參數(shù)，將這些參數(shù)綁定原函數(shù)的參數(shù)

    let add = function (x, y) {
        return x * this.m + y * this.n;
    };
    let obj = {
        m: 2,
        n: 3
    };
    let newAdd = add.bind(obj, 1, 5);
    console.log(newAdd()); // 25

上面代碼中，bind方法除了綁定this對(duì)象，還將add函數(shù)的第一個(gè)參數(shù)x綁定成1，第二個(gè)綁定成5，然后返回一個(gè)新函數(shù)newAdd，這個(gè)函數(shù)不用傳參可以調(diào)用。如果帶一個(gè)參數(shù)，則賦值給x,在調(diào)用newAdd時(shí)，只要再傳一個(gè)參數(shù)給y就可以。

如bind方法的第一個(gè)參數(shù)是null或undefined，等于將this綁定到全局對(duì)象，函數(shù)運(yùn)行時(shí)this指向頂層對(duì)象（瀏覽器為window）。

    var number=5;
    let obj ={
        number:1,
    }
    function add(x, y) {
        return x + y+this.number;
    }
    let result = add.bind(obj, 5);
    console.log(result(10)); // 16
    let result2 = add.bind(null, 5);
    console.log(result2(10)); // 20

bind方法注意事項(xiàng)

1.每一次返回一個(gè)新函數(shù)

bind方法每運(yùn)行一次，就返回一個(gè)新函數(shù)，這會(huì)產(chǎn)生一些問題。比如，監(jiān)聽事件的時(shí)候，不能寫成下面這樣：

element.addEventListener('click', o.m.bind(o));

上面代碼中，click事件綁定bind方法生成的一個(gè)匿名函數(shù)。這樣會(huì)導(dǎo)致無法取消綁定，所以，下面的代碼是無效的:

element.removeEventListener('click', o.m.bind(o));

正確的方法是寫成下面這樣：

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

2.結(jié)合回調(diào)函數(shù)使用

回調(diào)函數(shù)是 JavaScript 最常用的模式之一，但是一個(gè)常見的錯(cuò)誤是，將包含this的方法直接當(dāng)作回調(diào)函數(shù)。解決方法就是使用bind方法，將counter.add綁定counter。

    let counter = {
        count: 0,
        add: function () {
            console.log(this);
            this.count++;
        }
    };
    function callIt(callback) {
        callback();
    }
    callIt(counter.add);
    console.log(counter.count); // 0
    callIt(counter.add.bind(counter));
    console.log(counter.count); // 1

上面代碼中，callIt方法會(huì)調(diào)用回調(diào)函數(shù)。這時(shí)如果直接把counter.add傳入，調(diào)用時(shí)counter.add內(nèi)部的this就會(huì)指向全局對(duì)象。使用bind方法將counter.add綁定counter以后，就不會(huì)有這個(gè)問題，this總是指向counter。
另外，數(shù)組的操作，接受一個(gè)函數(shù)當(dāng)作參數(shù)，里面使用this,也需要注意，前面已經(jīng)有說明就不累贅了。

3.結(jié)合call方法使用

利用bind方法，可以改寫一些 JavaScript 原生方法的使用形式，以數(shù)組的slice方法為例。

[1, 2, 3].slice(0, 1) // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]
//等價(jià)于
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]

上面代碼，call方法實(shí)質(zhì)上是調(diào)用Function.prototype.call方法，通過bind方法將Array.prototype.slice變成Function.prototype.call方法所在的對(duì)象，調(diào)用時(shí)就變成了Array.prototype.slice.call。
類似的寫法還可以用于其他數(shù)組方法

let push = Function.prototype.call.bind(Array.prototype.push);
let pop = Function.prototype.call.bind(Array.prototype.pop);
let a = [1 ,2 ,3];
push(a, 4)
a // [1, 2, 3, 4]
pop(a)
a // [1, 2, 3]

如果將Function.prototype.call方法綁定到Function.prototype.bind對(duì)象，就意味著bind的調(diào)用形式也可以被改寫。

function f() {
  console.log(this.v);
}
let o = { v: 123 };
let bind = Function.prototype.call.bind(Function.prototype.bind);
bind(f, o)() // 123

上面代碼的含義就是，將Function.prototype.bind方法綁定在Function.prototype.call上面，所以bind方法就可以直接使用，不需要在函數(shù)實(shí)例上使用。