bind的模擬實現

2021-09-13 10:07:20 字數 2194 閱讀 5520

var context = context || window

var result

// 判斷是否有第二個引數

if(arguments[1]) else

delete context.fn()

return result

}var foo =

function bar(name, age)

bind() 方法會建立乙個新的函式。當這個新函式被呼叫時，bind() 的第乙個引數會作為它執行時的this，之後的引數將會在傳遞的實參前傳入作為它的引數。
也就是說bind可以返回乙個函式，並且可以傳入引數。

首先根據第一點，需要返回乙個函式：

function.prototype.bind2 = function(context) 


}var foo = ;


function bar() 


var bindfoo = bar.bind2(foo); 


bindfoo() // 1
接下來還有第二點，可以傳入引數，可是傳引數還會有兩種情況，是在bind的時候傳引數呢，還是在呼叫返回的函式的時候傳引數呢？

var foo = ;


function bar(name, age) 


var bindfoo = bar.bind(foo, 'black');


bindfoo('18')


// black


// 18


// 1
通過上面的例子就可以明顯發現。兩種方式都可以傳參。那模擬實現：

function.prototype.bind2 = function(context) 


}var foo = ;


function bar(name, age) 


var bindfoo = bar.bind2(foo, 'black');


bindfoo('18')
這兩點完成後，還有乙個特點，就是乙個繫結函式也能使用new操作符建立物件，提供的this值被忽略，同時呼叫時的引數被提供給模擬函式。

也就是說 bind 返回的函式作為建構函式的時候，bind 時指定的 this 值會失效，但是傳入的引數依然生效，舉個例子來說明：

var value = 2;


var foo = 


function bar(name, age) 


bar.prototype.*** = 'boy'


var bindfoo = bar.bind(foo, 'black')


var obj = new bindfoo('18')


// black


// 18


// undefined


console.log(obj.***) // boy
儘管在全域性和 foo 中都宣告了 value 值，最後依然返回 undefined，那是因為當呼叫obj的時候，這個時候的this指向已經指向到了 obj

所以我們要去修改一下返回函式的原型來去實現：

function.prototype.bind2 = function(context) 


// 修改返回函式的 prototype 為繫結函式的 prototype，例項就可以繼承函式的原型中的值


// 使用object.create避免修改函式的prototype


fun.prototype = object.create(this.prototype)


return fun


}
最後加個對呼叫bind是否是個函式的判斷：

function.prototype.bind2 = function(context) 


var self = this;


var args = [...arguments].slice(1)


var fun = function() 


// 修改返回函式的 prototype 為繫結函式的 prototype，例項就可以繼承函式的原型中的值


// 使用object.create避免修改函式的prototype


fun.prototype = object.create(this.prototype)


return fun


}

bind函式模擬實現

console.log function.prototype.bind function console.log function.prototype.bind function console.log function.prototype.bind.name bind console.log fu...

bind函式 模擬實現JS的bind方法

先看一下bind是什麼?var obj obj typeof function.prototype.bind functiontypeof function.prototype.bind functionfunction.prototype.bind.name bindfunction.protot...

深入JavaScript 模擬實現bind

bind bind 方法會建立乙個新函式。當這個新函式被呼叫時，bind 的第乙個引數將作為它執行時的 this，之後的一串行引數將會在傳遞的實參前傳入作為它的引數。由此我們可以首先得出 bind 函式的兩個特點 例1var foo function bar var bindfoo bar.bind...