NodeList 借用call方法使用Array.prototype.map方法

感谢小铭专研的精神,让我又进一步

今天一大早,小铭就抛来一个疑问(他是 android 开发,但我觉得他研究 javascript 的精神比我还可敬,佩服,可怜了我这个前端):

return Array.prototype.map.call(links,function(e){
    return e.getAttribute('href');
})
return links.map(function(e){
    return e.getAttribute('href');
})

他说,如果这两个方法是等价的,那为什么要写第一种那么长来实现?
我先入为主的观念打死的认为 links 就是一个数组,这两种方法不就是等价的嘛?第一个就是调用了 Array 原型上的 map 方法,一般装逼的人喜欢这么用,但寻思着着不科学啊,第二种方法 links 就是一个数组,那当然就继承了 map 方法,为何还有这两种写法呢?
一再的和他讨论,一再的被否决,一再的查文档,我坚定的认为links就只能是一个数组,要不怎么可能会用Array的方法呢?况且我在测试对象的时候,返回的是一个空数组。
结果,小铭给的截图呆到我了,NodeList,节点的集合,没有考虑过。。。
小铭给的栗子
小铭给的解释
最后乖乖的MDN找答案:NodeList的解释
原来NodeList对象是一个节点的结合,是由 Node.childNodes 和 document.querySelectorAll 返回的集合,类数组的一种类型,只有item这个方法,自然就不会有 Array 对象的 map 方法或者 forEach 等等方法,它要想用 Array 的那些方法,有两种实现方式:
第一种:完全继承 Array 的所有方法

NodeList.prototype = Array.prototype;

第二种:用call()方法来调用 Array 原型链上的 map 方法

Array.prototype.map.call(links,function(e){})

最后,再一次感谢小铭,让我对 NodeList 的了解更深入了一些,我感觉今晚有一场大战要打,如何辩论赢过他的否定呢?先好好写工作先,我很忙的,呜呼

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值