資訊專欄INFORMATION COLUMN
摘要：當(dāng)沒(méi)有使用而直接調(diào)用時(shí)指向?qū)ο蠛瘮?shù)和函數(shù)非常的相似，第一個(gè)參數(shù)都用來(lái)設(shè)置目標(biāo)函數(shù)運(yùn)行時(shí)的指向。輸出的結(jié)果為結(jié)果證明兩個(gè)地方傳入的參數(shù)都會(huì)被傳給目標(biāo)函數(shù)，函數(shù)拷貝調(diào)用時(shí)傳入的參數(shù)會(huì)追加在函數(shù)調(diào)用時(shí)傳入的參數(shù)后面。
call() , apply() 與 bind() 詳解
我們知道可以用call(), apply() 和 bind()這三個(gè)函數(shù)都是用來(lái)完成函數(shù)調(diào)用，并且設(shè)置this指向。 call()和apply()是 ECMAScript3 標(biāo)準(zhǔn)引入，而bind()函數(shù)則是在 ECMAScript 5 引入。 這邊文章會(huì)用幾個(gè)小例子來(lái)回憶一下他們之間有什么不一樣。
用法call()和apply() 會(huì)立即調(diào)用函數(shù)， 而bind()只會(huì)返回一個(gè)函數(shù)引用，當(dāng)后面真正調(diào)用返回的函數(shù)的時(shí)候，函數(shù)里面的this將會(huì)指向給bind()函數(shù)傳入的參數(shù)，并在調(diào)用新函數(shù)時(shí)，將給定參數(shù)列表作為原函數(shù)的參數(shù)序列的前若干項(xiàng)， 所以 bind()函數(shù)非常適合在事件回調(diào)的時(shí)候修改this 指向， 有React 經(jīng)驗(yàn)的朋友應(yīng)該會(huì)有更深的感受。
call()var dist = "Beijing";
function greet(name, hometown) {
var word = `Welcome ${name} from ${hometown} to ${this.dist}!`
console.log(word);
}
var obj1 = {
dist: "Chengdu"
};
greet.call(obj1, "Tom", "Dallas"); // Welcome Tom from Dallas to Chengdu!
greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!
因?yàn)?b>greet.call(obj) 傳入了obj1作為第一個(gè)參數(shù)，所以在 greet()函數(shù)執(zhí)行時(shí), this指向 obj1。其余的參數(shù)就將作為參數(shù)傳給greet()函數(shù)。
當(dāng)沒(méi)有使用call()而直接調(diào)用greet()時(shí), this指向 window對(duì)象.
var dist = "Beijing";
function greet(name, hometown) {
var word = `Welcome ${name} from ${hometown} to ${this.dist}!`
console.log(word);
}
var obj1 = {
dist: "Chengdu"
};
var args = ["Tom", "Dallas"];
greet.apply(obj1, args); // Welcome Tom from Dallas to Chengdu!
greet("Jerry", "Houston"); // Welcome Jerry from Houston to Beijing!
apply()函數(shù)和call()函數(shù)非常的相似，第一個(gè)參數(shù)都用來(lái)設(shè)置目標(biāo)函數(shù)運(yùn)行時(shí)的this指向。 唯一的區(qū)別就是 apply()的第二個(gè)參數(shù)接受一個(gè)數(shù)組， 其他表現(xiàn)則一樣。
bind()var dist = "Beijing";
function greet(name, hometown) {
var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
console.log(word);
}
var obj1 = {
dist: "Chengdu",
};
var obj2 = {
dist: "Chongqing",
};
var greet1 = greet.bind(obj1, "Tom", "Dallas");
var greet2 = greet.bind(obj2, "Spike", "San Antonio");
greet("Jerry", "Houston");
greet1();
setTimeout(function() {
greet2();
}, 1000);
這個(gè)例子會(huì)更加復(fù)雜一點(diǎn)， 輸出結(jié)果如下：
Welcome Jerry from Houston to Beijing! Welcome Tom from Dallas to Chengdu! Welcome Spike from San Antonio to Chongqing!
在上面例子中， bind()函數(shù)并不會(huì)立即執(zhí)行目標(biāo)函數(shù)， 而是返回了一個(gè)函數(shù)的拷貝，但this會(huì)指向bind()的第一個(gè)參數(shù)，其余傳給bind()的參數(shù)都會(huì)按順序傳給返回的函數(shù)。我們就可以異步調(diào)用這個(gè)函數(shù)返回值了。但是需要注意的是，bind()方法返回的函數(shù)拷貝在使用 new 操作時(shí)， 第一個(gè)參數(shù)是會(huì)被忽略的。
那么新的問(wèn)題又來(lái)了， 如果在調(diào)用返回的函數(shù)拷貝的時(shí)候， 又傳入了新的參數(shù)， 會(huì)發(fā)生什么呢， 只有再寫(xiě)一個(gè)例子試試了。
var obj1 = {
dist: "Chengdu",
};
function greet(name, hometown) {
console.log(Array.prototype.slice.call(arguments));
var word = `Welcome ${name} from ${hometown} to ${this.dist}!`;
console.log(word);
}
var greet1 = greet.bind(obj1, "Tom", "Dallas");
greet1("Jerry", "Houston");
輸出的結(jié)果為:
[ "Tom", "Dallas", "Jerry", "Houston" ] Welcome Tom from Dallas to Chengdu!
結(jié)果證明兩個(gè)地方傳入的參數(shù)都會(huì)被傳給目標(biāo)函數(shù)，函數(shù)拷貝調(diào)用時(shí)傳入的參數(shù)會(huì)追加在bind()函數(shù)調(diào)用時(shí)傳入的參數(shù)后面。
以上就是所有關(guān)于 call(), apply() 和 bind() 三個(gè)函數(shù)的實(shí)例了。大家有什么疑問(wèn)建議留言討論。
本文始發(fā)于 bbwho.com 站點(diǎn)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110246.html
摘要：的區(qū)別接收數(shù)組一連串參數(shù)返回一個(gè)函數(shù)的使用場(chǎng)景將類(lèi)數(shù)組含有屬性的對(duì)象轉(zhuǎn)化為數(shù)組類(lèi)數(shù)組例如通過(guò)獲取的元素含有屬性的對(duì)象具有屬性，并且可以通過(guò)下標(biāo)來(lái)訪問(wèn)其中的元素，但是沒(méi)有中的等方法。 call,apply,bind的區(qū)別 apply接收數(shù)組 func.apply(obj, [arus]) call一連串參數(shù) func.call(obj, param1, param2....) bind...
摘要：不能應(yīng)用下的等方法。首先我們可以通過(guò)給目標(biāo)函數(shù)指定作用域來(lái)簡(jiǎn)單實(shí)現(xiàn)方法保存，即調(diào)用方法的目標(biāo)函數(shù)考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的這次的方法可以綁定對(duì)象，也支持在綁定的時(shí)候傳參。原因是，在中，多次是無(wú)效的。 bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。 apply、call 在 javascript 中，call 和 apply 都是...
摘要：首先我們可以通過(guò)給目標(biāo)函數(shù)指定作用域來(lái)簡(jiǎn)單實(shí)現(xiàn)方法保存，即調(diào)用方法的目標(biāo)函數(shù)考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的這次的方法可以綁定對(duì)象，也支持在綁定的時(shí)候傳參。原因是，在中，多次是無(wú)效的。而則會(huì)立即執(zhí)行函數(shù)。 bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。 apply、call 在 javascript 中，call 和 apply 都是...
摘要：參數(shù)和是放在數(shù)組中傳入函數(shù)，分別對(duì)應(yīng)參數(shù)的列表元素。而原函數(shù)中的并沒(méi)有被改變，依舊指向全局對(duì)象。保存原函數(shù)保存需要綁定的上下文剩余的參數(shù)轉(zhuǎn)為數(shù)組返回一個(gè)新函數(shù)下一篇介紹閉包中閉包的詳解。 apply 和 call 的區(qū)別 ECMAScript 規(guī)范給所有函數(shù)都定義了 call 與 apply 兩個(gè)方法，它們的應(yīng)用非常廣泛，它們的作用也是一模一樣，只是傳參的形式有區(qū)別而已。 apply(...
閱讀 2199·2021-11-18 10:02
閱讀 3302·2021-11-11 16:55
閱讀 2705·2021-09-14 18:02
閱讀 2442·2021-09-04 16:41
閱讀 2076·2021-09-04 16:40
閱讀 1200·2019-08-30 15:56
閱讀 2222·2019-08-30 15:54
閱讀 3173·2019-08-30 14:15
