譯者注:本文要講的是ECMAScript 6中的知識點,如果你連ES5都不瞭解的話.我得說,你已經很落後了.CSS4,HTML6,甚至ES7 ES8都已經開始規划了,趕緊形動起來吧,否則淘汰!
有些時候,我們需要把一個數組展開成多個元素,然後把這些元素作為函數調用的參數.JavaScript中可以使用Function.prototype.apply來實現這種展開操作,但它不能被應用在執行建構函式的情況下.本文解釋了什麼是展開操作以及如何在使用new運算子的同時進行展開操作.
1.展開(Spreading)
展開的意思是在一個函數調用或方法調用中,或者執行一個建構函式時,通過一個數組來提供所需的參數.在Python中,這種操作稱之為unpacking. ECMAScript.next中已經有了(展開操作符)spread operator (表示為一個首碼...)來執行這個展開操作.在目前的JavaScript中,你可以通過Function.prototype.apply方法來實現同樣的效果.
譯者注:展開操作符除了能用在實參的位置,把數組展開,還可以用在形參的位置,表示剩餘參數.請看我翻譯的MDN文檔剩餘參數
2.展開函數參數
Math.max()方法返回它的0到若干個數實值型別的參數中的最大值.有了展開操作符,你可以直接使用一個數組來作為參數:
Math.max(...[13, 7, 30])
這等同於下面的寫法
複製代碼 代碼如下:
Math.max(13, 7, 30)
在目前的JavaScript中,你可以使用apply().
複製代碼 代碼如下:
> Math.max.apply(null, [13, 7, 30])
30
apply方法的作用是:使用下面的這種調用方式:
複製代碼 代碼如下:
func.apply(thisValue, [param1, param2, ...])
來代替這種
複製代碼 代碼如下:
thisValue.func(param1, param2, ...)
需要注意的是,func不一定是屬於thisValue的方法,apply可以讓它臨時擁有這個方法.
3.展開建構函式的參數
Date建構函式接受幾個數實值型別的參數,產生一個Date對象.通過展開操作符,你可以直接傳入一個數組.
複製代碼 代碼如下:
new Date(...[2011, 11, 24]) // 2011年的聖誕夜
但是,這次我們不能使用apply方法來實現展開操作,因為它不能與new一起工作:
複製代碼 代碼如下:
> new Date.apply(null, [2011, 11, 24])
TypeError: function apply() { [native code] } is not a constructor
new運算子希望Date.apply是一個建構函式.就算你用小括弧將這個運算式括起來,根本問題還是存在:apply執行的是一個函數調用,它不能將參數傳遞給new運算子.
3.1 解決辦法
第一步. 我們先讓結果變的正確,稍候再考慮怎麼用數組代替分割開的參數.
複製代碼 代碼如下:
new (Date.bind(null, 2011, 11, 24))
我們先用bind()來建立一個無參數的函數(參數已經綁定在這個綁定函數的內部了),然後使用new調用它,就像調用一個普通的建構函式一樣.bind的函數簽名如下:
複製代碼 代碼如下:
func.bind(thisValue, arg1, arg2, ...)
bind函數將原函數func轉變成一個全新的函數,這個全新函數的this值永遠是參數thisValue指定的值,並且它的初始參數包含了從arg1開始到最後的所有參數.當調用這個新函數時,新添加的參數會跟隨在那些已有的通過bind綁定的參數後面.MDN上有更詳細的資料.注意上面的例子中,第一個參數是null,因為Date函數並不需要一個thisValue:在作為建構函式調用時,new運算子會覆蓋掉通過bind指定的thisValue.
第二步.我們想把數組傳給bind.所以再次使用了apply,將一個數群組轉換為展開的參數傳遞給bind函數.
複製代碼 代碼如下:
new (Function.prototype.bind.apply(
Date, [null].concat([2011, 11, 24])))
我們在函數Function.prototype.bind上調用apply方法,帶有兩個參數:
•第一個參數: this的值指定為Date, 也就相當於上面寫的的Date.bind(...).
•第二個參數: 傳給bind方法的參數,null和後面的數組[2011, 11, 24]串連成的新數組.
3.2 一個庫函數
Mozilla建議將上述工作封裝成一個庫方法.下面的代碼正是在它們的建議之上稍微修改了一下:
複製代碼 代碼如下:
if (!Function.prototype.construct) {
Function.prototype.construct = function(argArray) {
if (! Array.isArray(argArray)) {
throw new TypeError("Argument must be an array");
}
var constr = this;
var nullaryFunc = Function.prototype.bind.apply(
constr, [null].concat(argArray));
return new nullaryFunc();
};
}
運行一下:
複製代碼 代碼如下:
> Date.construct([2011, 11, 24])
Sat Dec 24 2011 00:00:00 GMT+0100 (CET)
3.3 一個看似更簡單的解決方案
你可以手動實現new運算子的操作.例如:
複製代碼 代碼如下:
var foo = new Foo("abc");
實際上等同於:
複製代碼 代碼如下:
var foo = Object.create(Foo.prototype);
Foo.call(foo, "abc");
根據這個原理,我們可以寫一個簡單的庫方法:
複製代碼 代碼如下:
Function.prototype.construct = function(argArray) {
var constr = this;
var inst = Object.create(constr.prototype);
constr.apply(inst, argArray);
return inst;
};
唉!Date作為一個普通函數來調用和作為一個建構函式來調用是一樣的:它會忽略掉call()和apply()方法中第一個參數指定的this值,總會產生並返回一個新的執行個體.
譯者注:這裡作者理解錯了,Date作為普通函數調用和作為建構函式來調用是完全不一樣的.不加new的情況下,無論有沒有參數,Date()只會返回目前時間的字串,也就是(new Date()).toString()
複製代碼 代碼如下:
> Date.construct([2011, 11, 24])
{}
譯者注:內建的建構函式中,Array(),Function(),RegExp(),Error()等建構函式在調用時,加new或不加幾乎一樣.比如Array(10)也是產生一個數組,但Number(),String(),Boolean()就不一樣了.不加new它們是類型轉換函式,返回的是原始值,加new是建構函式,返回的是對象值.
複製代碼 代碼如下:
>typeof Number("1")
"number"
>typeof new Number("1")
"object"
正如你所看到的,在操作Date()方法時,我們所寫的這個construct()方法並不能如期工作,而且還有一些其他的內建建構函式也表現的和Date一樣.不過如果是在操作一個庫中自訂的建構函式的時候,這個方法基本可以正常工作(少部分建構函式返回了自己指定的對象值,而不是返回了預設的自動產生的執行個體this).
譯者注:一個建構函式的return語句只要返回的是個對象值,就會覆蓋掉預設的this值.比如:
複製代碼 代碼如下:
function Func1(){
this.value = "this"; return {}
}
function Func2(){
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() //返回的{}是個對象值,覆蓋了預設的this.{}>new Func2() //返回的1是個原始值,所以仍然返回預設的this.{value:"this"}>new Func3() //沒有return語句,預設返回了undefined,是個原始值,所以仍然返回預設的this.{value:"this"}>new Func3 //沒有參數時,小括弧可以省略.{value:"this"}
