Javascript中bind的源码解析,及使用时的注意事项

bind的作用是什么？

简单来说：用来改变函数中的this指向

bind怎么用?

正常函数执行

 	function text (x,y,z){  //申明一个函数
 		console.log(this,x,y,z)}       
 	text(1,2,3)
//  输出 window 1 2 3
//函数空执行时，this默认为window

使用bind时函数执行

	function text(x,y,z){
		console.log(this,x,y,z)
}
	var obj = {};
	var mytext= text.bind(obj,1,2); // 返回的是一个函数，需用变量接收
	mytext(3);
	//输出：{} 1 2 3

注意bind与call，apply的区别

//call.apply改变this时，函数已经执行了
//bind在执行的时候返回的是一个新的函数
	mytext = function test () {
		console.log(obj,x,y,z)
	}

bind可以传递两个参数

第一个参数为需改变的this指向
第二个参数为函数执行时对应的实参列表

bind的第二个参数可以分两次传入

//上面函数举例
	var mytext= text.bind(obj,1,2); 
	mytext(3);
//第二次传入的参数会拼接到第一次传入的后面

返回的新函数也能作为构造函数

	function text(x,y,z){
		console.log(this,x,y,z)
	}
	var obj = {};
	var mytext= text.bind(obj,1,2);
	new mytext(3)
// 输出 text {}  1 2 3
注意：此时bind改变this无效 ，this为text{}

解析bind的源码

function text(x,y,z){
		console.log(this,x,y,z)
}
	var obj = {};
	
Function.proptype.bind = function(target){
	var self = this; //this 为外部调用的函数，此例子中为text
	var arg = Array.prototype.slice.call(arguments,1);//类数组的截取方法，arguments 为[obj,1,2] arg =[1,2]
	
	var temp = function(){}; //用来做中间缓冲函数
	var fn = function (){
	var _arg = Array.prototype.slice.call(arguments,0); //argument=[3]  _arg =[3]
	self.call(this instanceof temp? this :target || window,arg.concat(_arg));
	}
	temp.prototype = self.prototype;
	fn.prototype = new temp()
	return fn
}


var mytext= text.bind(obj,1,2); // 返回的是一个函数，需用变量接收
	mytext(3);   //输出 {} 1 2 3
	new mytext(3) // 输出 text() 1 2 3

总结

1.使用bind后原函数会返回一个改变this指向的函数
2.实际上使用的功能还是原函数的
3.bind可以传递两个参数，第二个参数可以分两步传入，两次传入的参数，会拼接在一起成为新函数执行时的实参
4.当返回的新函数，以new的方式作为构造函数使用时，则不会改变this的指