JavaScript中Array.prototype.slice.call的使用原理

准备工作

要理解这段代码，需要先掌握两个原型方法的基础行为：一个是用于截取数据的 slice()，另一个是用于改变函数执行上下文的 call()。

第1步：理解 slice() 截取规则

slice() 方法可以用于数组和字符串，旨在从原数据中提取一段片段。它接受两个可选参数：start（起始索引）和 end（结束索引，不包含）。

• 正数索引：直接表示从前往后数的位置。
• 负数索引：表示从后往前数，即与原长度相加得到实际开始的位置。

例如，处理数值数组时：

[1,2,3,4,5,6].slice(2,4); // 返回 [3, 4]
[1,2,3,4,5,6].slice(-4,-2); // 同样返回 [3, 4]

若只传一个参数，则从指定位置一直截取到末尾。此外，虽然 substring() 和 substr() 也能用于字符串截取，但它们在处理负数参数时的行为与 slice 不同（如 substring 会将负数视为 0），而 slice 对负数的处理最为直观。

第2步：掌握 call() 改变作用域

call() 和 apply() 都是用来指定函数内部 this 指向的方法，以此实现作用域的复用。区别在于传参方式：call 需要逐个传入参数，而 apply 接收一个参数数组。

由于这里的核心是将非数组对象当作数组来使用截取功能，我们需要利用 call 让原本属于 Array 原型的 slice 方法，去操作目标对象（如 arguments）。

深度解析 Array.prototype.slice.call 的实现

Array.prototype.slice.call(arguments, 0) 的真实运作过程如下：

1. 获取方法：找到数组原型上的 slice 方法。注意：slice 是定义在数组原型上的，普通的对象或 DOM 节点集合通常没有这个方法。
2. 借用方法：使用 call(thisArg, arg1, ...) 将该方法强行应用在一个具有 length 属性和对应索引的属性对象上（例如 arguments）。
3. 内部执行：在 slice 执行的瞬间，其内部的 this 指向了 arguments 对象。slice 会遍历这个“伪数组”，从索引 0 开始，按照 length 的长度，将每一项属性值推入一个新的真实数组中。

// 假设我们手动模拟 slice 的内部逻辑：
Array.prototype.mySlice = function(start, end) {
  var result = new Array();
  start = start || 0;
  end = end || this.length; 
  for(var i = start; i < end; i++) {
     result.push(this[i]); // 这里的 this 实际上就是被传入的对象
  }
  return result;
}

当调用 Array.prototype.slice.call(obj) 时，obj 拥有了 this 上下文，从而成功将其元素复制到了新创建的数组中。这是一种典型的“借用”模式。

适用范围与注意事项

并不是所有带 length 属性的对象都能被成功转换。

• 成功案例：函数的 arguments、包含连续数字索引的对象。
• 失败案例：某些特殊环境下的 DOM 集合。特别是在较旧的 IE 浏览器中，DOM 对象是以 COM 对象形式实现的，由于 JS 对象与 COM 对象的边界限制，无法直接通过这种方式进行转换，可能会报错。

另外，对于纯自定义的对象，如果只有 length 但没有对应的索引属性，转换结果将充满 undefined。例如：

var a = {length: 2};
console.log(Array.prototype.slice.call(a)); // 输出 [undefined, undefined]

封装通用的转换工具

为了方便日常开发，我们可以将这种转换逻辑封装为一个函数。为了兼容不支持此类借用的极端情况，可以加入异常捕获作为降级方案（如直接遍历赋值）：

function toArray(s) {
  try {
    // 优先尝试原型方法转换
    return Array.prototype.slice.call(s);
  } catch(e) {
    // 降级方案：使用 for 循环构建真实数组
    var arr = [];
    for(var i = 0, len = s.length; i < len; i++) {
      arr[i] = s[i]; // 直接索引赋值在某些场景下比 push 性能更好
    }
    return arr;
  }
}

总结

综上所述，Array.prototype.slice.call() 巧妙结合了原型链继承与方法执行上下文的转移特性，成为了 ES6 之前（及现代环境中）将类数组转真数组最简洁、高效的手段之一。