你知道[ ].slice.call()的原理嗎?

在ES6之前,咱們將一個僞數組轉換爲真正數組一般狀況下都是使用[ ].slice.call()方法,那麼你知道這裏面的實現原理嗎?
補充:ES6的方法爲 Array.from() javascript

首先,咱們先來複習一下slice()方法: java

slice(start,end)接受兩個參數,startend是將一個數組從start項開始截取到end項但不包含end數組

其次,咱們再來看一下call(): app

call(thisArg,arg1, arg2, ...)thisArg表明當前函數執行時this的指向,args爲函數的參數(this的指向問題不在這裏過多補充,還不清楚的同窗能夠自行搜索) 函數

最後,咱們再回憶一下什麼是僞數組:
僞數組有一個明確的標識,length屬性,而且是以索引的方式進行存儲:ui

let array = { '0': 'a', '1': 'b', '2': 'c', length: 3 }
如上,一個很是典型的僞數組。 this

補充:咱們都知道slice是js數組的原生方法,因此在使用時還有一種寫法就是Array.prototype.slice.call() spa

那麼[].sliceArray.prototype.slice有什麼區別呢?其實一般狀況下二者並沒有區別,這個能夠經過打印[].slice === Array.prototype.slice來佐證。 prototype

複習完了基礎理論,咱們如今就來捋一捋這二者之間是如何實現將一個僞數組轉化成真正數組的。
舉個例子:code

function test({
    return  [].slice.call(arguments)
}
var list = test(456// [4,5,6]
複製代碼

在上面的例子中咱們經過call()將[].slice中的this指向了arguments,使其擁有了slice方法。slice()若是不傳參則是從第0項開始截取到length-1項並返回截取後的數組[4,5,6]上面其實就是省略了call()的第二個參數,你能夠把它看做爲[].slice.call(arguments,0)

綜上,其實現的主要原理就是利用改變this的指向來實現繼承。

以上就是我所理解的實現原理,若有誤歡迎指正,一定虛心接受。

相關文章
相關標籤/搜索