bind可以干什么

使用了bind會(huì)創(chuàng)建一個(gè)新函數(shù)（綁定函數(shù)），當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，它的 this 值是傳遞給 bind() 的第一個(gè)參數(shù), 它的參數(shù)是 bind() 的其他參數(shù)和新函數(shù)的參數(shù)。
語(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ù)本身的參數(shù)會(huì)按照順序作為原函數(shù)運(yùn)行時(shí)的參數(shù)。

使用介紹

//js提供的bind方法可以在函數(shù)運(yùn)行之前就綁定其作用域，修改如下

const id = 'window';
function test () {
    console.log(this.id)
}

const fn = test.bind(window);
const obj = {
    id: 'obj',
    hehe:fn
};

fn();// window
obj.hehe(); // window

但是bind方法在低版本瀏覽器不兼容，這里我們可以手動(dòng)實(shí)現(xiàn)一下

拆分思路

1.bind會(huì)返回一個(gè)新函數(shù)，所以

return function(){

}

2.目標(biāo)是當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，它的 this 值是傳遞給 bind() 的第一個(gè)參數(shù), 它的參數(shù)是 bind() 的其他參數(shù)以及新函數(shù)傳來(lái)的參數(shù)。

實(shí)現(xiàn)代碼

Function.prototype.testBind = function(that){
  
    const arr = Array.prototype.slice.apply(arguments,[1]);
  
    const _this = this;
    
  
  return function(){
    //目的：讓this指向obj,參數(shù)第一個(gè)就是{value2:'also ok'},第二個(gè)是“hello bind”
    _this.apply(that,arr.concat(Array.prototype.slice.call(arguments)));
  }
    
}

測(cè)試

var test = function(a,b){
    console.log('作用域綁定 '+ this.value)
    console.log('testBind參數(shù)傳遞 '+ a.value2)
    console.log('調(diào)用參數(shù)傳遞 ' + b)
}
    
var obj = {
    value:'ok'
}
var fun_new = test.testBind(obj,{value2:'also ok'})

fun_new ('hello bind');

每天都努力一點(diǎn)點(diǎn)
謝謝你看完