在JavaScript中鏈接.bind()調(diào)用出乎意料的結(jié)果?
人們很容易想到的bind是莫名其妙地修改函數(shù)使用新的this。在這種(不正確的)解釋中,人們認為是bind在函數(shù)中添加了某種魔術(shù)標記,告訴該函數(shù)this下次調(diào)用時將使用其他標記。如果真是這樣,那么應(yīng)該有可能“覆蓋”并更改魔術(shù)標記。然后有人會問,任意限制能力的原因是什么?
但是實際上,這 它的工作原理。,當調(diào)用時將調(diào)用一個具有特定特性的第一個函數(shù)this。使用這個新創(chuàng)建的函數(shù)的行為,指定this調(diào)用原有的功能,是在焚燒時產(chǎn)生的功能時。在更改之后,不能再對其進行任何其他更改,而只能更改該函數(shù)返回的任何其他函數(shù)的內(nèi)部。
查看以下內(nèi)容的簡單實現(xiàn)可能會有所幫助bind:
// NOT the real bind; just an exampleFunction.prototype.bind = function(ctxt) { var fn = this; return function bound_fn() {return fn.apply(ctxt, arguments); };}my_bound_fn = original_fn.bind(obj);
如您所見,在中bound_fn,從中返回的函數(shù)bind沒有地方引用this調(diào)用綁定函數(shù)的。它被忽略,所以
my_bound_fn.call(999, arg) // 999 is ignored
要么
obj = { fn: function () { console.log(this); } };obj.fn = obj.fn.bind(other_obj);obj.fn(); // outputs other_obj; obj is ignored
因此,我可以綁定從bind“再次”返回的函數(shù),但這重新綁定原始函數(shù)。它僅綁定外部函數(shù),而對內(nèi)部函數(shù)沒有影響,因為已經(jīng)設(shè)置為使用this傳遞給的上下文(值)調(diào)用基礎(chǔ)函數(shù)bind。我可以一次又一次地綁定,但最終要做的是創(chuàng)建更多的外部函數(shù),這些函數(shù)可以綁定到某些東西上,但仍然最終調(diào)用從第一個返回的最里面的函數(shù)bind。
因此,說bind“不能被覆蓋” 有點誤導(dǎo)。
如果我想“重新綁定”一個函數(shù),那么我可以對原始函數(shù)進行新的綁定。因此,如果我綁定一次:
function orig() { }my_bound_fn = orig.bind(my_obj);
然后我想安排我的原始函數(shù)與其他函數(shù)調(diào)用this,那么我不重新綁定綁定函數(shù):
my_bound_fn = my_bound_fn.bind(my_other_obj); // No effect
相反,我只是創(chuàng)建了一個綁定到原始函數(shù)的新函數(shù):
my_other_bound_fn = orig.bind(my_other_obj);解決方法
從MDN:
bind()方法創(chuàng)建一個新函數(shù),該函數(shù)在調(diào)用時將其this關(guān)鍵字設(shè)置為提供的值
我可以很高興地看到它在此示例中有效:
(function () { console.log(this);}).bind({foo:'bar'})();
哪個日志Object { foo='bar'}。
但是,如果我鏈接了另一個綁定調(diào)用,甚至是“調(diào)用”調(diào)用,我仍然會使用分配給第一個綁定的對象的“ this”來調(diào)用函數(shù)。例子:
(function () { console.log(this);}).bind({foo:'bar'}).bind({oof:'rab'})();
和
(function () { console.log(this);}).bind({foo:'bar'}).call({oof:'rab'});
兩者都記錄了日志,Object { foo='bar'}而不是我期望的:Object { oof='rab'}。
無論我鏈接多少個綁定調(diào)用,似乎只有第一個都起作用。
為什么?
這可能會有所幫助。我剛剛發(fā)現(xiàn)jQuery的版本行為相同!:O
jQuery.proxy( jQuery.proxy(function() { console.log(this); },{foo:'bar'}),{oof:'rab'})();
日志 Object { foo='bar'}
相關(guān)文章:
1. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。2. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?3. python - Django有哪些成功項目?4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. Python中使用超長的List導(dǎo)致內(nèi)存占用過大6. node.js - 微信小程序websocket連接問題7. javascript - vue過渡效果 css過渡 類名的先后順序8. javascript - 我是做web前端的,公司最近有一個項目關(guān)于數(shù)據(jù)統(tǒng)計的!9. javascript - 如何使用loadash對[object,object,object]形式的數(shù)組進行比較10. javascript - vuejs+elementui 購物車價格計算,點擊加減號修改數(shù)量總價都不會改變,但是計算執(zhí)行了
