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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
详解a++和++a的区别
Aug 30 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
vue路由插件之vue-route
Jun 13 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
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 图片加水印与上传图片加水印php类
2010/05/12 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
犀利的js 函数集合
2009/06/11 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python简单实现插入排序实例代码
2020/12/16 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
大型营销活动计划书
2014/04/28 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
国情备忘录观后感
2015/06/04 职场文书
红高粱观后感
2015/06/10 职场文书
观后感的写法
2015/06/19 职场文书
信用卡工资证明范本
2015/06/19 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL