Array.prototype.xxx.call()处理字符串的疑惑

你不知道的JavaScript中卷 2.1数组时有个疑问。具体是这样的:

通过“借用”数组的方法可以很方便的处理字符串。可以“借用”数组的非变更方法,但不能“借用”数组的可变更方法。

用代码来描述就是:

var a = 'foo';
// 数组的非变更方法,即不改变原有数组的方法
var b = Array.prototype.join.call(a, '-');
var c = Array.prototype.map.call(a, v => v.toUpperCase()).join()
var d = Array.prototype.slice.call(a);
console.log(b); // 'f-o-o'
console.log(c); // 'FOO'
console.log(d); // ['f', 'o', 'o']

// 数组的可变更方法,即能够改变原有数组的方法
var e = Array.prototype.reverse.call(a);
// chrome: Uncaught TypeError: Cannot assign to read only property '0' of object '[object String]'

刚开始比较疑惑:

  • 为什么字符串可以通过这种方式,使用数组方法呢
  • 为什么所谓的非变更方法可以这样用而可变更方法 不能呢

当我看到Uncaught TypeError: Cannot assign to read only property '0' of object '[object String]'这个报错时算是有些明白了。

  1. 我们知道,call 的第一个参数是作为上下文对象的,但这里直接传入的是字符串变量a,看到[object String] 时可以知道,这里使用了字符串的封装对象String
var f = new String(a);
console.log(f); // String {0: f, 1: 0, 2: 0, length: 3,}
// 类数组对象大多有两个特征,属性名是0,1,2...,有length属性

数组的非变更方法 是不改变原数组,并返回一个新数组的。那么每次调用必定产生一个新数组,并遍历上下文对象,把对应索引上的值赋给新数组:

fn(){
  var newArray = [];
  for(var i = 0,len = f.length; i < len; i++){
     newArray[i] = f[i];  
  }
  return newArray;
}

这就解释了第一个问题,为什么可以通过Array.prototype.xxx.call() 这种方式操作字符串。

  1. 注意到报错中的read only,我想到了对象每个属性的描述对象
Object.getOwnPropertyDescriptors(f);
/**
{
  0: {value: "f", writable: false, enumerable: true, configurable: false},
  1: {value: "o", writable: false, enumerable: true, configurable: false},
  2: {value: "o", writable: false, enumerable: true, configurable: false},
  length: {value: 3, writable: false, enumerable: false, configurable: false}
}
*/

可以看到只有 enumerable: true其余均为 false, 每个属性只能被枚举,而不能被更改,而数组的可变更方法reverse等,均要直接操作上下文对象(数组或类数组)。但[Object String]的属性是只读的,不能更改,不能配置。这就解释了第二个问题。

虽然最初的疑惑算是有了个比较合理的解释了,但其实还是有很多问题的:

  • 书中说 Array.prototype.reverse(a) 返回值是 字符串foo的封装对象,但我的chrome会报错,试了firefox 、edge、ie11、ie10、ie9都会报错,只有ie8会返回[object String]{0: undefined, 1: undefined, 2: undefined},其他浏览器没有测试。
  • 既然类数组的结构可以这样使用数组的方法,那么部署了Iterator遍历器接口的数据结构是不是也可以这么用,如果可以,调用数组方法时的逻辑是否和类数组一样?如果不可以又是为什么...等等。不过,这感觉扯的有点远了...也有些没有意义,既然都有Iterator了,一般情况下是在ES6环境下,我一个扩展运算符[...a]或者直接Array.from()不就生成一个数组了么,干嘛要费劲巴拉的用call

这里虽然给出了两个问题的解释,但都是从自己的理解出发的,总感觉有些未尽之意或者难以再深入下去,有自己理解的朋友大家可以交流下。有不对的地方也欢迎指正。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,145评论 0 13
  • 前言 最先接触编程的知识是在大学里面,大学里面学了一些基础的知识,c语言,java语言,单片机的汇编语言等;大学毕...
    oceanfive阅读 3,068评论 0 7
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • 明明应该早早错过 却偏偏回了眸 明明可以紧紧抓住 却偏偏放了手 四目相对的一瞬间 是谁触动了谁的心弦 身影交错的一...
    晓周阅读 235评论 0 2
  • 春节前,一位记者到家中采访我。预先虽通过几次电话,时日也一拖再拖,但心里还是并不十分清楚她究竟要采访些什么。某些记...
    金玉良缘传媒阅读 276评论 0 0