欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js中apply和call方法浅析

程序员文章站 2022-09-03 23:47:06
最近重新温习的时候发现对于apply和call方法的区分以及使用时忘得差不多了,所以简单记录巩固一下 基本语法 函数名.apply(Object,[参数1,参数2,...]) 函数名.call(Object,参数1,参数2,...) 共同点:都可以用来改变this的指向 不同点:两者中第一个参数均为 ......

最近重新温习的时候发现对于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
//