400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】call和apply的作用

【Web前端基础知识】call和apply的作用

this 在不同的地方有不同的含义:

1. 在事件处理函数中,this指向触发函数的对象;

2. 在普通函数中,this指向window;

3. 当作函数作为某个对象的方法调用时,this指向那个对象;

4. 在构造函数中this指向当前实例化对象;

当在一些情况中我们想要更改this的指向,这里就可以使用 call 与 apply 来改变 this 的指向,让 this 指向特定的对象。

call 与 apply 的作用都是改变 this 的指向,基本的操作都是一样的。其使用方法如下:

call(this指向,参数1,参数2...)

apply(this指向,[参数1,参数2...])

可以看到他们的传参方式是不一样的。想要修改this 的指向,那么必然有一个this修改后的指向,而函数必然后关系到传参问题:call方法可以传给该函数的参数分别作为自己的多个参数,而apply方法必须将传给该函数的参数合并成一个数组作为自己的一个参数。

  1. function sum(a,b){ 
  2. console.log(a+b);     // 30 
  3.        console.log(this);  // 原本指向window,现在指向sum了 
  4. sum.call(sum,10,20) 

通过使用call方法,使得sum函数中原本指向window的this现在指向了sum自身,当然this的指向自己想指向哪里都可以。

另外还可以改变对象的this

  1. var obj1 = { 
  2.     "name":"韩梅梅", 
  3.     "getName":function(){ 
  4.         console.log(this.name); 
  5.     } 
  6. obj2 = { 
  7.     "name":"李雷" 
  8. obj1.getName();         // 韩梅梅 
  9. obj1.getName.call(obj2);// 李雷 

可以看到在obj1第一次调用getName方法时,结果为韩梅梅,因为调用getName时this指向obj1自身。在第二次调用getName方法时,使用了call方法改变了this的指向,让this指向了obj2,故打印时this.name成了obj2.name,为李雷。

改变this一般用于借用别的对象的方法,当想使用某个自己没有而别的对象有的方法时,就可以通过改变this的指向来借用别对象的方法。如:

  1. var n = {};  
  2. console.log(n.toString()); // [object Object]  
  3. // 对象的toString方法可以获取数据的具体类型,若是也想获取数组的具体数据类型可以借用对象的该方法。 
  4. console.log(Object.prototype.toString.call([]));    // [object Array] 

apply的使用和call的使用方式是一样的,只是在于向函数传参时是以一个数组的形式,就如上面例子中使用call改变函数sum的指向时,若是使用apply则为:sum.apply(sum,[10,20]),第一个为改变后的this指向,第二个参数为数组,若在进行传参时第二个参数的格式不对,会报错。

apply的巧妙用法:

使用Math.max可以得到数组中最大的一项

因为Math.max不支持Math.max([参数1,参数2...])也就是数组,但是它支持Math.max (参数1,参数2...)的形式,所以可以根据apply的特点来解决这个问题,因为刚好apply的第二个参数为一个数组,可以将这个数组作为apply的第二个参数传入,这样apply会将一个数组转换为一个参数接一个参数的方式传递给方法。

  1. var arr = [6,3,8,9,12,5] 
  2. console.log(Math.max.apply(1,arr)); // 12 

这样就轻易的可以得到一个数组中的最大项。

这块在调用的时候第一个参数给了1,这是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,所以直接传递了一个1过去。用这种方法也可以实现得到数组中的最小项:Math.min.apply(1,array)

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料,活动优惠 领取通道
 
 
Baidu