富國滬深
2019-03-07 19:15:35
在平時(shí)對(duì)setTimeout addEventListener這種函數(shù)的使用,都會(huì)傳入一個(gè)匿名的callback函數(shù)如:1.window.setTimeout(function() { console.log(this)}, 1000) 或者2.var el = document.getElementById('wrapper')el.addEventListener('click', function() { console.log(this)}, false)上述情況1中this會(huì)指向setTimeout函數(shù)的caller -> window對(duì)象而情況2中this也會(huì)指向addEventListener函數(shù)的caller -> wrapper這個(gè)對(duì)象但是我自己類似于window.setTimeout這樣創(chuàng)建了一個(gè)對(duì)象var a = { b: 'b in a', c: function (callback) { callback() }}//調(diào)用a對(duì)象的c函數(shù),傳入匿名函數(shù)作為參數(shù)a.c(function() { //本以為this是指向a的,會(huì)輸出字符串'b in a',實(shí)際此時(shí)this指向window console.log(this.b) })我原本以為會(huì)類似于window.setTimeout el.addEventListener那樣,this會(huì)指向.(點(diǎn)號(hào))之前的對(duì)象。然后我改了一下對(duì)象avar a = { b: 'b in a', c: function (callback) { callback.bind(this)() }}這個(gè)時(shí)候this才指向a。那么問題來了: 1.像這種匿名函數(shù)傳參的用法,為什么使用我自己定義的對(duì)象和瀏覽器提供的api產(chǎn)生的效果不一樣呢?這種類型的this的指向應(yīng)該如何更好的理解?2.是不是像setTimeout 、addEventListener這種系統(tǒng)api,它的內(nèi)部實(shí)現(xiàn)就幫我們?nèi)グ裻his bind給了調(diào)用這個(gè)方法的對(duì)象,如setTimeout中就有callback.bind(window)和addEventListener就有callback.bind(el)?有沒有各路大神可以解答一下,小弟感激不盡。
3 回答

隔江千里
TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊
你可以把this當(dāng)做function的一個(gè)隱藏參數(shù),相當(dāng)于
function(_this, otherArgs){
}
事實(shí)上基本所有語言也都是這么處理的。所以當(dāng)this不對(duì)的時(shí)候,可以用bind顯性地傳遞這個(gè)參數(shù)。
檢查一個(gè)function是否綁定了this這個(gè)參數(shù)可以用下面的方法:
// ES5
function isBindable(func) {
return func.hasOwnProperty('prototype');
}
// ES6
const isBindable = func => func.hasOwnProperty('prototype');
事件監(jiān)聽那里可能是做了特殊處理,畢竟JS是個(gè)設(shè)計(jì)糟糕的語言(哈)

絕地?zé)o雙
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊
添加回答
舉報(bào)
0/150
提交
取消