实现1.add(1).add(2).add(3)……的级联叠加

最新推荐文章于 2025-02-05 17:45:00 发布

原创最新推荐文章于 2025-02-05 17:45:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

34 篇文章

订阅专栏

JavaScirpt

31 篇文章

订阅专栏

本文详细解析了如何在JavaScript中实现数的叠加求和操作，包括将数值转换为对象、实现add方法、调用this以及实现级联调用的方法。

最近在面试的时候，面试官问我：“1.add(1).add(2).add(3)...我希望这样来实现数的叠加求和，你告诉我怎么实现？”

我哑口无言。回来经过不断的调试，终于被我找到了实现的方法。

首先，要和大家说的是，1.add(1).add(2)是绝对实现不了的。为什么呢？因为1它不是一个对象，直接运行此代码，会报“语法错误”。

所以，

问题1：如何将1转变为对象。

经过测试，我所想到的方法为：直接new一个新的Number对象出来，使用方法为：

new Number(1).add(1).add(2);

用new Number(1)替换单独的1，才可实现调用。

问题1解决了，我们来看看问题2。

问题2：add方法应该放在哪里？

在实现add()方法的时候，脑海里面第一时间想到的实现方法是：

var add = function(n){
    return this + n;
}

但是很要命的是，这个方法根本无法执行。

意思是，add()方法不存在。

其实这是必然的，因为我们的add()没有放在正确的位置上。

其实我们应该将add放在Number.prototype中，这样才可以让number对象调用到add方法。

Number.prototype.add = function(){
    return this + n;
}

好的，我们完成了问题2，接下来是问题3。

问题3：如何调用this。

在一开始的时候，我曾想过这样实现多变量相加。

<pre name="code" class="javascript"><pre name="code" class="javascript">Number.prototype.add = function(){
    var i;
    for(i = 0; i < arguments.length; i++){
        this += arguments[i];
    }
    return this;
}

但是最终结果却是报错。

其实原因在于：this不能被修改。因此请不要尝试在等号左边放上this，这样必然会报错。

所以最终应该如此实现：

Number.prototype.add = function(){
    var i, sum = 0;
    for(i = 0; i < arguments.length; i++){
        sum += arguments[i];
    }
    return this + sum;
}

问题4：如何实现级联调用。

所谓的级联调用，就是指add(1).add(2).add(3)……，类似的一直无限的调用。

要实现的方法很简单，只需要在add()方法的最后加上一句：

    return this;

如此便可实现级联调用。

最终的实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<script>
	Number.prototype.add = function(){
	 	var i, sum = 0;
	 	for(i = 0; i < arguments.length; i++){
	 		sum += arguments[i];
	 	}
	 	return this + sum;
	}
	alert(new Number(1).add(2,3,4,5));  //15
</script>
</body>
</html>