闲聊js中的apply、call和arguments
JavaScript提供了apply和call两种调用方式来确定函数中的this的指向,在现实编码中,我确实
很少接触到这两个方法。但很无奈,很多面试题都要考这两种方法,我又没怎么用到,所以我们先来
闲聊下他们到底有什么用和到底怎么用。
我们先来聊一下apply的用法吧,它是用来改变函数的指向的,说白了,就是指向了别的函数的作用域。
例如看一下下面这个例子。
var A={
name:"我是小A",
fun:function(){
console.log("大家好! "+this.name)
}
} var B = {
name:"我是小B"
} A.fun(); //大家好! 我是小A
A.fun.apply(B); //大家好! 我是小B
可以看出来,当我们使用了apply将引用指向了B时,A调用fun时并不是调用本身中的name 而是调用了B中的那么;
但如果我们在调用函数中并没用引用到this,那么是不是说apply就失去了意义?再来看一下下面的例子
var A={
name:"我是小A",
fun:function(num,money){
console.log("大家好! "+this.name+" 我有"+num+"张"+money+"块")
}
} var B = {
name:"我是小B"
}
var monies = [10,20]; A.fun.apply(B,monies); //大家好! 我是小B 我有10张20块
可以看出:apply中
第一个参数为thisObject,调用时采用传入的thisObject代替函数体中this的指向
第二个参数传入一个数组,函数会用数组的值取代“参数列表"。
这里聊一下monies,就要说到参数列表,当然我们会想到arguments,在这里插入聊一下arguments。网
上arguments是具有数组某些特性的‘类数组‘(伪数组);其实JS并没有重载函数的功能,但是auguments对象
能够模拟重载。每个函数都有一个Arguments对象实例arguments,它引用着函数的实参,可以用数组下
标的方式”[]“引用arguments的元素。arguments.length为函数实参个数。
function test() {
var s = "";
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
s += arguments[i] + ",";
}
return s;
}
test("name", "age")
输出
name,age
在匿名函数中可以用arguements.callee引用函数自身。
例如 function(){
if(n>0) return 0;
else return n+arguments.callee(n+1);
}
回归正题,我们可以用arguments来代替函数中的参数
var A={
name:"我是小A",
fun:function(num,money){
console.log("大家好! "+this.name+" 我有"+arguments[0]+"张"+arguments[1]+"块")
}
} var B = {
name:"我是小B"
}
var monies = [10,20]; A.fun.apply(B,monies); //大家好! 我是小B 我有10张20块
这里又有一个问题,可不可以用Array.prototype.shift.apply(arguments)来代替arguments[0]呢?直接看代码
var A={
name:"我是小A",
fun:function(num,money){
console.log("大家好! "+this.name+" 我有"+Array.prototype.shift.apply(arguments)+"张"+arguments[1]+"块")
}
} var B = {
name:"我是小B"
}
var monies = [10,20]; A.fun.apply(B,monies); //大家好! 我是小B 我有10张undefined块
当我们使用Array.prototype.shift.apply(arguments)调用之后,arguments[0]就会被抹去,所以arguments[1]就会冒到arguments[0]上。
这可以看出arguments这个”伪数组“,除了不是”原型继承自’Array.prototype‘“职位,其他特征和数组是一样的。
最后,我们考虑一下,如果使用apply方法时,传入的第一个参数是null时,调用函数时,会发生什么情况,会不会报错呢!
不多说,直接上例子
var A={
name:"我是小A",
fun:function(num,money){
console.log("大家好! "+this.name+" 我有"+num+"张"+money+"块")
}
} var B = {
name:"我是小B"
}
var monies = [10,20];
name="我是小C" A.fun.apply(null,monies); //大家好! 我是小C 我有10张20块
可以看到 如果第一传入的参数是null的话,在函数提内的this会指向全局对象,在浏览器中就是window。
所以可以总结出两点:
1.如果函数中有明确使用this,那么this就会指向传入的第一个参数的作用域。
2.如果传入的第一参数为null时,this就会指向全局的作用域。
apply的另一种用法就是用于将数组分割为一个个元素。
例如想在数组中a[1,2,3,4]中寻找出最大的袁术出来。
如果直接调用Math.max(a);就会输出NaN,所以这时候我们可以这样
Math.max.apply(null,a); //输出4
聊完了apply之后,我们再聊一下call就更简单了,其实他们的作用都是一样的。他们唯一的区别就是
apply和call在形式参数上的不同,apply只能传入两个参数且,第二个参数传入的是数组,而call在
第二参数开始可以接受任意个参数。大家看下面的例子就一目了然了
var A={
name:"我是小A",
fun:function(num,money){
console.log("大家好! "+this.name+" 我有"+num+"张"+money+"块")
}
} var B = {
name:"我是小B"
}
var monies = [10,20];
A.fun(monies[0],monies[1]); //大家好! 我是小A 我有10张20块
A.fun.apply(B,monies); //大家好! 我是小B 我有10张20块
A.fun.call(B,monies); //大家好! 我是小B 我有10,20张undefined块
A.fun.call(B,monies[1],monies[2]); //大家好! 我是小B 我有20张undefined块
闲聊js中的apply、call和arguments的更多相关文章
- 兄台息怒,关于arguments,您的想法和大神是一样一样的----闲聊JS中的apply和call
JavaScript提供了apply和call两种调用方式来确定函数体中this的指向,表现出来的特征就是:对象可以'借用'其他对象的方法.之前的几篇博客回顾了一些Web控件的一些开发方法,我们聊了如 ...
- 深入理解js中的apply、call、bind
概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...
- js中的apply和call API
借用网上的一个例子: fun.call(this,arg1,arg2,arg3) fun.apply(this,arguments) this.fun(arg1,arg2,arg3) 三种方法等效. ...
- js中call apply方法的使用介绍
js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...
- js 中call,apply,bind的区别
call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...
- js中call(),apply(),以及prototype的含义
最近段时间主要学习前端去了,然而所遇到的一些问题我觉得有必要去深究一下 prototype: 1 js中有三种表达方法 类方法,属性方法,原型方法 function People(name) { th ...
- Js中的apply和call
1.call和apply都是为了改变某个函数运行时的上下文而存在的 2.也就是改变函数体内this的指向. 3.二者的作用完全一样,只是接受参数的方式不太一样. 4.call 需要把参数按顺序传递进去 ...
- js中的apply调用
今天看了阮一锋老师的一篇文章,感觉很明了对闭包的理解,尤其是文章中的apply的介绍 apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象. ...
- js中函数的 this、arguments 、caller,call(),apply(),bind()
在函数内部有两个特殊的对象,arguments 和 this,还有一个函数对象的属性caller. arguments对象 arguments是一个类似数组的对象,包含着传入函数的所有参数. func ...
随机推荐
- 搭建centos7的开发环境3-Spark安装配置
说起大数据开发,必然就会提到Spark,在这片博文中,我们就介绍一下Spark的安装和配置. 这是Centos7开发环境系列的第三篇,本篇的安装会基于之前的配置进行,有需要的请回复搭建centos7的 ...
- javascript封装的参数合并
o=$.extend(initializationInterface.defaultValue,o); o= $.extend({}, initializationInterface.prototyp ...
- LinkedList源码
1.介绍及注意事项 链表由Josh Bloch书写,属于Java集合框架中的一种,LinkedList实现的是双链表,实现了所有的链表操作,可能够实现所有元素(包括)的基本操作. 链表是非线程同步的, ...
- invalid bound statement (not found)
invalid bound statement (not found) mybatis 错误: 一般是Mapepr.xml文件中文nameapce没有和mapper接口发生映射,导致mybatis绑定 ...
- JS入门熟知
JS是面向对象的语言 封装 继承 多态 聚集(对象中具有引用其他对象的能力) JS使用中绝大多数情况不需要进行面向对象的设计,很多情况是使用已经设计好,准备好的对象,基于对象的语言. JS的使用(引入 ...
- 洛谷 P1450 解题报告
P1450.硬币购物 题目描述 硬币购物一共有\(4\)种硬币.面值分别为\(c1,c2,c3,c4\).某人去商店买东西,去了\(tot\)次.每次带\(d_i\)枚\(c_i\)硬币,买\(s_i ...
- 由清除float原理到BFC
关于浮动 设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界.普通元素不会对齐造成影响. 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决.例如 ...
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- Boyer-Moore(BM)算法,文本查找,字符串匹配问题
KMP算法的时间复杂度是O(m + n),而Boyer-Moore算法的时间复杂度是O(n/m).文本查找中“ctrl + f”一般就是采用的BM算法. Boyer-Moore算法的关键点: 从右遍历 ...
- .Net Core微服务系列--理论篇
微服务的由来 微服务最早由Martin Fowler与James Lewis于2014年共同提出来的,但是微服务也不是一个全新的概念,它是由一系列在实践中获得成功并流行起来的概念中总结出来的一种模式, ...