javascript中call()、apply()、bind()的用法

引例

//例1
var name = '张三',
	age = 18;
var obj = {
	name:'李四',
	objAge: this.age, //注意这行代码
	F:function(){
		console.log( this.name , this.age , this.objAge);
	}
}
 obj.objAge //18
 obj.F(); 	// 李四 undefined 18
 
//例2
var name = '张三'
function show(){
	console.log( this.name );
}
show() //张三

比较一下这两者this 的差别，第一个打印里面的this 指向obj对象，第二个全局声明的show()函数 this 是window

相同点

call()、apply()、bind() 都是用来重定义 this 这个对象的。

var name = '张三',
	age = 18,
	db = {
		name : '老陈',
		age : 99
	};
var obj = {
	name:'李四',
	objAge: this.age, 
	F:function(){
		console.log( this.name , this.age );
	}
}
 obj.F.call(db);　　　　//老陈 99
 obj.F.apply(db);　　　 //老陈 99
 obj.F.bind(db)();　　　//老陈 99

bind 返回的是一个新的函数，你必须调用它才会被执行,下面会详细说明用法。

call()

描述：使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数

var db = {
		name : '老陈'
	};
var obj = {
	name:'李四',
	F:function(){
		console.log( this.name );
	}
}
 obj.F.call(db);　　　　//老陈 

通过在call方法，给第一个参数添加要把obj添加到哪个环境中，简单来说，this就会指向那个对象。

call方法除了第一个参数以外还可以添加多个参数，如下：

var obj = {
    name:"李四",
    F:function(a,b){
        console.log(this.name); //李四
        console.log(a+b); //3
    }
}
var example = obj.F;
example.call(obj,1,2);

apply()

描述：调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

var db = {
		name : '老陈'
	};
var obj = {
	name:'李四',
	F:function(){
		console.log( this.name );
	}
}
 obj.F.apply(db);　　　　//老陈 

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var obj = {
    name:"李四",
    F:function(a,b){
        console.log(this.name); //李四
        console.log(a+b); //3
    }
}
var example = obj.F;
example.apply(obj,[1,2]);

注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {
    name:"李四",
    F:function(){
        console.log(this); 
        //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.F;
b.apply(null);

bind()

描述：创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。

var db = {
		name : '老陈'
	};
var obj = {
	name:'李四',
	F:function(){
		console.log( this.name );
	}
}
 obj.F.bind(db);　　　

代码没有被打印，这就是bind和call、apply方法的不同，因为bind方法返回的是一个修改过后的函数。我们改成下面的形式：

var db = {
		name : '老陈'
	};
var obj = {
	name:'李四',
	F:function(){
		console.log( this.name );
	}
}
 var c = obj.F.bind(db);　
 c(); //等同于obj.F.bind(db)()
 //打印结果为  老陈

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。