js中apply和call方法浅析

最近重新温习的时候发现对于apply和call方法的区分以及使用时忘得差不多了，所以简单记录巩固一下

 

基本语法

函数名.apply(object,[参数1，参数2，...])

函数名.call(object,参数1，参数2，...)

 

共同点:都可以用来改变this的指向

不同点：两者中第一个参数均为object，apply只有两个参数，其中第二个参数为数组；call为多个参数

 

接下来通过一个例子使用并分析apply和call

 

var obj1 = {
　　name:"张三",
　　age:20
};
var obj2 = {
　　name:"李四",
　　age:30,
　　fun:function(name,todo){
　　　　console.log(this.name+"已经"+this.age+",他准备去和"+name+todo)
　　}
};

obj2.fun.apply(obj1,['小红','相亲'])//张三已经20,他准备去和小红相亲
obj2.fun.call(obj1,'小红','相亲')//张三已经20,他准备去和小红相亲
//这两句的得出来的结果是一样的，参数传递也只有是按照数组去传递还是以多个函数去传递，
//根据结果我们也可以看出，obj1调用了obj2的fun方法（不然显示的数据也不会是obj1的属性值）
//可以看出函数的第一个参数是用来指代上下文的this指向，
//既然两个函数可以改变this指向，那么接下来我们看几组不同的代码
//

 

obj2.fun.apply(obj2,['小红','相亲'])//李四已经30,他准备去和小红相亲
obj2.fun.call(obj2,'小红','相亲')//李四已经30,他准备去和小红相亲
//
//我们从结果可以得出，第一参数由于是obj2，
//故结果得出来是指是obj2的属性值
//

 

obj2.fun.apply(null,['小红','相亲'])//已经undefined,他准备去和小红相亲
obj2.fun.call(null,'小红','相亲')//已经undefined,他准备去和小红相亲
obj2.fun.apply(undefined,['小红','相亲'])//已经undefined,他准备去和小红相亲
obj2.fun.call(undefined,'小红','相亲')//已经undefined,他准备去和小红相亲

//
//由于指向的this为空，所以得出来的值为undefined
//