資訊專欄INFORMATION COLUMN
摘要：好久沒上，昨天上來看到一個問題，引起了我的興趣。請看上面的例子可能很多前端童鞋都很知道可以用于將類數(shù)組對象轉(zhuǎn)為數(shù)組，和的用法和作用網(wǎng)上一搜一大堆。在這里主要是為了讓借用構(gòu)造函數(shù)原型上的方法，并且改變方法里的的指向。
好久沒上SF，昨天上來看到一個問題，引起了我的興趣。一番探索和研究后，有了此篇文章，也算是對該問題的解答。
let pretendArr = {0:0,1:1,2:2,length:3};
[].slice.call(pretendArr); //[0,1,2]
請看上面的例子
可能很多前端童鞋都很知道 Array.prototype.slice.call 可以用于將類數(shù)組對象轉(zhuǎn)為數(shù)組，call 和 apply 的用法和作用網(wǎng)上一搜一大堆。
在這里主要是為了讓 pretendArr 借用Array構(gòu)造函數(shù)原型上的 slice 方法，并且改變 slice 方法里的 this 的指向。
所以這個問題其實不在于 call 或者 apply，關(guān)鍵在于 Array.prototype.slice 這個方法上。
slice這個方法是js原生方法，自然而然，我會想到去找找 es 的規(guī)范，看看這個方法是怎樣定義，以及如何實現(xiàn)的。
以下是es對該方法定義的截圖，圖片看不清楚的童鞋可以看看鏈接
嫌英文字母太多的可以直接看以下我寫的slice方法的偽代碼：
Array.prototype.slice = (start, end) => {
let O = ToObject(this)
let A = new Array()
let lenVal = O.length
let len = ToUnit32(lenVal)
let relativeStart = ToInteger(start)
let k, final, relativeEnd
if (relativeStart < 0) {
k = max(len + relativeStart, 0)
} else {
k = min(relativeStart, len)
}
if (end === undefined) {
relativeEnd = len
} else {
relativeEnd = ToInteger(end)
}
if (relativeEnd < 0) {
final = max(len + relativeEnd, 0)
} else {
final = min(relativeEnd, len)
}
let n = 0
while (k < final) {
let Pk = ToString(k)
let kPresent = O.hasOwnProperty(Pk)
if (kPresent) {
let kValue = O[Pk]
Object.defineProperty(A, ToString(n), {
value: kValue,
writable: true,
enumerable: true,
configurable: true
})
}
k++
n++
}
return A
}
ToObject、ToUnit32、ToInteger、ToString
slice 方法不要求 this 必須是數(shù)組，因此類數(shù)組對象也可以調(diào)用該方法，在本例中入?yún)?start 和 end 均為 undefined，實際上是根據(jù) 類數(shù)組對象 的 length 屬性，從0到length-1去把類數(shù)組對象對應(yīng)的值取出來，放到前面聲明的數(shù)組 A 里，最終再return A
因此，類數(shù)組對象的 length 屬性很重要，并且該對象里的數(shù)序也很重要，都會影響到轉(zhuǎn)換為數(shù)組的結(jié)果。如以下例子：
let pretendArrA = {0:0, 1:1, 2:2, length:2};
[].slice.call(pretendArrA); //[0,1]
let pretendArrB = {0:0, 2:2, length:3};
[].slice.call(pretendArrB); //[0, undefined, 2]
第一次寫文章，想到哪寫到哪，寫得有點亂，各位看官勿怪，如果對你有用，還請點個贊~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/99805.html
摘要：偽數(shù)組及其轉(zhuǎn)換為真數(shù)組原理什么是偽數(shù)組定義擁有屬性和數(shù)值下標(biāo)屬性。不具有數(shù)組所具有的方法。偽數(shù)組是一個，而真實的數(shù)組是一個常見的偽數(shù)組參數(shù)數(shù)組對象列表比如通過得到的列表對象比如舉例通過得到的對象列表是一個偽數(shù)組。 偽數(shù)組及其轉(zhuǎn)換為真數(shù)組原理 什么是偽數(shù)組 定義： 擁有l(wèi)ength屬性和數(shù)值下標(biāo)屬性。 不具有數(shù)組所具有的方法。 偽數(shù)組是一個Object，而真實的數(shù)組是一個Array ...
摘要：深入淺出的理解問題的由來寫法一寫法二雖然和指向同一個函數(shù)，但是執(zhí)行結(jié)果可能不一樣。該變量由運行環(huán)境提供。所以，就出現(xiàn)了，它的設(shè)計目的就是在函數(shù)體內(nèi)部，指代函數(shù)當(dāng)前的運行環(huán)境。 深入淺出this的理解 問題的由來 var obj = { foo: function(){} } var foo = obj.foo; // 寫法一 obj.foo(); // 寫法二 foo...
摘要：第一個借用數(shù)組的方法請輸入代碼第二個新增的一個方法第三個原型將對象轉(zhuǎn)換為數(shù)組 第一個借用數(shù)組的slice方法 var a ={ 0:t, 1:a, 2:r, length:3 } let b=Array.prototype.slice.call(a); console.log(b) 請輸入代碼 第二...
摘要：之前文章詳細(xì)介紹了的使用，不了解的查看進(jìn)階期。不同的引擎有不同的限制，核心限制在，有些引擎會拋出異常，有些不拋出異常但丟失多余參數(shù)。存儲的對象能動態(tài)增多和減少，并且可以存儲任何值。這邊采用方法來實現(xiàn)，拼成一個函數(shù)。 之前文章詳細(xì)介紹了 this 的使用，不了解的查看【進(jìn)階3-1期】。 call() 和 apply() call() 方法調(diào)用一個函數(shù), 其具有一個指定的 this 值和分...
摘要：從這段描述可以得到以下對象小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了，一看到人就會每隔半秒叫一聲地不停叫喚。將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛芍付ǖ男聦ο蟆? 1、JavaScript數(shù)據(jù)類型有哪些？ 基本數(shù)據(jù)類型：Number、String、Boolean、Null、Undefined 引用數(shù)據(jù)類型：Object（Array、Date、RegExp、Funct...
閱讀 1028·2021-11-24 10:42
閱讀 3579·2021-11-19 11:34
閱讀 2729·2021-09-29 09:35
閱讀 2611·2021-09-09 09:33
閱讀 753·2021-07-26 23:38
閱讀 2591·2019-08-30 10:48
閱讀 1455·2019-08-28 18:07
閱讀 482·2019-08-26 13:44
