js中的call、apply、bind详解

call、apply

一、作用

每个函数都包含两个方法，call() 和 apply()；
在ES5中，this总是指向调用该函数的对象；
在特定的作用域内调用函数，并且改变该函数的this指向 ；

1. call

<script>

	console.log(this);  			//this == window  		window
	
	window.color = 'red';
	document.color = 'blue';
	var color1 = {
		color: 'orange'
	}
	function getColor(){
		consolor.log(this.color);
	}
	getColor();						//this指向window 		'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
	}
	//执行方法
	//this指向该对象， this.a == 0  this.b == 0;
	sum.getSum(3, 4); 				// 7
	//改变this，指向s1 this.a == 1 this.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>

二、区别

• call()和apply()唯一的区别就是传递参数不同

1. call(this, 参数1, 参数2, 参数3, …)
2. apply(this,[参数1, 参数2, 参数3, …])

call()方法 和 apply()方法 唯一的区别就是传递参数不同，call()方法第一个参数是this，后面的参数必须一个一个的写出来，apply()方法第一个参数是this，后面跟了一个数组，参数都写在这个数组里面。

如果apply()方法后面参数不跟数组会怎么样呢？

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

bind

一、作用

绑定函数，改变this指向

• 我们经常碰到这种情况，创建一个变量保存当前this

<script>

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

• 以上写法也可以，但是不够优雅，我们可以通过bind(),更优雅的写出这个代码

<script>

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

二、区别

• bind() 方法是返回对应的函数
• call() 方法、apply()方法是立即执行