当前位置：首页 > 全部内容 > 正文

JavaScript面试题解析：利用valueOf实现链式调用求和

作者：小满

时间：2026-10-21

浏览：478

本文通过一道经典的JavaScript面试题，深入解析了函数链式调用与类型转换的机制。文章详细讲解了如何结合高阶函数与重写valueOf方法，使add(1)(2)(3)等链式调用正确返回累加结果，并对比了toString与valueOf在隐式转换中的优先级差异。

文章目录

题目背景与初步尝试

近期技术交流群中有人分享了一道关于JavaScript的题目。

要求实现一个函数，使其运算结果符合特定的预期行为。


add(1)(2) // 3
add(1, 2, 3)(10) // 16
add(1)(2)(3)(4)(5) // 15

对于热衷于前端开发的工程师而言，这道题极具吸引力。初看题目，直觉提示这可能涉及高阶函数以及 Array.prototype.reduce() 的应用。

所谓高阶函数，是指接收另一个函数作为参数的函数。在 JavaScript 中，函数被视为一等公民，允许将其作为参数传递或作为返回值返回。

基于上述思路，尝试得出如下解决方案。


function add() {
 var args = Array.prototype.slice.call(arguments);
  return function() {
  var arg2 = Array.prototype.slice.call(arguments);
  return args.concat(arg2).reduce(function(a, b){
   return a + b;
  });
 }
}

经过验证，发现该方案存在缺陷：


add(1)(2) // 3
add(1, 2)(3) // 6
add(1)(2)(3) // Uncaught TypeError: add(...)(...) is not a function(…)

上述解法仅在 add()() 这种特定形式下生效。一旦链式操作的参数数量超过两个或少于两个，便无法正确返回结果。

这正是本题的难点所在：在调用 add() 时，如何既能返回一个具体的值，又能返回一个函数以供后续继续调用？

随后经高手指点，通过重写函数的 valueOf 方法或 toString 方法，可以得到另一种解法：


function add () {
 var args = Array.prototype.slice.call(arguments);
 var fn = function () {
  var arg_fn = Array.prototype.slice.call(arguments);
  return add.apply(null, args.concat(arg_fn));
 }
 fn.valueOf = function () {
  return args.reduce(function(a, b) {
   return a + b;
  })
 }
 return fn;
}

初次看到这个解法时，感到十分困惑。因为直觉上认为 fn.valueOf() 在整个过程中并未被显式调用，但验证结果却显示：


add(1) // 1
add(1,2)(3) //6
add(1)(2)(3)(4)(5) // 15

结果竟然正确无误！其中的玄机必然隐藏在 fn.valueOf = function() {} 内部。为何会如此运作？该方法究竟在何时被执行？接下来将逐步剖析。

valueOf与toString机制解析

关于 valueOf 和 toString

首先简要了解这两个方法的基本概念：

Object.prototype.valueOf()

根据 MDN 的定义，valueOf() 方法用于返回指定对象的原始值。

JavaScript 调用 valueOf() 方法旨在将对象转换为原始类型的值（包括数值、字符串和布尔值）。通常情况下，开发者无需手动调用此函数，valueOf 方法一般由 JavaScript 引擎自动调用。

请牢记上述观点，下文将详细阐述所谓的“自动调用”具体含义。

Object.prototype.toString()

toString() 方法返回表示该对象的字符串。

每个对象都拥有 toString() 方法，当对象以文本值形式表示或在期望字符串的上下文中引用对象时，该方法会被自动调用。

此处先做一铺垫：valueOf() 和 toString() 在特定场景下会自动触发。

关于原始类型

为了打好基础，先了解 JavaScript 中的几种原始类型。除去 Object 和 Symbol，主要包括以下几种：

  • Number
  • String
  • Boolean
  • Undefined
  • Null

在 JavaScript 进行对比或各类运算时，会将对象转换为上述类型，从而执行后续操作，下面逐一说明。

String类型转换规则

String 类型转换

当某个操作或运算需要字符串时，会触发 Object 的 String 转换，例如：


var obj = {name: 'Coco'};
var str = '123' + obj;
console.log(str); // 123[object Object]

转换规则如下：

  • 如果 toString 方法存在且返回原始类型，则返回 toString 的结果。
  • 如果 toString 方法不存在或返回的不是“原始类型”，则调用 valueOf 方法；若 valueOf 方法存在且返回“原始类型”数据，则返回 valueOf 的结果。
  • 其他情况，抛出错误。

上述例子实际上等价于：


var obj = {name: 'Coco'};
var str = '123' + obj.toString();

其中，obj.toString() 的值为 "[object Object]"。

假设处理的是数组：


var arr = [1, 2];
var str = '123' + arr;
console.log(str); // 1231,2

上述 + arr 实际上调用了 + arr.toString()。

不过，我们可以自行改写对象的 toString 或 valueOf 方法：


var obj = {
  toString: function() {
    console.log('调用了 obj.toString');
    return '111';
  }
}
alert(obj);
// 调用了 obj.toString
// 111

在上述 alert(obj) 中，obj 会自动调用自身的 obj.toString() 方法转化为原始类型。如果我们不重写 toString 方法，将输出 [object Object]；这里我们重写了 toString，且返回了一个原始类型字符串 111，因此最终 alert 输出 111。

根据上述转化规则，若 toString 方法存在但返回的不是原始类型，系统将继续寻找对象的 valueOf 方法：

下面尝试证明当 toString() 方法不可用时，系统会调用 valueOf() 方法，具体做法是改写对象的 valueOf：


var obj = {
  toString: function() {
    console.log('调用了 obj.toString');
    return {};
  },
  valueOf: function() {
    console.log('调用了 obj.valueOf')
    return '110';
  }
}
alert(obj);
// 调用了 obj.toString
// 调用了 obj.valueOf
// 110

从结果可见，当 toString 不可用时，系统会尝试 valueOf 方法；若 valueOf 方法存在且返回原始类型（String、Number、Boolean）数据，则返回 valueOf 的结果。

那么，如果 toString 和 valueOf 返回的均非原始类型呢？参考以下例子：


var obj = {
  toString: function() {
    console.log('调用了 obj.toString');
    return {};
  },
  valueOf: function() {
    console.log('调用了 obj.valueOf')
    return {};
  }
}
alert(obj);
// 调用了 obj.toString
// 调用了 obj.valueOf
// Uncaught TypeError: Cannot convert object to primitive value

可以发现，若 toString 和 valueOf 方法均不可用，系统会直接返回错误。

Number类型转换规则

Number 类型转换

上述描述的是 String 类型的转换，很多时候也会发生 Number 类型的转换：

  • 调用 Number() 函数，强制进行 Number 类型转换
  • 调用 Math.sqrt() 这类参数需要 Number 类型的方法
  • obj == 1 ，进行对比的时候
  • obj + 1 , 进行运算的时候

与 String 类型转换相似，但 Number 类型转换顺序相反，先查询自身的 valueOf 方法，再查询 toString 方法：

  1. 如果 valueOf 存在且返回原始类型数据，返回 valueOf 的结果。
  2. 如果 toString 存在且返回原始类型数据，返回 toString 的结果。
  3. 其他情况，抛出错误。

按照上述步骤，分别尝试一下：


var obj = {
  valueOf: function() {
    console.log('调用 valueOf');
    return 5;
  }
}
console.log(obj + 1);
// 调用 valueOf
// 6
var obj = {
  valueOf: function() {
    console.log('调用 valueOf');
    return {};
  },
  toString: function() {
    console.log('调用 toString');
    return 10;
  }
}
console.log(obj + 1);
// 调用 valueOf
// 调用 toString
// 11
var obj = {
  valueOf: function() {
    console.log('调用 valueOf');
    return {};
  },
  toString: function() {
    console.log('调用 toString');
    return {};
  }
}
console.log(obj + 1);
// 调用 valueOf
// 调用 toString
// Uncaught TypeError: Cannot convert object to primitive value

Boolean类型转换场景

Boolean 转换

何时会进行布尔转换呢：

  • 布尔比较时
  • if(obj) , while(obj) 等判断时

简单来说，除了下述 6 个值转换结果为 false，其他全部为 true：

  • undefined
  • null
  • -0
  • 0或+0
  • NaN
  • ''（空字符串）

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false　

函数转换与最终解法

Function 转换

好，最后回到我们一开始的题目，来讲讲函数的转换。

我们定义一个函数如下：


function test() {
  var a = 1;
  console.log(1);
}

如果我们仅仅是调用 test 而不是 test() ，看看会发生什么？

可以看到，这里把我们定义的 test 函数的重新打印了一遍，其实，这里自行调用了函数的 valueOf 方法：

我们改写一下 test 函数的 valueOf 方法。


test.valueOf = function() {
  console.log('调用 valueOf 方法');
  return 2;
} 
test;
// 输出如下：
// 调用 valueOf 方法
// 2

与 Number 转换类似，如果函数的 valueOf 方法返回的不是一个原始类型，会继续找到它的 toString 方法：


test.valueOf = function() {
  console.log('调用 valueOf 方法');
  return {};
}
test.toString= function() {
  console.log('调用 toString 方法');
  return 3;
}
test;
// 输出如下：
// 调用 valueOf 方法
// 调用 toString 方法
// 3

破题

再看回我正文开头那题的答案，正是运用了函数会自行调用 valueOf 方法这个技巧，并改写了该方法。我们稍作改变，变形如下：


function add () {
  console.log('进入add');
  var args = Array.prototype.slice.call(arguments);
  var fn = function () {
    var arg_fn = Array.prototype.slice.call(arguments);
    console.log('调用fn');
    return add.apply(null, args.concat(arg_fn));
  }
  fn.valueOf = function () {
    console.log('调用valueOf');
    return args.reduce(function(a, b) {
      return a + b;
    })
  }
  return fn;
}

当调用一次 add 的时候，实际是是返回 fn 这个 function，实际是也就是返回 fn.valueOf();


add(1);
// 输出如下：
// 进入add
// 调用valueOf
// 1

其实也就是相当于：


[1].reduce(function(a, b) {
  return a + b;
})
// 1

当链式调用两次的时候：


add(1)(2);
// 输出如下：
// 进入add
// 调用fn
// 进入add
// 调用valueOf
// 3

当链式调用三次的时候：


add(1)(2)(3);
// 输出如下：
// 进入add
// 调用fn
// 进入add
// 调用fn
// 进入add
// 调用valueOf
// 6

可以看到，这里其实有一种循环。只有最后一次调用才真正调用到 valueOf，而之前的操作都是合并参数，递归调用本身，由于最后一次调用返回的是一个 fn 函数，所以最终调用了函数的 fn.valueOf，并且利用了 reduce 方法对所有参数求和。

除了改写 valueOf 方法，也可以改写 toString 方法，所以，如果你喜欢，下面这样也可以：


function add () {
  var args = Array.prototype.slice.call(arguments);
  var fn = function () {
    var arg_fn = Array.prototype.slice.call(arguments);
    return add.apply(null, args.concat(arg_fn));
  }
  fn.toString = function() {
    return args.reduce(function(a, b) {
      return a + b;
    })
  }
  return fn;
}

这里有个规律，如果只改写 valueOf() 或是 toString() 其中一个，会优先调用被改写了的方法，而如果两个同时改写，则会像 String 转换规则一样，优先查询 valueOf() 方法，在 valueOf() 方法返回的是非原始类型的情况下再查询 toString() 方法。

如果你能认真读完，相信会有所收获。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS空字符串、null和undefined转数字的结果是什么

CodePen、JSFiddle与StackBlitz：主流JS在线编辑器对比

JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间

JavaScript将儒略日逆向还原为公历日期时间的实现方法

能在我的世界手机版直接修改JS代码吗

JavaScript必问面试题js用函数实现累加求和公式
相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法