一些学js的同学一看到call, apply, 就蒙了, 感觉不好懂, 看的头大. 今天我们就一起来研究一下这2个东东.
彻底弄清楚它们的用法.

定义:

call, apply是函数的方法, 只有函数才有这2个方法.

作用:

call, apply主要作用是改变函数赖以执行的作用域, 简言之就是改变函数中this的指向.

用法:

fn.call(obj, args1, args2, ...); //obj是指定函数赖以执行的对象, arg1等是传给函数的参数(假如有的话)
fn.apply(obj, [args1, args2, ...]); //obj是指定函数赖以执行的对象, [arg1, ...]等是传给函数的参数数组(假如有的话)

差别:

call和apply的差别就是参数的不同.
call中的参数必须是一个个枚举出来的.
apply中的参数必须是数组或者是arguments对象

例子1:function fn(arg){alert(arg);}fn.call(this, 'hello world'); //hello world, 由于fn中没指定this, 所以此时的this指向window对象.fn.apply(this, ['hello world']); //hello world, 由于fn中没指定this, 所以此时的this指向window对象.

   例子2:function fn(arg1, arg2, arg3){alert(arg1 + arg2 + arg3);}fn.call(this, 'hello world', 'petty', 'jack'); //hello worldpettyjackfn.apply(this, ['hello world', 'petty', 'jack']); //hello worldpettyjack

例子3:function myFn(arg1, arg2, arg3){alert(arg1 + arg2 + arg3);}function fn(arg1, arg2, arg3){myFn.apply(this, arguments); //此处传arguments对象, 即fn中的[arg1, arg2, arg3]
   }fn('hello', 'world', '!'); //helloworld!
   例子4:var o = {name: 'tom'};function fn(){alert(this.name);}fn.call(this); //此时this指向window, 所以是window的name值fn.call(o); //此时this指向o, 所以是o的name值, 'tom'fn.apply(o); //同上

例子5:function MyFn(name){this.name = name;} // 定义一个构造函数function Fn(age, name){this.age = age;MyFn.call(this, name); // 理解了call的定义后, 就不难看出, 此处继承了MyFn的name属性.//MyFn.apply(this, [name]); // 也可} // 定义另一个构造函数var person = new Fn(20, 'tom');alert(person.name); // 原本Fn是没有name属性的, 但是使用了call或者apply后, 就继承了MyFn的name属性, 所以为'tom'

   理解了以上的call和apply的原理后, 我们一起来模仿jquery中each函数.function each(obj, fn){var i;if(Object.prototype.toString.call(obj) === '[object Array]'){for(i = 0, length = obj.length; i < length; i++){fn.call(obj[i], i, obj[i]);}}else if(typeof obj === 'object'){for(i in obj){if(obj.hasOwnProperty(i)){fn.call(obj[i], i, obj[i]);}}}else{return false;}}var oDiv = document.getElementsByTagName('div');each(oDiv, function(){this.style.background = '#ff0000'; // 所有div的背景都变为红色的了.});

简单吧.好了, 讲解到此为止.

转载于:https://www.cnblogs.com/tinkbell/p/3200488.html

详解javascript中的call, apply相关推荐

  1. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  2. 前端中unescape是什么意思_详解JavaScript中的Unescape()和String() 函数

    JavaScript中的Unescape()和String() 函数详解,具体内容如下所示: 定义和用法 JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解 ...

  3. 详解JavaScript中的this

    JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者-有人甚至因为坑大而不 ...

  4. 详解Javascript中的Array对象

    本文地址:http://luopq.com/2016/04/01/Array-in-Javascript/,转载请注明 在上一篇文章中,我们详细介绍了Object对象.在这一篇文章中,我们来说说Arr ...

  5. 详解Javascript中的Object对象

    本文地址:http://luopq.com/2016/02/28/Object-in-Javascript/,转载请注明 Object是在javascript中一个被我们经常使用的类型,而且JS中的所 ...

  6. 科普向--详解JavaScript中的数据类型

    对于前端的小伙伴而言,JS的数据类型可谓是必懂的知识点.虽然这个知识点很是基础了,不过仍然有不少人会在这一块犯些小错误.比如网上流传的"JavaScriptS一切皆对象",其实是个 ...

  7. 详解JavaScript中void语句的使用

    void是在JavaScript中的一个重要的关键字可被用作其单操作数之前出现一元运算符,其可以是任何类型. 此运算符指定不需要返回值,进行计算的表达式.它的语法可能是下列之一: <script ...

  8. 详解Javascript中正则表达式的使用

    章节目录 Javascript中正则表达式的使用 String.prototype.search方法 String.prototype.replace方法 String.prototype.split ...

  9. 【JavaScript】详解JavaScript中的replace()函数

    replace 1. 方法简介 2. replace()使用 2.1 replace(字符串,字符串) 2.2 replace(正则表达式,字符串) 2.3 replace(正则表达式,functio ...

最新文章

  1. 多层陶瓷电容器用处_典型陶瓷电容的用途和作用
  2. python 创建json_使用Django和Python创建Json response的方法
  3. HTML入门第一和第二章
  4. 【渝粤题库】陕西师范大学200651线性代数 作业(高起专、高起本)
  5. python列表嵌套字典取值_我的 python 学习历程-Day05 字典/字典的嵌套
  6. 简单的动态JavaScript Ajax函数
  7. hdu acm2549
  8. DirectX11--HR宏关于dxerr库的替代方案
  9. Win10能聊微信不能上网的解决方案
  10. 2020年(农历庚子鼠年)春联大全(收藏必备)
  11. 2013 年 2 月专访董明珠
  12. 关于redis创建集群时出现[ERR] Node x.x.x.x:6379 is not empty. Either the node already knows other nodes (check
  13. 梅科尔工作室深度学习第五课-CNN
  14. 使用rest_framework的routers模块添加路由
  15. python写入excel怎么跨列居中_python文件读写(三)-Excel表格三剑客xlwt,xlrd,xlutils...
  16. 期末复习操作系统---设备管理
  17. PMP项目管理知识体系(全集),建议收藏
  18. ps抠图方法、技巧大集合!
  19. 【数据库系列】数据库基本知识点整理
  20. 新手小白如何快速学好PS平面设计?需要什么技巧?

热门文章

  1. 收到灾区小朋友的电话祝福
  2. 初步使用github,并上传下载文件
  3. 如何通过Windows Server 2008 R2建立NFS存储
  4. Ubuntu-16-04-编译-Caffe-SSD
  5. es6重点笔记:数值,函数和数组
  6. 有些事情现在不做一辈子就都不会做了
  7. C# 视频监控系列(11):H264播放器——封装API[HikPlayM4.dll]
  8. 介绍一种Web上打印技术
  9. 网络传播动力学_通过简单的规则传播动力
  10. srpg 胜利条件设定_英雄联盟获胜条件