call vs apply

最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧。

1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。

2. 相同点:这两个方法的作用是一样的。

都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。

一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。

call()方法使用示例:

//例1        window.color ='red';        document.color ='yellow';vars1 = {color:'blue'};functionchangeColor(){console.log(this.color);        }        changeColor.call();//red (默认传递参数)changeColor.call(window);//redchangeColor.call(document);//yellowchangeColor.call(this);//redchangeColor.call(s1);//blue//例2varPet = {        words :'...',        speak :function(say){console.log(say +''+this.words)        }    }    Pet.speak('Speak');// 结果:Speak...varDog = {        words:'Wang'}//将this的指向改变成了DogPet.speak.call(Dog,'Speak');//结果: SpeakWang

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

apply()方法使用示例:

//例1        window.number ='one';        document.number ='two';vars1 = {number:'three'};functionchangeColor(){console.log(this.number);        }        changeColor.apply();//one (默认传参)changeColor.apply(window);//onechangeColor.apply(document);//twochangeColor.apply(this);//onechangeColor.apply(s1);//three//例2functionPet(words){this.words = words;this.speak =function(){console.log(this.words)        }    }functionDog(words){//Pet.call(this, words); //结果: WangPet.apply(this, arguments);//结果: Wang}vardog =newDog('Wang');    dog.speak();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

3. 不同点:接收参数的方式不同。

apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。

语法:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。

说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个 

TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。

call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。

语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。

说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。

使用示例1:

functionadd(c,d){returnthis.a +this.b + c + d;    }vars = {a:1, b:2};    console.log(add.call(s,3,4));// 1+2+3+4 = 10console.log(add.apply(s,[5,6]));// 1+2+5+6 = 14

1

2

3

4

5

6

7

使用示例2:

window.firstName ="Cynthia";        window.lastName ="_xie";varmyObject = {firstName:'my', lastName:'Object'};functiongetName(){console.log(this.firstName +this.lastName);        }functiongetMessage(sex,age){console.log(this.firstName +this.lastName +" 性别: "+ sex +" age: "+ age );        }        getName.call(window);// Cynthia_xiegetName.call(myObject);// myObjectgetName.apply(window);// Cynthia_xiegetName.apply(myObject);// myObjectgetMessage.call(window,"女",21);//Cynthia_xie 性别: 女 age: 21getMessage.apply(window,["女",21]);// Cynthia_xie 性别: 女 age: 21getMessage.call(myObject,"未知",22);//myObject 性别: 未知 age: 22getMessage.apply(myObject,["未知",22]);// myObject 性别: 未知 age: 22

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容