【JavaScript】Function.prototype.bind实现原理

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w390058785/article/details/83185847

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

输出结果