【JavaScript】Function.prototype.bind實現原理
阿新 • • 發佈:2018-12-16
前言:ECMAscript5中的bind()是ES6中箭頭函式繫結this的基礎。它是的實現原理是怎樣的呢?
一、回顧bind的用法
const nick = {
name:'nick'
}
const sayName = function(){
console.log(this.name);
if(arguments.length !== 0){
for(let key in arguments){
console.log(arguments[key]);
}
}
}
①、繫結this
var nickSayName = sayName.bind(nick); nickSayName();
輸出結果
②、傳參
var nickSayName = sayName.bind(nick);
nickSayName(1,2);
輸出結果
③、預傳參
var nickSayName = sayName.bind(nick,1,2); //預傳參
nickSayName(3,4);
輸出結果
二、實現原理
Function.prototype.newBind = function(){ const that = this, //這個this是原函式物件 context = [].shift.call( arguments ), //第一個引數,需要繫結的this的物件 args = [].slice.call( arguments ); //將剩下的引數轉換成陣列 return function(){ return that.apply( context, [].concat.call( args, [].slice.call( arguments ))); //這裡的args是預先傳的引數 //arguments是真正執行時傳的引數 //合併args跟arguments } } const nickSayName = sayName.newBind(nick,1,2); nickSayName(3,4);
輸出結果