實現1.add(1).add(2).add(3)……的級聯疊加

最近在面試的時候,面試官問我:“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>


發佈了28 篇原創文章 · 獲贊 2 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章