为什么不将".trim()"直接传递给"[].map()"的回调工作？

Question

我有一个字符串数组。我想修剪数组中的每个字符串。

我认为将[].map()与''.trim()结合使用会起作用。。。

[' a', ' b   ', 'c'].map(String.prototype.trim);

但我的控制台说。。。

TypeError:String.prototype.trim在null或未定义的上调用

jsFiddle。

我在数组中看不到任何null或undefined值。

String.prototype.trim()和Array.prototype.map()是在Chrome 17中定义的，我正在使用它进行测试。

为什么不起作用？我觉得我忽略了一些显而易见的东西。

我意识到我可以在那里循环或放弃一个函数。然而，这不是这个问题的重点。

Answer 1

@Slace所说的是正确的解释@ThomasEding的答案也有效，但有一个可怕的无效性，即它可能在循环中创建函数，这不是一件好事。

另一种方法是（此处参考）：

[' a', ' b   ', 'c'].map(Function.prototype.call, String.prototype.trim);  
// gives ["a", "b", "c"]

标准浏览器免责声明：这将适用于Function.prototype.call和String.prototype.trim工作的任何地方，对于较旧的浏览器，您可以很容易地用这样的polyfill替换trim：

if(!String.prototype.trim) {  
  String.prototype.trim = function () {  
    return this.replace(/^s+|s+$/g,'');  
  };  
}

更新：顺便说一句，虽然这在Chrome中运行得最快，但@ThomasEding的方法在IE10和FF20中运行得稍快http://jsperf.com/native-trim-vs-regex-trim-vs-mixed

Answer 2

这是因为没有使用正确的this上下文调用trim。请记住，this是在JS中动态绑定的。您必须创建一个包装器来传递给trim，以正确绑定this:

[' a', ' b   ', 'c'].map(function (str) {
  return str.trim();
});

Answer 3

trim在String原型上，这意味着它希望this上下文是字符串的上下文，其中Array上的map方法提供当前数组项作为第一个参数，this上下文作为全局对象。

Answer 4

使用ES6语法，它可以像这样简单：

[' hello  ', '  world'].map(str => str.trim());