我们经常会碰到这样一些问题：
- 代码1
var Person={
name: "bob",
getName: function(){
console.log(this.name);
}
}
var getMyName = Person.getName;
getMyname(); //undefined
或者是这样的问题：
- 代码2
function Person(name){
this.nickname = name;
this.distractedGreeting = function() {
setTimeout(function(){
console.log("Hello, my name is " + this.nickname);
}, 500);
}
}
var alice = new Person('Alice');
alice.distractedGreeting();
//Hello, my name is undefined
在JavaScript中，this的指向是在运行函数时确定的，而不是定义函数时确定的。第一段代码，因为getMyName是在全局环境下运行的，故this指向的上下文为window。
第二段代码，setTimeout的运行环境同样为全局，故this指向的也是window,返回值为undefined。
JavaScript新手经常犯的一个错误,是将一个方法从对象中拿出来，然后再调用，希望方法中的this是原来的对象。（比如在回调中传入这个方法。）如果不做特殊处理的话，一般会丢失原来的对象。
call与apply就是用来解决这个问题的。
call
我们首先来看call的用法。以代码1为例：
var Person={
name: "bob",
getName: function(){
console.log(this.name);
}
}
var getMyName = Person.getName;
getMyName.call(Person); //bob
通过call方法，我们成功地让getMyName方法输出了bob。call方法的作用，简单来说，就是改变执行函数的this指向。它可以让执行函数的执行环境指向call第一个参数的环境下。
call方法可以有多个参数。第一个参数以外的参数，是传给执行函数的传参。以代码1为例：
var Person={
name: "bob",
getName: function(a,b){
console.log(this.name+' '+a+' '+b);
}
}
var getMyName = Person.getName;
getMyName.call(Person,2,'abc'); //bob 2 abc
apply
apply方法与call非常相似。同样是改变执行函数的this指向，apply方法和call方法在使用方法上几乎没有什么区别。
以代码1为例：
var Person={
name: "bob",
getName: function(){
console.log(this.name);
}
}
var getMyName = Person.getName;
getMyName.apply(Person); //bob
在执行函数没有传参时，从代码上看，我们几乎看不出差别，仅仅是把call换成了apply。
他们之间唯一的不同，就是apply只有两个参数，第二个参数必须是一个数组，执行函数的传参，以数组的形式传递。而call的传参，必须一个一个传入。
以代码1为例：
var Person={
name: "bob",
getName: function(a,b){
console.log(this.name+' '+a+' '+b);
}
}
var getMyName = Person.getName;
getMyName.apply(Person,[2,'abc']); //bob 2 abc
需要注意的是，如果call和apply的第一个参数写的是null，那么this指向的是window对象。
以代码1为例：
var Person={
name: "bob",
getName: function(){
console.log(this.name);
}
}
var getMyName = Person.getName;
getMyName.apply(null); //Window
bind
最后我们来说说bind。
bind方法会创建一个新函数,称为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为 this,传入bind 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
代码2以前的解决办法，通常是缓存this。
function Person(name){
this.nickname = name;
this.distractedGreeting = function() {
var self = this; // <-- 注意这一行!
setTimeout(function(){
console.log("Hello, my name is " + self.nickname); // <-- 还有这一行!
}, 500);
}
}
var alice = new Person('Alice');
alice.distractedGreeting();
// after 500ms logs "Hello, my name is Alice"
而我们使用bind方法，能更简单明了地解决这个问题。
function Person(name){
this.nickname = name;
this.distractedGreeting = function() {
setTimeout(function(){
console.log("Hello, my name is " + this.nickname);
}.bind(this), 500); // <-- this line!
}
}
var alice = new Person('Alice');
alice.distractedGreeting();
// after 500ms logs "Hello, my name is Alice"
代码1的问题同样可以用bind方法来解决。
var Person={
name: "bob",
getName: function(){
console.log(this.name);
}
}
var getMyName = Person.getName;
var bindGetName = getMyName.bind(Person);
getMyName();//bob
这里我们需要注意的是，bind与call和apply的不同之处，就是bind返回的是一个修改过后的函数。
刚才提到了，bind方法同样可以有多个参数。
以代码1为例：
var Person={
name: "bob",
getName: function(a,b,c,d){
console.log(this.name+' '+a+' '+b+' '+c+' '+d);
}
}
var getMyName = Person.getName;
var bindGetName = getMyName.bind(Person,12,34);
bindGetName('ab','cd');//bob 12 34 ab cd
可以看到，传入bind 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
最后，我们来总结一下：（敲黑板，这里是你们要的重点！！）
- 用途：都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。
-
apply接受两个参数：一个是在其中运行函数的作用域，另一个是参数数组。参数数组可以是arguments对象。 -
call与apply的区别仅在于接受参数的方式不同。call的参数必须逐个列举出来。 - 重要用途：能够扩充函数赖以运行的作用域。 对象与方法间不需要有任何耦合关系。
-
bind方法会创建一个函数的实例，其this值会被绑定到传给bind函数的值。 - 传入
bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
网友评论