你不知道的javascript：bind的用法和原理

灰太狼 2023-07-12 05:11 10阅读 0赞

## bind的使用 ##

**bind主要是用来修改`this`的指向，不是修改函数本身，而是在执行后返回一个新的函数，新的函数在执行的时候执行的是函数的功能。**  
js是基于对象的语言。

var x = 10;//作用在全局作用域
    function show(){ 
    	console.log(this)//指向window
    }
    show();//执行show函数
    
    var YObj={ 
    	x:20
    }
    //bind由Function构造而成
    var newShow = show.bind(YObj);//控制show的返回值,newShow是bind返回的新的函数
    newShow();

## 单对象编程 ##

有一个大对象包裹多个函数（功能），

## call、apply、bind的区别？ ##

1.  call和apply在当前行去执行的时候可以使用，像上面的例子中,最好使用bind。等到某个事件的触发，bind会返回一个函数，该函数执行的是原函数的功能。

## bind绑定的参数会靠前显示 ##

var x = 10;
    function show(a,b){ 
    	console.log(this.x,a,b)
    }
    show('a','b');
    var y = { 
    	x:20
    }
    
    var newShow = show.bind(y,'c');//可以传多个参数
    newShow('d');//bind中书写的参数都会在这里定义的参数之前显示。

## bind绑定的事件对象在参数后面 ##

## 总结 ##

function A(){ 
    	var o ={ };
    	var x = 3;
    	var y="4";
    	var z= 4;
    	var B = A.bind(o,x,y,z);
    	B('c');
    }

1.  函数A调用bind方法时，需要传递的参数o,x,y,z…
2.  返回新的函数B
3.  函数B在执行的时候，具体的功能实际上还是使用的A，只是this指向o，不传参的时候，this可能指向window
4.  函数B在执行的时候，传递的参数会拼接到x,y,z…的后面，一并在内部传递给A执行
5.  new B()执行的时候，构造函数依旧是A，而且bind指向的没有任何作用。若要使bind有用，就应绑定到原型上

### 绑定到原型上 ###

Function.prototype.newBind = function(target){ 
    	//target 改变返回函数的this指向
    	var self = this;
    	//接受后面传的参数
    	var args = [].slice.call(arguments,1);//传进来的参数变成数组
    	var f = function(){ 
    		//真正执行的是self
    		//return self.apply(this);
    		//return self.apply(target || window,args);//只是bind后面传参的话这样写
    		//当新的函数在执行原函数的功能时，还传了新的参数，就使用下面的方式
    		var _arg = [].slice.call(arguments,0)//从下标为0开始截取
    		return self.apply(target || window,args.concat(_arg));//
    	}
    	return f;
    }
    function show(x,y,z,w){ 
    	console.log(this,x,y,z,w)//指向window
    }
    show();//执行show函数
    
    var YObj={ 
    	x:20
    }
    //bind由Function构造而成
    var newShow = show.newBind(YObj,1,2,3);//控制show的返回值,newShow是bind返回的新的函数
    newShow(4);

##### new 一个构造函数出来的时候 #####

Function.prototype.newBind = function(target){ 
    	//target 改变返回函数的this指向
    	var self = this;
    	//接受后面传的参数
    	var args = [].slice.call(arguments,1);//传进来的参数变成数组
    	//定义一个缓冲函数
    	var temp = function(){ }
    	var f = function(){ 
    		//this
    		//真正执行的是self
    		//return self.apply(this);
    		//return self.apply(target || window,args);//只是bind后面传参的话这样写
    		//当新的函数在执行原函数的功能时，还传了新的参数，就使用下面的方式
    		var _arg = [].slice.call(arguments,0)//从下标为0开始截取
    	
    		return self.apply(this instanceof temp ? this : (target || window),args.concat(_arg));//
    	}
    	temp.prototype = self.prototype;//写一个继承关系
    	f.prototype = new Temp();
    	return f;
    }
    function show(){ 
    	console.log(this)//指向window
    	
    }
    show();//执行show函数
    
    var YObj={ 
    	x:20
    }
    //bind由Function构造而成
    var newShow = show.newBind(YObj);//控制show的返回值,newShow是bind返回的新的函数
    new newShow();
    console.log(new newShow().constructor);

**//A instanceof B:A是构造函数，B是对象**