1. 程式人生 > >【JavaScript】Function.prototype.bind實現原理

【JavaScript】Function.prototype.bind實現原理

前言: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);

輸出結果