解析Array.prototype.slice.call(arguments)
在es5标准中,我们经常需要把arguments对象转换成真正的数组
// 你可以这样写
var arr = Array.prototype.slice.call(arguments) // 你还可以这样写
var arr = [].slice.call(arguments) // 你要是不怕麻烦,你还可以这样写
var arr = [].__proto__.slice.call(arguments)
以上三种写法是等价的。
// 当你了解原型链,你就知道
Array.prototype === [].__proto__ // true // [].slice调用的是实例[]的原型对象中的slice方法
[].slice === [].__proto__.slice // true
Array.prototype.slice.call(arguments)原本调用slice的是Array.prototype,而call(arguments)使得调用slice方法的对象改成arguments,你可以想象成
Array.prototype.slice.call(arguments) ~ arguments.slice()
Array.prototype.slice.call(arguments, [begin[, end]]) ~ arguments.slice([begin [, end]])
我们可能会想arguments原型对象是Object.prototype,并没有slice方法,slice方法从哪里来?
这是因为call(arguments)不仅是改变了this的指向,还使得arguments对象继承了Array.prototype中的slice方法。
下面是Array.prototype.slice()源码:指路github地址 587行
function ArraySlice(start, end) {
CHECK_OBJECT_COERCIBLE(this, "Array.prototype.slice");
var array = TO_OBJECT(this);
var len = TO_LENGTH(array.length);
var start_i = TO_INTEGER(start);
var end_i = len;
if (!IS_UNDEFINED(end)) end_i = TO_INTEGER(end);
if (start_i < 0) {
start_i += len;
if (start_i < 0) start_i = 0;
} else {
if (start_i > len) start_i = len;
}
if (end_i < 0) {
end_i += len;
if (end_i < 0) end_i = 0;
} else {
if (end_i > len) end_i = len;
}
var result = ArraySpeciesCreate(array, MaxSimple(end_i - start_i, 0));
if (end_i < start_i) return result;
if (UseSparseVariant(array, len, IS_ARRAY(array), end_i - start_i)) {
%NormalizeElements(array);
if (IS_ARRAY(result)) %NormalizeElements(result);
SparseSlice(array, start_i, end_i - start_i, len, result);
} else {
SimpleSlice(array, start_i, end_i - start_i, len, result);
}
result.length = end_i - start_i;
return result;
}
arguments可以转换为数组对象也是因为

我们可以看到arguments对象成员属性类似数组,且有length属性,那是不是这样类似的对象都可以调用slice呢,我们试验一下
var obj = {
0: 'foo',
1: 'bar',
2: 'arg',
length: 3
}
console.log(Array.prototype.slice.call(obj))
// ["foo", "bar", "arg"]
这是可以的!
*PS:es6语法中新增了Array.from(),所以上述类型的对象可以Array.from(obj)就直接转化成数组!
解析Array.prototype.slice.call(arguments)的更多相关文章
- 解析 Array.prototype.slice.call(arguments,0)
Array.prototype.slice.call(arguments,0) 经常会看到这段代码用来处理函数的参数 网上很多复制粘帖说:Array.prototype.slice.call(argu ...
- 观V8源码中的array.js,解析 Array.prototype.slice为什么能将类数组对象转为真正的数组?
在官方的解释中,如[mdn] The slice() method returns a shallow copy of a portion of an array into a new array o ...
- Array.prototype.slice.call(arguments)
Array.prototype.slice.call(arguments)能够将具有length属性的对象转化为数组, 可以理解为将arguments转化成一个数组对象,让它具有slice方法 如: ...
- 详解 Array.prototype.slice.call(arguments)
首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...
- Array.prototype.slice.call(arguments) 类数组转成真正的数组
Array.prototype.slice.call(arguments) 我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数 ...
- 转对象(含length属性)成数组Array.prototype.slice.call(arguments)
我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js ...
- js基础进阶--关于Array.prototype.slice.call(arguments) 的思考
欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...
- 理解Array.prototype.slice.call(arguments)
在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理: 1.基本讲解 1.在 ...
- Array.prototype.push.apply(a,b)和Array.prototype.slice.call(arguments)
Array.prototype.push.apply(a,b) 时常看到在操作数组的时候有这样的写法: var a = [1,2,3]; var b = [4,5,6]; a.push.apply(a ...
随机推荐
- java设计模式-----18、职责链模式
概念: Chain of Responsibility(CoR)模式也叫职责链模式.责任链模式或者职责连锁模式,是行为模式之一,该模式构造一系列分别担当不同的职责的类的对象来共同完成一个任务,这些类的 ...
- python学习之老男孩python全栈第九期_第二周学习总结
迭代器 双下方法:很少直接调用的方法,一般情况下,是通过其他语法触发的 1. 可迭代的 --> 可迭代协议:含有__iter__的方法( '__iter__' in dir(数据) ) 可迭代的 ...
- 关于JqueryCheck选中获取数据
关于Jquery获取Check选中数据 首先还是得引用Jquery的包,然后新增3个CheckBox <div> <input type="checkbox" n ...
- node.js(http协议)
七层网络协议 应用层:浏览器(http,FTP,DNS,SMTP,TeInet)(邓哥)表示层:加密,格式转换(怕别人偷看,加密摩斯电码)会话层:解除或者建立和其他节点的联系(邓哥在想追这个女孩,不再 ...
- ASP.NET SignalR-B.S/C.S 相互打通DEMO
ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信. 什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知 ...
- 学web前端一定要这样学,不然学完找不到工作哭都来不及!
因为工作原因,经常关注有关互联网行业的最新动态.这不,刚送走了高考,又迎来了每年的毕业季,看到好多人都说今年的前端工作不好找,很多童鞋简历投了一大堆,也没有回应,发现连实习的机会都没有,好不容易去面试 ...
- ubuntu下使用python3的有些库时,解决"raise ImportError(str(msg) + ', please install the python3-tk package') ImportError: No module named '_tkinter', please install the python3-tk package"的错误
问题: 在Ubuntu下使用matplotlib这个库时,运行时出现如下错误: raise ImportError(str(msg) + ', please install the python3-t ...
- <Android 基础(二十九)> Fragment (2) ~ DialogFragment
简介 上一篇简单的介绍了下Fragment的使用方法,这一篇主要看下DialogFragment. 在android 3.0时被引入.是一种特殊的Fragment,用于在Activity的内容之上展示 ...
- OpenGL学习--07--模型加载(obj)
1.tutorial07.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> #inc ...
- oracle 手动打jar 包
1.到loracle 的安装目录,D:\ProgramFiles\oracle\product\11.2.0\dbhome_1\jdbc\lib,找到文件 ojdbc6.jar,复制到 D 盘. 2. ...