摘要：目錄一理解指針意義二用解決指針指向問題三的使用場景與少用之處一理解指針意義讓我們先理解好指針的定義引用的是函數(shù)執(zhí)行的環(huán)境對(duì)象永遠(yuǎn)指向的是最后調(diào)用它的對(duì)象，也就是看它執(zhí)行的時(shí)候是誰調(diào)用的通俗地講，就是誰調(diào)用，就指向誰我們分類舉例舉例前先看下本

一.理解this指針意義
二.用call(),apply(),bind()解決指針指向問題
三.bind()的使用場景與少用之處

讓我們先理解好this指針的定義：

this引用的是函數(shù)執(zhí)行的環(huán)境對(duì)象

this永遠(yuǎn)指向的是最后調(diào)用它的對(duì)象，也就是看它執(zhí)行的時(shí)候是誰調(diào)用的

通俗地講，就是誰調(diào)用this，this就指向誰,我們分類舉例

舉例前先看下本文會(huì)一直用到的變量及定義的函數(shù)

var theName = "Joe";    //全局變量

function showName() {
   var theName = "Li";
   alert(this.theName);
}

showName();    //彈出“Joe”

因?yàn)槭?b>window對(duì)象調(diào)用showName()，所以this指向window啦，故彈出"Joe"

var student1 = {
   theGrade : 100,
   theName : "Han",
   showName : showName,
   showGrade : function () {
      alert(this.theGrade);
   }
};
student1.showName();//彈出“Han”
student1.showGrade();//彈出“100”

因?yàn)槭窃?b>student1對(duì)象調(diào)用函數(shù)，故彈出的是對(duì)應(yīng)student1對(duì)象中的"Han"和“100”啦

var student2 = {
   theGrade: 60,
   showGrade: student1.showGrade
};
student2.showGrade();    //彈出"60"

即使student2對(duì)象調(diào)用了student1對(duì)象下的方法showGrade(),因?yàn)槭?b>student2對(duì)象調(diào)用，故彈出的仍是student2的"60"

var outFunction = student1.showGrade;
outFunction();//彈出“undefined”

將sutdent1對(duì)象的函數(shù)賦值給oufFuncction，而outFunction是在window對(duì)象下調(diào)用的，故彈出“undefined”

function setStudent() {
   this.theName = "Ming";
}
var student3 = new setStudent();
alert(student3.theName);//彈出“Ming”，new改變this指向

構(gòu)造函數(shù)下，new改變了指針指向，指向了student3

關(guān)鍵：閉包保存創(chuàng)建時(shí)的環(huán)境?。?！

舉個(gè)例子

為了更好理解閉包與指針的關(guān)系，我們先定義一個(gè)全局變量，一個(gè)函數(shù)，和一個(gè)對(duì)象

var example = "window";//全局變量

function showExample() {
   console.log(this.example);
}

var exampleObject = {
   example : "Object",
   showExample_in_Object : function (arg1, arg2) {
      console.log(this.example);
      console.log(arg1,arg2)
   }
};

接著，我們?cè)O(shè)置一個(gè)事件監(jiān)聽來說明問題：

//事件監(jiān)聽
var btn = document.getElementById("btn");
btn.onclick = function (ev) {
   console.log(this); //this指向按鈕，執(zhí)行匿名函數(shù)的是btn
   this.example = "ele";
   console.log(this.example);//彈出"ele"
   showExample(); //閉包保存函數(shù)創(chuàng)建時(shí)的環(huán)境，故this指向window對(duì)象 
   exampleObject.showExample_in_Object();//this指向exampleObject
};

結(jié)果：

接下來分段說明各個(gè)指針

其中

????this.example = "ele";

????console.log(this.example);

其中的this指向btn，所以顯示的是‘ele’

而

????showExample(); ?? ??

????exampleObject.showExample_in_Object();?? ?

在匿名函數(shù)中為閉包，閉包保存函數(shù)創(chuàng)建時(shí)的環(huán)境，故this分別指向window和exampleObject

補(bǔ)充對(duì)閉包中this的理解：https://segmentfault.com/q/10...

以上是部分this指針的理解

如果我在事件監(jiān)聽中想要減少代碼重復(fù)，或者是調(diào)用其他對(duì)象的屬性呢？

如果我想用btn.addEventListener()時(shí)指向的某個(gè)特定對(duì)象呢？

這就可以引出下面call()，apply()與bind()的應(yīng)用了

function User(id){
    this.id = id;
}
User.prototype.test = function(){
    console.log(this);//指向b對(duì)象

   (function(){
    console.log(this) //指向window
})()
}
var a = new User("a")
a.test(); 

因?yàn)樽詧?zhí)行函數(shù)是由window執(zhí)行的
如果此時(shí)使用箭頭函數(shù)

function User2(id){
    this.id = id;
}
User.prototype.test = function(){
    console.log(this); //指向b對(duì)象

   (() =>{
    console.log(this) //指向b對(duì)象
})()
}
var b = new User2("b");
b.test(); 

因?yàn)榧^函數(shù)不會(huì)綁定this，所以指向上一層的b對(duì)象

call()與apply()的作用都是在特定的作用域中調(diào)用函數(shù)，實(shí)際上等于設(shè)置函數(shù)體內(nèi)設(shè)置this對(duì)象的值

簡單地說，就是可以改變函數(shù)的執(zhí)行環(huán)境

call()與allpy()效果相同，僅是傳參形式不同，如下所示

call():

fun.call(thisArg,?arg1,?arg2, ...)

thisArg : fun函數(shù)運(yùn)行時(shí)指定的this值

arg1,arg2,.. (可選)：指定的各個(gè)參數(shù)

apply():

func.apply(thisArg, [argsArray])

thisArg : fun函數(shù)運(yùn)行時(shí)指定的this值

[argsArray](可選) ： 傳參數(shù)組或者傳參類數(shù)組

下面直接看例子吧

我們以上面的例子進(jìn)行修改，為了對(duì)比傳參的形式，我們對(duì)showExample函數(shù)添加兩個(gè)參數(shù)

function showExample(arg1,arg2) {
   console.log(this.example);
   console.log(arg1,arg2);
}

接下來便是btn的點(diǎn)擊事件函數(shù)修改，我們令showExample函數(shù)指向exampleObject

//call與apply的應(yīng)用
btn.onclick = function (ev) {
   showExample.call(exampleObject,111,222); //彈出"Object" ，111與222是傳參示例
   showExample.apply(exampleObject,[111,222]); //彈出"Object" ，[111,222]是傳參示例
};
彈出"Object" ，111與222是傳參示例
   showExample.apply(exampleObject,[111,222]); //彈出"Object" ，[111,222]是傳參示例
};

如上，通過call()與apply()的應(yīng)用，可以改變函數(shù)的指向而多次運(yùn)用

如果我想便于調(diào)試想使用ele.addEventListener()嘞?

這就要用上bind()方法了

fun.bind(thisArg[, arg1[, arg2[, ...]]])

MDN?： bind()方法創(chuàng)建一個(gè)新的函數(shù), 當(dāng)被調(diào)用時(shí)，將其this關(guān)鍵字設(shè)置為提供的值， ，在調(diào)用新函數(shù)時(shí)，在任何提供之前提供一個(gè)給定的參數(shù)序列。

我們?cè)倥e個(gè)簡單的例子，將exampleObject簡單修改下

var exampleObject = {
   example : "Object",
   showExample_in_Object : function (arg1, arg2) {
      console.log(this);
      console.log("example："+ this.example);
      console.log("arg1：" + arg1);
      console.log("arg2：" + arg2);
   }
};

并把showExample_in_Object()函數(shù)添加給btn

注意這里的是函數(shù)，不是閉包！

btn.addEventListener("click",exampleObject.showExample_in_Object);

控制臺(tái)顯示如下

?? ??? ??? ?

可以看出this指向的是btn，而無法滿足我們使用exampleObject中屬性的需要，同時(shí)也無法進(jìn)行傳參（用call()與apply()就直接執(zhí)行函數(shù)了！）

（這里的沒有對(duì)第一個(gè)參數(shù)arg1進(jìn)行傳參，故默認(rèn)顯示MouseEvent對(duì)象）

這時(shí)我們可以用bind()方法創(chuàng)建一個(gè)新的函數(shù)，并讓其指針指向exampleObject，并傳兩個(gè)新的參數(shù)進(jìn)去

btn.addEventListener("click",exampleObject.showExample_in_Object.bind(exampleObject,111,222));

當(dāng)當(dāng)~指針指向了exampleObject，傳參也成功了~

另外，這里也有個(gè)可以不使用bind()的方法，就是也用閉包啦

btn.addEventListener("click",function () {
    exampleObject.showExample_in_Object(111,222);
});

結(jié)果一樣，但這種方法不利于代碼的維護(hù)，同時(shí)也無法指向特定的對(duì)象? ??

使用場景：主要用于如上的事件監(jiān)聽，以及setTimeout()和setInterval()

少用之處：被綁定的函數(shù)與普通函數(shù)相比有更多的開銷，它們需要更多的內(nèi)存，同時(shí)也因?yàn)槎嘀睾瘮?shù)調(diào)用稍微慢一點(diǎn)，所以最好只在必要時(shí)使用

以上，如有不對(duì)之處，請(qǐng)大家指教

? ??徹底理解this指針:? ??https://www.cnblogs.com/pssp/...

? ? MDN:bind():?? ?https://developer.mozilla.org...

?? ?MDN:apply():https://developer.mozilla.org...

?? ?MDN:call():?? ?https://developer.mozilla.org...

?? ?《JavaScript高級(jí)程序設(shè)計(jì)（第3版）》

?? ?《JavaScript語言精粹》