JavaScript中的call()，apply()和bind用法

 

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

apply()和call()方法：

function F1(x,y){
   console.log("结果是："+(x+y)+this);
   return "10000";
}

//第一部分调用
F1.apply();//输出 结果是：NaN[object Window]
F1.call();//输出 结果是：NaN[object Window]
F1.apply(null);//输出 结果是：NaN[object Window]
F1.call(null);//输出 结果是：NaN[object Window]


//第二部分调用
F1(10,20);//输出 结果是：300[object Window]
F1.apply(null,[100,200]);//输出 结果是：300[object Window]
F1.call(null,100,200);//输出 结果是：300[object Window]

看上面的代码，第一部分的调用，我们可以总结：

• apply和call方法中如果没有传入参数，或者传入的是null，那么调用该方法的函数对象中的this指向的就是window

第二部分的调用，我们可以总结为：

• apply和call函数都可以让函数或者方法来调用，传入的参数和函数自己调用的写法不一样，但效果是一样的

function ca1(x,y){
	console.log("这个函数是window对象的一个方法:"+(x+y)+"----"+this.age);
}
window.ca1(10,20);//输出 这个函数是window对象的一个方法:30----undefined
			
var obj={
	age:10,
	sex:"男"
};
window.ca1.apply(obj,[10,20]);//输出 这个函数是window对象的一个方法:30----10
window.ca1.call(obj,10,20);//这个函数是window对象的一个方法:30----10
console.dir(obj);//输出 Object

分析上面的代码，总结：

• apply和call方法可以改变this的指向，this的指向由windon变为了obj
• apply的使用方法：1:函数名字.apply(对象，[参数1,参数2,.....])                                                                                      2:方法名字.apply(对象，[参数1,参数2,.....])
• call的使用方法：  1:函数名字.call(对象，参数1,参数2,.....)                                                                                             2:方法名字.call(对象，参数1,参数2,.....)
• apply和call的方法的不同之处：只要是想使用别的对象的方法，并且希望这个方法是当前对象的，那么就可以使用apply()或者call()方法，改变this的对象。

apply和call的使用案例：

         var name = '小王',age = 17;
         var obj = {
             name: '小张',
             objAge: this.age
             myFun: function(){
                  console.log(this.name + '年龄'+ this.age)；
             }
           }
       var db = {
          name: '德玛',
          age: 99
       }
    obj.myFun.call(db)；　　　　// 德玛年龄 99
    obj.myFun.apply(db);　　　 // 德玛年龄 99
  

 

 bind()方法：

bind方法是复制的意思，复制的时候把参数传入到f1函数中，此时x指的是12，y指的是23，null指的是this，默认的是window，参数可以在复制的时候传入，也可以在调用的时候传进去，并在复制的时候改变了this的指向

function f1(x,y){
	console.log((x+y)+":=====>"+this.age);
	}

var ff=f1.bind(null,12,23);
ff(12,23);//输出 35:=====>undefined

function Person(age){
	this.age=10;
}
Person.prototype.eat=function(){
	console.log("吃起来");
}
			
var per=new Person();
var ff=f1.bind(per ,10,20);
ff();//输出 30:=====>10

bind的使用案例：

var name = "小王", age = 17;
var obj = {
  name: '小张',
  objAge: this.age,
  myFun:function (fm,t) {
	console.log(this.name + '年龄'+ this.age, '来自'+ fm + '去往'+ t)
  }
}
var db = {
	name: '德玛',
	age: 99
}
obj.myFun.call(db,'成都','上海');　　　　 // 德玛 年龄 99  来自 成都去往上海 obj.myFun.apply(db,['成都','上海']);      // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,'成都','上海')();       // 德玛 年龄 99  来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();　　 // 德玛 年龄 99  来自 成都, 上海去往 undefined