JavaScript中split函数赋值给变量后结果不同的原因

嘿，这个问题真的戳中了JS里一个很关键的点——函数的this指向！很多刚接触JS的小伙伴都会在这里懵一下，我来给你掰扯清楚。

先还原一下你遇到的场景，大概是这样的对吧：

// 情况1：直接调用字符串的split方法，返回完整单词"this"
const str = "this is a test";
console.log(str.split(' ')[0]); // 输出 "this"

// 情况2：把split赋值给变量后调用，返回第一个字符
const splitFn = str.split;
console.log(splitFn(' ')[0]); // 输出的不是"this"，而是某个单字符

问题出在函数调用时的this指向上：

当你直接调用str.split(' ')的时候，split方法内部的this是指向str这个字符串实例的——它明确知道自己要处理的是"this is a test"这个字符串，所以按照预期分割成数组，取第一个元素就是"this"。

但当你把str.split赋值给splitFn之后，splitFn就变成了一个独立的普通函数，不再和str绑定。这时候调用splitFn(' ')，在非严格模式下，函数内部的this会指向全局对象（浏览器里是window，Node.js里是global）；如果是严格模式，this会是undefined。

而split方法是为字符串实例设计的，它需要this是一个字符串。当this不是字符串时，JS会自动把它转换成字符串：

• 非严格模式下，window转成字符串是"[object Window]"，调用split(' ')会把这个字符串按空格分割，取第一个元素就是"[object"；如果是调用split('')，第一个字符就是"["。
• 严格模式下，this是undefined，转成字符串是"undefined"，split('')的第一个字符就是"u"。

如果想把split存成变量还能正常使用，你可以手动绑定this：

// 方法1：用bind绑定原字符串
const splitFn = str.split.bind(str);
console.log(splitFn(' ')[0]); // 正常输出 "this"

// 方法2：调用时用call/apply指定this
const splitFn = String.prototype.split;
console.log(splitFn.call(str, ' ')[0]); // 也能输出 "this"

简单来说，JS里的对象方法（比如字符串的split、数组的map）都依赖this来确定操作对象，一旦把方法从对象上拆下来单独调用，this就会“迷路”，行为自然就变了～

内容的提问来源于stack exchange，提问作者Aniruddhsingh Rathore