Array.prototype.concat不是通用方法反驳[译]


Posted in Javascript onSeptember 20, 2012

ECMAScript 5.1规范§15.4.4.4 中说到:

concat函数是有意设计成通用的;它并不要求它的this值必须得是个Array对象.因此,它可以被转移到其它类型的对象上作为方法来调用.

本文中的代码都使用了[]来作为Array.prototype的快捷方式.这已经是很常用的技巧了,虽然可读性差点:你通过一个对象实例访问到了Array.prototype上的方法.但是,这样的访问方式在现代的JavaScript引擎中非常之快,以至于我怀疑,说不定在这种调用方式下,这些JavaScript引擎可能已经不再创建数组实例了.本文中所有的例子都在Firefox和V8中尝试运行过.

让我们看一下concat到底是不是个通用方法:如果它是一个通用方法,则不管this的值是一个真实数组还是个类数组对象(拥有length属性,能通过索引访问每个元素),方法的返回结果都应该是一样的.我们首先尝试在数组上调用concat方法:

> ["hello"].concat(["world"]) 
["hello", "world"] > [].concat.call(["hello"], ["world"]) // 和上面的一样 
["hello", "world"]

然后,我们使用一个类数组对象来进行上面的连接操作.结果应该是一样的.

> [].concat.call({ 0: "hello", length: 1 }, ["world"]) 
[ { '0': 'hello', length: 1 }, 'world' ]

特殊变量arguments也是一个类数组对象.结果仍然不是我们所期望的:
> function f() { return [].concat.call(arguments, ["world"]) } 
> f("hello") 
[ { '0': 'hello' }, 'world' ]

真正的通用方法应该是这样的Array.prototype.push:

> var arrayLike = { 0: "hello", length: 1 }; 
> [].push.call(arrayLike, "world") 
2 
> arrayLike 
{ '0': 'hello', '1': 'world', length: 2 }

译者注:浏览器只是按照标准来实现,所以并不存在bug的问题.

Javascript 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
网页javascript精华代码集
Jan 24 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 #Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 #Javascript
javascript分页代码(当前页码居中)
Sep 20 #Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 #Javascript
一个基于jquery的文本框记数器
Sep 19 #Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 #Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 #Javascript
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
jQuery插件简单学习实例教程
2016/07/01 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python爬虫超时的处理的实例
2018/12/19 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
浅析Django中关于session的使用
2019/12/30 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python for循环与getitem的关系详解
2020/01/02 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
结婚典礼证婚词
2014/01/11 职场文书
小学生暑假家长评语
2014/04/17 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python实现文字pdf转换图片pdf效果
2022/04/03 Python