在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)的更多相关文章

  1. 解析 Array.prototype.slice.call(arguments,0)

    Array.prototype.slice.call(arguments,0) 经常会看到这段代码用来处理函数的参数 网上很多复制粘帖说:Array.prototype.slice.call(argu ...

  2. 观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 ...

  3. Array.prototype.slice.call(arguments)

    Array.prototype.slice.call(arguments)能够将具有length属性的对象转化为数组, 可以理解为将arguments转化成一个数组对象,让它具有slice方法 如: ...

  4. 详解 Array.prototype.slice.call(arguments)

    首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...

  5. Array.prototype.slice.call(arguments) 类数组转成真正的数组

    Array.prototype.slice.call(arguments)   我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数 ...

  6. 转对象(含length属性)成数组Array.prototype.slice.call(arguments)

    我们知道,Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js ...

  7. js基础进阶--关于Array.prototype.slice.call(arguments) 的思考

    欢迎访问我的个人博客:http://www.xiaolongwu.cn Array.prototype.slice.call(arguments)的作用为:强制转化arguments为数组格式,一般出 ...

  8. 理解Array.prototype.slice.call(arguments)

    在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理: 1.基本讲解 1.在 ...

  9. 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 ...

随机推荐

  1. CentOS 7 隐藏任务栏和顶栏

    我使用的是Gnome,对于使用惯了windows的我来说,这个界面确实有点丑,但是,也将就着用了,最近发现有一款软件(Cairo-Dock)可以美化桌面,于是就安装了,但是安装之后发现了一个问题:原来 ...

  2. Python Django ORM 字段类型、参数、外键操作

    AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 primary ...

  3. python中作用域

    Python 中,一个变量的作用域总是由在代码中被赋值的地方所决定的. 函数定义了本地作用域,而模块定义的是全局作用域.如果想要在函数内定义全局作用域,需要加上global修饰符. 变量名解析:LEG ...

  4. BZOJ1396: 识别子串(后缀自动机 线段树)

    题意 题目链接 Sol 后缀自动机+线段树 还是考虑通过每个前缀的后缀更新答案,首先出现次数只有一次,说明只有\(right\)集合大小为\(1\)的状态能对答案产生影响 设其结束位置为\(t\),代 ...

  5. js二分查找树实现

    function BinaryTree() { var Node = function(key) { this.key = key; this.left = null; this.right = nu ...

  6. 原生爬虫小Demo

    import re from urllib import request class Spider(): url = 'https://www.panda.tv/cate/lol' #[\s\S]匹配 ...

  7. Ubuntu VNC 打开spyder无法输入(检测不到键盘配置)解决方法

    在ubuntu中安装好spyder后, 打开spyder发现无法输入. 在打开spyder的终端窗口,有如下提示: QXcbConnection: Failed to initialize XRand ...

  8. 计算机二进制表示、cpu架构(x86_64)、cpu频率、核心、主板

    计算机二进制表示 色彩二进制表示: 红色 255,0,0绿色 0,255,0蓝色 0,0,255 文字二进制表示:A 65a 97 cpu架构 cpu架构有精简指令集和复杂指令集两种精简指令集cpu有 ...

  9. javaEE-EJB学习笔记

    EJB是sun的JavaEE服务器端组件模型,设计目标与核心应用是部署分布式应用程序.简单来说就是把已经编写好的程序(即:类)打包放在服务器上执行.凭借java跨平台的优势,用EJB技术部署的分布式系 ...

  10. Java类的封装

    java中四种不同的限定词限定的成员(成员变量或成员变量方法),访问权限由大到小依次为: public(公共的) 可以被所有的类访问 protected(受保护的) 可以被这个类本身访问 可以被它的子 ...