详解javascript中的call, apply
一些学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相关推荐
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- 前端中unescape是什么意思_详解JavaScript中的Unescape()和String() 函数
JavaScript中的Unescape()和String() 函数详解,具体内容如下所示: 定义和用法 JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解 ...
- 详解JavaScript中的this
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者-有人甚至因为坑大而不 ...
- 详解Javascript中的Array对象
本文地址:http://luopq.com/2016/04/01/Array-in-Javascript/,转载请注明 在上一篇文章中,我们详细介绍了Object对象.在这一篇文章中,我们来说说Arr ...
- 详解Javascript中的Object对象
本文地址:http://luopq.com/2016/02/28/Object-in-Javascript/,转载请注明 Object是在javascript中一个被我们经常使用的类型,而且JS中的所 ...
- 科普向--详解JavaScript中的数据类型
对于前端的小伙伴而言,JS的数据类型可谓是必懂的知识点.虽然这个知识点很是基础了,不过仍然有不少人会在这一块犯些小错误.比如网上流传的"JavaScriptS一切皆对象",其实是个 ...
- 详解JavaScript中void语句的使用
void是在JavaScript中的一个重要的关键字可被用作其单操作数之前出现一元运算符,其可以是任何类型. 此运算符指定不需要返回值,进行计算的表达式.它的语法可能是下列之一: <script ...
- 详解Javascript中正则表达式的使用
章节目录 Javascript中正则表达式的使用 String.prototype.search方法 String.prototype.replace方法 String.prototype.split ...
- 【JavaScript】详解JavaScript中的replace()函数
replace 1. 方法简介 2. replace()使用 2.1 replace(字符串,字符串) 2.2 replace(正则表达式,字符串) 2.3 replace(正则表达式,functio ...
最新文章
- 多层陶瓷电容器用处_典型陶瓷电容的用途和作用
- python 创建json_使用Django和Python创建Json response的方法
- HTML入门第一和第二章
- 【渝粤题库】陕西师范大学200651线性代数 作业(高起专、高起本)
- python列表嵌套字典取值_我的 python 学习历程-Day05 字典/字典的嵌套
- 简单的动态JavaScript Ajax函数
- hdu acm2549
- DirectX11--HR宏关于dxerr库的替代方案
- Win10能聊微信不能上网的解决方案
- 2020年(农历庚子鼠年)春联大全(收藏必备)
- 2013 年 2 月专访董明珠
- 关于redis创建集群时出现[ERR] Node x.x.x.x:6379 is not empty. Either the node already knows other nodes (check
- 梅科尔工作室深度学习第五课-CNN
- 使用rest_framework的routers模块添加路由
- python写入excel怎么跨列居中_python文件读写(三)-Excel表格三剑客xlwt,xlrd,xlutils...
- 期末复习操作系统---设备管理
- PMP项目管理知识体系(全集),建议收藏
- ps抠图方法、技巧大集合!
- 【数据库系列】数据库基本知识点整理
- 新手小白如何快速学好PS平面设计?需要什么技巧?