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

資訊專欄INFORMATION COLUMN

聊一聊call、apply、bind的區(qū)別

kohoh_ / 2059人閱讀

摘要：指定的參數(shù)列表語(yǔ)法在函數(shù)運(yùn)行時(shí)指定的值。需要注意的是，指定的值并不一定是該函數(shù)執(zhí)行時(shí)真正的值，如果這個(gè)函數(shù)處于非嚴(yán)格模式下，則指定為或時(shí)會(huì)自動(dòng)指向全局對(duì)象瀏覽器中就是對(duì)象，同時(shí)值為原始值數(shù)字，字符串，布爾值的會(huì)指向該原始值的自動(dòng)包裝對(duì)象。

我們都知道call apply bind都可以改變函數(shù)調(diào)用的this指向。那么它們?nèi)哂惺裁磪^(qū)別，什么時(shí)候該用哪個(gè)呢？
我們先直接通過(guò)代碼實(shí)例來(lái)了解，后面再借助專業(yè)文檔來(lái)解釋。

舉個(gè)? 
// 有只貓叫小黑，小黑會(huì)吃魚
const cat = {
    name: "小黑",
    eatFish(...args) {
        console.log("this指向=>", this);
        console.log("...args", args);
        console.log(this.name + "吃魚");
    },
}
// 有只狗叫大毛，大毛會(huì)吃骨頭
const dog = {
    name: "大毛",
    eatBone(...args) {
        console.log("this指向=>", this);
        console.log("...args", args);
        console.log(this.name + "吃骨頭");
    },
}

console.log("=================== call =========================");
// 有一天大毛想吃魚了，可是它不知道怎么吃。怎么辦？小黑說(shuō)我吃的時(shí)候喂你吃
cat.eatFish.call(dog, "汪汪汪", "call")
// 大毛為了表示感謝，決定下次吃骨頭的時(shí)候也喂小黑吃
dog.eatBone.call(cat, "喵喵喵", "call")

console.log("=================== apply =========================");
cat.eatFish.apply(dog, ["汪汪汪", "apply"])
dog.eatBone.apply(cat, ["喵喵喵", "apply"])

console.log("=================== bind =========================");
// 有一天他們覺得每次吃的時(shí)候再喂太麻煩了。干脆直接教對(duì)方怎么吃
const test1 = cat.eatFish.bind(dog, "汪汪汪", "bind")
const test2 = dog.eatBone.bind(cat, "喵喵喵", "bind")
test1()
test2()

好了例子很簡(jiǎn)單但是基本的使用方法跟場(chǎng)景都涉及到了。

call跟apply的用法幾乎一樣，唯一的不同就是傳遞的參數(shù)不同，call只能一個(gè)參數(shù)一個(gè)參數(shù)的傳入。
apply則只支持傳入一個(gè)數(shù)組，哪怕是一個(gè)參數(shù)也要是數(shù)組形式。最終調(diào)用函數(shù)時(shí)候這個(gè)數(shù)組會(huì)拆成一個(gè)個(gè)參數(shù)分別傳入。
至于bind方法，他是直接改變這個(gè)函數(shù)的this指向并且返回一個(gè)新的函數(shù)，之后再次調(diào)用這個(gè)函數(shù)的時(shí)候this都是指向bind綁定的第一個(gè)參數(shù)。bind傳餐方式跟call方法一致。

由于apply函數(shù)傳參的特殊性，我們又衍生出了一個(gè)黑魔法。 
// 如果一個(gè)數(shù)組我們已知里面全都是數(shù)字，想要知道最大的那個(gè)數(shù)，由于Array沒(méi)有max方法，Math對(duì)象上有
// 我們可以根據(jù)apply傳遞參數(shù)的特性將這個(gè)數(shù)組當(dāng)成參數(shù)傳入
// 最終Math.max函數(shù)調(diào)用的時(shí)候會(huì)將apply的數(shù)組里面的參數(shù)一個(gè)一個(gè)傳入，恰好符合Math.max的參數(shù)傳遞方式
// 這樣變相的實(shí)現(xiàn)了數(shù)組的max方法。min方法也同理
const arr = [1,2,3,4,5,6]
const max = Math.max.apply(null, arr)
console.log(max)    // 6
這里bind函數(shù)也有一個(gè)小技巧 
// 如果你想將某個(gè)函數(shù)綁定新的`this`指向并且固定先傳入幾個(gè)變量可以在綁定的時(shí)候就傳入，之后調(diào)用新函數(shù)傳入的參數(shù)都會(huì)排在之后
const obj = {}
function test(...args) {console.log(args)}
const newFn = test.bind(obj, "靜態(tài)參數(shù)1", "靜態(tài)參數(shù)2")
newFn("動(dòng)態(tài)參數(shù)3", "動(dòng)態(tài)參數(shù)4")

接著來(lái)看看MDN文檔 call語(yǔ)法

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

thisArg: 在fun函數(shù)運(yùn)行時(shí)指定的this值。需要注意的是，指定的this值并不一定是該函數(shù)執(zhí)行時(shí)真正的this值，如果這個(gè)函數(shù)處于非嚴(yán)格模式下，則指定為null和undefined的this值會(huì)自動(dòng)指向全局對(duì)象(瀏覽器中就是window對(duì)象)，同時(shí)值為原始值(數(shù)字，字符串，布爾值)的this會(huì)指向該原始值的自動(dòng)包裝對(duì)象。

arg1, arg2, ... 指定的參數(shù)列表

apply語(yǔ)法

fun.apply(thisArg, [argsArray])

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ù)組或者類數(shù)組對(duì)象，其中的數(shù)組元素將作為多帶帶的參數(shù)傳給 fun 函數(shù)。如果該參數(shù)的值為null 或 undefined，則表示不需要傳入任何參數(shù)。從ECMAScript 5 開始可以使用類數(shù)組對(duì)象。

bind語(yǔ)法

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

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é)

當(dāng)我們使用一個(gè)函數(shù)需要改變this指向的時(shí)候才會(huì)用到call`apply`bind

如果你要傳遞的參數(shù)不多，則可以使用fn.call(thisObj, arg1, arg2 ...)

如果你要傳遞的參數(shù)很多，則可以用數(shù)組將參數(shù)整理好調(diào)用fn.apply(thisObj, [arg1, arg2 ...])

如果你想生成一個(gè)新的函數(shù)長(zhǎng)期綁定某個(gè)函數(shù)給某個(gè)對(duì)象使用，則可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

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

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

相關(guān)文章

  • underscore 源碼解讀之 bind 方法的實(shí)現(xiàn)

    摘要：概括地講，如果構(gòu)造函數(shù)有返回值，且返回值是對(duì)象不能是，那么對(duì)其進(jìn)行操作返回該對(duì)象，否則返回構(gòu)造實(shí)例。所以在方法中，我們需要進(jìn)一步判斷這個(gè)構(gòu)造函數(shù)有沒(méi)有返回值，返回值是不是對(duì)象。 自從進(jìn)入七月以來(lái)，我的 underscore 源碼解讀系列 更新緩慢，再這樣下去，今年更完的目標(biāo)似乎要落空，趕緊寫一篇壓壓驚。 前文 跟大家簡(jiǎn)單介紹了下 ES5 中的 bind 方法以及使用場(chǎng)景（沒(méi)讀過(guò)的同學(xué)建...

    xiaodao 評(píng)論0 收藏0

  • 面試知識(shí)點(diǎn)總結(jié)

    摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問(wèn)到的是語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過(guò)多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過(guò)大時(shí)候可以壓縮一下。 最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問(wèn)到的是ES6語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...

    王晗 評(píng)論0 收藏0

  • 面試知識(shí)點(diǎn)總結(jié)

    摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問(wèn)到的是語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。參考網(wǎng)站面試題圖片過(guò)多的時(shí)候如何優(yōu)化圖標(biāo)很多的時(shí)候可以用雪碧圖圖片過(guò)大時(shí)候可以壓縮一下。 最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問(wèn)到的是ES6語(yǔ)法，閉包，原型鏈，繼承那一塊。并且將面試題的知識(shí)點(diǎn)匯總一下。有助于下次面試。 1.H...

    CrazyCodes 評(píng)論0 收藏0

  • 聽飛狐聊JavaScript設(shè)計(jì)模式系列03

    摘要：閉包與柯里化閉包有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)?？吕锘呀邮芏鄠€(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)最初函數(shù)的第一個(gè)參數(shù)的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。 本回內(nèi)容介紹 上一回聊到JS的Object類型，簡(jiǎn)單模擬了一下Java的Map，介一講，偶們來(lái)聊一下函數(shù)好唔好，介可系JS世界的一等公民喲。從函數(shù)開始，我們就將逐步過(guò)渡到設(shè)計(jì)模式，來(lái)吧，帥狐帶你裝逼帶你飛：...

    levy9527 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<