淺談javascript里面的this、call、apply、bind

Lemon_95 發(fā)布于2019-08-22 11:21 / 3549人閱讀

摘要：如果該參數(shù)的值為或，則表示不需要傳入任何參數(shù)，從開(kāi)始可以使用類(lèi)數(shù)組對(duì)象。當(dāng)使用操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。當(dāng)綁定函數(shù)被調(diào)用時(shí)，這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。

在了解call,apply之前需要先了解下javascrit中this指向

this的指向
在ES5里面，this永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象
舉個(gè)栗子：

var name = "outerName";
function test(){
    var name = "innerName";
    console.log(this.name);  //outerName
    console.log("inner:" + this);  //inner:Window
}
test();
console.log("outer:"+this);//outer:Window

我們最后調(diào)用test的地方test();,前面沒(méi)有調(diào)用的對(duì)象那么就是全局對(duì)象window,相當(dāng)于window.test();注意這里沒(méi)有使用嚴(yán)格模式，如果使用嚴(yán)格模式，全局對(duì)象就是undefined,那么就會(huì)報(bào)錯(cuò)Uncaught TypeError:cannot read property "name" of underfined

在舉個(gè)栗子：

var name = "outerName";
var test = {
    name:"innerName",
    fn:function(){
        console.log(this.name); //innerName
    }
};
test.fn();
window.test.fn();

這里打出的是innerName，因?yàn)閒n是test調(diào)用的

還有個(gè)略坑的栗子：

var name = "outerName";
var test = {
    name:null,
    fn:function(){
        console.log(this.name); //outerName
    }
};
var f = test.fn
f();

這里打出的outerName因?yàn)閒并沒(méi)有被調(diào)用，fn()仍然是window調(diào)用的

再看看這個(gè)栗子：

var name = "outerName";
function fn(){
    var name = "innnerName";
    innerFn();
    function innerFn(){
        console.log(this.name); //outerName
    }
};
fn();

這里打出的是outerName，因?yàn)槿匀皇莣indow調(diào)用的

總結(jié)一下：
this的指向并不是在創(chuàng)建的時(shí)候就可以確定的，在ES5里面，this永遠(yuǎn)是指向最后調(diào)用它的那個(gè)對(duì)象。

改變this指向

那我們?cè)趺床拍芨淖僼his指向呢，總結(jié)一下

使用ES6的箭頭函數(shù)

在函數(shù)內(nèi)部使用_this=this;

使用call、apply、bind

new 實(shí)例化一個(gè)對(duì)象

繼續(xù)看一個(gè)栗子：

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        },0);
    }
};
test.fn2(); //this.fn1 is not a funtion

箭頭函數(shù)
ES6中的箭頭函數(shù)是可以避免ES5中的this的坑的，箭頭函數(shù)始終指向定義時(shí)的this，而非執(zhí)行時(shí)。
箭頭函數(shù)中沒(méi)有this綁定，必須通過(guò)查找作用域鏈來(lái)覺(jué)得其值，如果箭頭函數(shù)被非箭頭函數(shù)包含，那么this綁定的是最近一層非箭頭函數(shù)的this,否則，this為undefined.
調(diào)整后的栗子：

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(() => {
            this.fn1(); 
        },0);
    }
};
test.fn2(); //mm

在函數(shù)內(nèi)部使用_this = this
_this指的是test對(duì)象

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        var _this = this;
        setTimeout(function(){
            _this.fn1(); 
        },0);
    }
};
test.fn2(); //mm

使用call,apply,bind

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        }.apply(test),0);
    }
};
test.fn2(); //mm

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        }.call(test),0);
    }
};
test.fn2(); //mm

var name = "outerName";
var test = {
    name:"mm",
    fn1:function(){
        console.log(this.name);
    },
    fn2:function(){
        setTimeout(function(){
            this.fn1(); 
        }.bind(test)(),0);
    }
};
test.fn2(); //mm

具體有什么區(qū)別呢
看下MDN上的解釋

apply
語(yǔ)法：
fun.apply(thisArg,[argsArray]);
參數(shù)
thisArg
在fun函數(shù)運(yùn)行時(shí)指定的this值，需要注意的是，指定的this的值不一定是該函數(shù)執(zhí)行時(shí)真正的this值，如果這個(gè)函數(shù)處于非嚴(yán)格模式下，則指定為null或undefined時(shí)會(huì)自動(dòng)指向全局對(duì)象（瀏覽器中就是window對(duì)象），同時(shí)值為原始值（數(shù)字，字符串，布爾值）的this會(huì)指向該原始值的自動(dòng)包裝對(duì)象。
argsArray
一個(gè)數(shù)組或者類(lèi)數(shù)組對(duì)象，其中數(shù)組原始將作為多帶帶的參數(shù)傳給fun函數(shù)。如果該參數(shù)的值為null或undefined，則表示不需要傳入任何參數(shù)，從ECMAScript5開(kāi)始可以使用類(lèi)數(shù)組對(duì)象。

call
語(yǔ)法
fun.call(thisArg,arg1,arg2,...)
參數(shù)
thisArg
同上apply
arg1,agr2,...
指定的參數(shù)列表

bind
語(yǔ)法
fun.bind(thisArg[,arg1[,arg2[,...]]])
參數(shù)
thisArg
當(dāng)綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的this指向。當(dāng)使用new操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。
arg1,arg2,...
當(dāng)綁定函數(shù)被調(diào)用時(shí)，這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。

在總結(jié)一下：
apply,call,bind都是用來(lái)改變函數(shù)的this對(duì)象的指向；
第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是指定的上下文；
都可以利用后續(xù)參數(shù)傳參；
apply,call是立即調(diào)用，bind是返回對(duì)應(yīng)函數(shù)，需要手動(dòng)調(diào)用。

云服務(wù)器 GPU云服務(wù)器 JS中bind、call和apply的作 apply與call的區(qū)別 js里面的this js中的call和apply

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92250.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Lemon_95

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

手寫(xiě)HashMap，快手面試官直呼內(nèi)行！

閱讀 1836·2021-11-24 09:39
怎么快速成為一名JAVA程序猿?

閱讀 2304·2021-09-30 09:47
缺省主機(jī)連接數(shù)限制是什么-路由器的缺省網(wǎng)關(guān)是什么意思？

閱讀 4173·2021-09-22 15:57
css魔法——左邊豎條的實(shí)現(xiàn)方法

閱讀 1893·2019-08-29 18:36
關(guān)于一些Vue的文章。（1）

閱讀 3591·2019-08-29 12:21
前端開(kāi)源項(xiàng)目周報(bào)0321

閱讀 604·2019-08-29 12:17
（CSS） px，pt，em，rem的區(qū)別

閱讀 1277·2019-08-29 11:25
讓footer固定在頁(yè)面（視口）底部

閱讀 738·2019-08-28 18:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談javascript里面的this、call、apply、bind

相關(guān)文章

淺談-this

**淺談call()、apply()、bind()方法**

**淺談 javascript 中的this綁定問(wèn)題**

***call,apply* and bind in *JavaScript***

js基礎(chǔ)深入淺出

發(fā)表評(píng)論

0條評(píng)論

Lemon_95

男|高級(jí)講師

TA的文章

手寫(xiě)HashMap，快手面試官直呼內(nèi)行！

怎么快速成為一名JAVA程序猿?

缺省主機(jī)連接數(shù)限制是什么-路由器的缺省網(wǎng)關(guān)是什么意思？

css魔法——左邊豎條的實(shí)現(xiàn)方法

關(guān)于一些Vue的文章。（1）

前端開(kāi)源項(xiàng)目周報(bào)0321

（CSS） px，pt，em，rem的區(qū)別

讓footer固定在頁(yè)面（視口）底部

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談javascript里面的this、call、apply、bind

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談javascript里面的this、call、apply、bind