Understanding of call, apply and bind in js

call、apply

---

1. Function

Each function contains two methods, call() and apply();
in ES5, this always points to the object that calls the function (the arrow function this in ES6 is not discussed here);
it is called in a specific scope Function, and change the this point of the function;

1.call 

<script>

	console.log(this);  			//window
	
	window.color = 'red';
	document.color = 'blue';
	var color1 = {
		color: 'orange'
	}
	function getColor(){
		consolor.log(this.color);
	}
	getColor();						//'red'
	
	// 以下均是执行 getColor 函数，只不过是改变了this的指向

	getColor.call(); 				//this默认指向window  	'red'
	getColor.call(this); 			//this指向window 		'red'
	getColor.call(window); 			//this指向window  		‘red’
	getColor.call(document); 		//this指向document 		'blue' 
	getColor.call(color1);			//this指向color1 		'orange'
	
	//多个参数情况
	
	var sum = {
		a: 0,
		b: 0,
		getSum: function(c, d){
			return this.a + this.b + c + d;
		}
	}
	var s1 = {
		a : 1,
		b:  2
	}
	sum.getSum.call(s1, 3, 4);		// 10
	
</script>

2. apply

<script>

	function getColor(){
		console.log(this.color);
	}
	window.color = 'red';
	document.color = 'blue';
	var color1 = {
		color: 'orange'
	}
	getColor.apply();
	getColor.apply(this); 			//this指向window 		'red'
	getColor.apply(window); 		//this指向window  		‘red’
	getColor.apply(document); 		//this指向document 		'blue' 
	getColor.apply(color1);			//this指向color1 		'orange'
	
	//多个参数情况
	
	function getColor(color){
		this.color = color;
		this.get = function(){
			console.log(this.color);
		}
	}
	function setColor(color){
		getColor.apply(this, arguments);
	}
	var set = new setColor('orange');
	set.get();						//orange

</script>

Two, the difference between different
transmission parameters

call(this, parameter 1, parameter 2, parameter 3, …)
apply(this,[parameter 1, parameter 2, parameter 3, …]) The
only difference between the call() method and the apply() method is that the parameters are different, call The first parameter of the () method is this, and the following parameters must be written out one by one. The first parameter of the apply() method is this, followed by an array, and the parameters are written in this array.
What if the parameter after the apply() method is not followed by an array?

会报错： Uncaught TypeError: CreateListFromArrayLike called on non-object

bind

---

1. Function

Binding function, change this point

• We often encounter this situation, create a variable to save the current this

• <script>
  
  	var foo = {
  		name: 'jiangfulai',
  		click: function(){
  			var _this = this;
  			document.body.onclick = function(){
  				console.log(_this.name);
  			}
  		}
  	}
  	foo.click();			//jiangfulai
  	
  </script>
  

  The above writing method is also possible, but it is not elegant enough, we can write this code more elegantly through bind()

• <script>
  
  	var foo = {
  		name: 'jiangfulai',
  		click: function(){
  			document.body.onclick = function(){
  				console.log(this.name);
  			}.bind(this);
  		}
  	}
  	foo.click();			//jiangfulai
  	
  </script>
  

   

  Two, the difference

  There is a certain difference between bind() method, call() method, apply() method

• The bind() method returns the corresponding function and needs to be called by yourself.
• The call() method and apply() method are executed immediately

• Subtle gap!

  The first parameter of the three functions call, bind, and apply is the object pointed to by this, and the second parameter is different:
  the parameter of call is put directly in, and the second, third, and nth parameters are all commas Separate, put directly behind obj.myFun.call(db,'Chengdu',… ,'string' );
  All the parameters of apply must be placed in an array and passed into obj.myFun.apply(db,['Chengdu' , …,'string' ]);
  Except that bind returns a function, its parameters are the same as call.
  Of course, the parameters of the three are not limited to string types, and various types are allowed, including functions, object, and so on!