来聊聊apply和call
今天在群里讨论的时候,看到有人问apply怎么使用,突然想起自己刚接触这个方法的时候,也是一样的摸不着头脑。
记得当时上网看了很多讲解,可实际用的时候还是感觉有些蒙蒙哒orz....
后来想一想,也许是网上的说法有些太模式化了,让新手无法理解吧。
那今天咱们就来试试用比较通俗的方式来解析一下这个apply以及它的兄弟call。
先看看apply的定义:对象的继承、复制对象等等...
说的都对,但是对于新手来说,有些难以理解。
恩,那我们来通俗易懂的聊聊它
好 废话不多说,先上代码:
function add(){
this.a = arguments[];
this.b = arguments[];
}; function applyAdd(a , b , c){ var B={
c:c
} add.apply(B,arguments); return B } var applys=applyAdd( , , ); console.log(applys.a+applys.b+applys.c) //输出6
很简单的一个加法运算。
这个加法运算实际上做了一件什么事情呢?
首先,我们创建一类:add 这个类有两个属性:this.a this.b
然后我们创建了另一个类:applyAdd 在这个类里我们使用了apply方法,然后给这个类定义了一个对象: B
然后我们返回这个对象。
接着给applyAdd类创建了一个新的实例:applys 请原谅我的命名比较没有创意,我说过我文笔不好嘛~~ ╮(╯▽╰)╭
好啦,我们接着看 紧接着我输出了一遍applys的applys.a+applys.b+applys.c
到这里我们要注意一下!:applys是applyAdd的实例, 但是applyAdd这个类并没有this.a和this.b! 也就是说正常来说我们这样输出应该返回NaN(undefined+undefined+3)
但是并没有,我们一样输出了6。 奥秘当然就在apply这个方法啦。
apply这个词翻译成中文是“使用”的意思。
但是我觉得这个翻译有些不太直观,我更倾向于把它叫做“抢劫”。。。
恩,既然是抢劫,首先要有一个被抢劫的倒霉蛋,还要有一个抢劫的劫匪嘛~
在这里我们的倒霉蛋自然就是add这个类啦,而劫匪就是B这个对象。
而劫匪就是apply的第一个参数:它必须要是一个对象(毕竟你不能说一串字符串是一个人嘛~)
但是这个劫匪,怎么说呢,脑子有些问题。 恩 这个体现在apply的第二个参数上:第二个参数是什么呢?是一个参数集合(一个数组)。
为什么说这个劫匪脑子有问题呢? 因为他会先给别人一些东西,然后再抢过来。。。
恩,干这种脱裤子那啥的事,不就是脑子有问题么。。。 不过没办法,计算机就是个脑子跟正常人不太一样的东西~ ╮(╯▽╰)╭
也就是说,这个时候 add里如果使用了参数,都会来自于apply第二个参数传入的东西。这里我们传入了applyAdd本身的参数进去,也就是最后传入的参数是[1,2,3]这样的一个数组。
当然,你也可以直接传一个数组[1,2,3]进去,效果是完全一样的。
然后我们在add内部把this.a和this.b用1和2来赋值,赋值完成后,还没等add乐呢,就一把抢过来~~
所以最后的实际运行过程是这样的:
function add(){
this.a = arguments[];//3. 哇!真好,竟然有人愿意给我钱~ 他一定是天使! 等等。。你要干嘛? 不要抢我的东西啊!!
this.b = arguments[]; //1.我有两个袋子,但是都是空的。谁能给我点钱呢?
}; function applyAdd(a , b , c){ var B={
c:c
} add.apply(B,arguments);//2.今天去抢劫add,不过他的两个袋子都是空的,没关系,我先给填上,然后再抢过来!哈哈哈,我真是太聪明啦~ //4. B:哈哈哈 今天抢了两个袋子!收入不错 return B } var applys=applyAdd( , , ); console.log(applys.a+applys.b+applys.c) // 5.B:数一数自己现在有多少钱! 6元!我真是太有钱了~
恩,大概就是这样一个过程 orz....
至于他的兄弟call,实际上跟apply的运行过程是完全一毛一样的,区别只在于:call的第二个参数,call实际上是可以有N个参数的,第一个参数一样是劫匪B,而后面的参数则是把apply的第二个参数从数组的形式变成了许多个独立的参数。
别如你apply里的第二个参数是[1,2,3] 但是如果使用call的话,就要改成add.call(B,1,2,3)这样的形式。
至于怎么使用它们,以及何时使用,不在今天的讨论范围之内,我们改天再聊。
来聊聊apply和call的更多相关文章
- 兄台息怒,关于arguments,您的想法和大神是一样一样的----闲聊JS中的apply和call
JavaScript提供了apply和call两种调用方式来确定函数体中this的指向,表现出来的特征就是:对象可以'借用'其他对象的方法.之前的几篇博客回顾了一些Web控件的一些开发方法,我们聊了如 ...
- 聊聊call、apply、bind的故事
说到call.apply.bind,前端的胖友可是不陌生.以下就从几个方面分别聊聊它们. 是什么?(what?) 实际上它们真正的样子是这样的: Function.prototype.call(thi ...
- 聊聊传统oo和js的某些对比——对象/函数/new关键字等
自己的学习记录,写的短点可以以后短时间内理清一些疑惑,看前要求你至少了解js中关于原型链等基本概念,因为文章直接以总结的形式理出知识点,没有去解释一些基本的概念! 1.1.熟记两句话,预预热 1. 函 ...
- 直播开始:'云榨汁机'诞生记--聊聊JavaScript中的'业务建模'
闭包是JavaScript中的一个重要特性,在之前的博文中,我们说闭包是一个'看似简单,其实很有内涵'的特性.当我们用JavaScript来实现相对复杂的业务建模时,我们可以如何利用'闭包'这个特性呢 ...
- 用 Function.apply() 的参数数组化来提高 JavaScript程序性能
我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 aler ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- js中apply的用法(转)
之一------(函数的劫持与对象的复制)关于对象的继承,一般的做法是用复制法: Object.extend见protpotype.js 的实现方法: Object.extend = function ...
- js 中的apply
之一------(函数的劫持与对象的复制)关于对象的继承,一般的做法是用复制法: Object.extend 见protpotype.js 的实现方法: Object.extend = functio ...
- pandas | 详解DataFrame中的apply与applymap方法
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是pandas数据处理专题的第5篇文章,我们来聊聊pandas的一些高级运算. 在上一篇文章当中,我们介绍了panads的一些计算方法, ...
随机推荐
- VS中的代码段功能
1.前言 开发人员不喜欢打字.如果你希望提高开发人员的生产力,减少键入的数量,这也同时减少打字稿的数量以及因此产生的编译器错误,这些都极大分散了开发人员的注意力.代码重用是开发人员收集代码的另一个原因 ...
- BZOJ2432 [Noi2011]兔农
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- [NOIP2013] 提高组 洛谷P1970 花匠
题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...
- dedecms /member/edit_baseinfo.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 会员模块中存在的SQL注入 Relevant Link: http:// ...
- ubuntu 设置 NAT 转发
针对需求: 嵌入式开发中,经常使用板子和笔记本通过网线直连,如果需要板子连接到外网,就比较尴尬. 最简单方法,可以把板子接到局域网内,我们的笔记本通过局域网交换机连接到板子,可是,这样要很多修改 IP ...
- [iOS 基于CoreBluetooth的蓝牙4.0通讯]
一.首先大致介绍下蓝牙4.0的模式,中心和周边: 一般情况下,iPhone作为中心,接收来自周边传感器(比如手环等)采集的数据. 二.那整一个数据通讯的协议是怎样的呢? 为什么要一层层搞这么复杂呢?据 ...
- C#调用c++Dll 结构体数组指针的问题
参考文章http://blog.csdn.net/jadeflute/article/details/5684687 但是这里面第一个方案我没有测试成功,第二个方案我感觉有点复杂. 然后自己写啦一个: ...
- BZOJ2827: 千山鸟飞绝
离散化坐标,每个坐标开一棵以鸟的编号为关键字的平衡树.每次插入时打2个标记,同时更新自身.这个方法比较显然,而且好写.正解好像用很迷的方法乱搞了一波,然后用线段树不打标记就做出来了,并不会. trea ...
- 【原】flux学习笔记
最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,入职新公司,现在的团队也开始在React领域有所尝试. 2016年应该是React 逐渐走向成熟的一年.之前在原来公司搞不懂的问 ...
- JQuery------$.get()和$.post()传递数据的使用方法
菜鸟教程地址: http://www.runoob.com/jquery/jquery-ref-ajax.html html(../Home/Index.cshtml) <!DOCTYPE ht ...