成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

重學(xué)前端學(xué)習(xí)筆記(九)--JavaScript中的對(duì)象分類

tinna / 1451人閱讀

摘要:固有對(duì)象由標(biāo)準(zhǔn)規(guī)定,隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象,它能夠被原型繼承。

筆記說(shuō)明
重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】,如有侵權(quán)請(qǐng)聯(lián)系我,郵箱:[email protected]。
一、javaScript對(duì)象分類介紹 1.0、宿主對(duì)象(host Objects)
由 JavaScript 宿主環(huán)境提供的對(duì)象,它們的行為完全由宿主環(huán)境決定。
1.1、內(nèi)置對(duì)象(Built-in Objects)
由 JavaScript 語(yǔ)言提供的對(duì)象。
1.1.0、固有對(duì)象(Intrinsic Objects )
由標(biāo)準(zhǔn)規(guī)定,隨著 JavaScript 運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。
1.1.1、原生對(duì)象(Native Objects)
可以由用戶通過(guò) Array、RegExp 等內(nèi)置構(gòu)造器或者特殊語(yǔ)法創(chuàng)建的對(duì)象。
1.1.2、普通對(duì)象(Ordinary Objects)
{} 語(yǔ)法、Object 構(gòu)造器或者 class 關(guān)鍵字定義類創(chuàng)建的對(duì)象,它能夠被原型繼承。

下面winter主要介紹了普通對(duì)象之外的對(duì)象原型(剛好都是我不太懂的,mark一下)

二、宿主對(duì)象 2.0、window對(duì)象

全局對(duì)象 window 上的屬性,一部分來(lái)自 JavaScript 語(yǔ)言,一部分來(lái)自瀏覽器環(huán)境

宿主也會(huì)提供一些構(gòu)造器,比如使用 new Image來(lái)創(chuàng)建 img 元素(winter下次會(huì)講瀏覽器的API,到時(shí)再詳細(xì)的mark一下)

三、內(nèi)置對(duì)象·固有對(duì)象 3.0、簡(jiǎn)單介紹

固有對(duì)象在任何 JS 代碼執(zhí)行前就已經(jīng)被創(chuàng)建出來(lái),類似基礎(chǔ)庫(kù)的角色

ECMA 標(biāo)準(zhǔn)為我們提供了一份固有對(duì)象表,里面含有 150+ 個(gè)固有對(duì)象(鏈接打開比較慢,稍等一下就好)

3.1、小實(shí)驗(yàn):獲取全部 JavaScript 固有對(duì)象 3.1.0、三個(gè)值
Infinity、NaN、undefined
3.1.1、九個(gè)函數(shù)
eval、isFinite、isNaN、parseFloat、parseInt、decodeURI decodeURIComponent、encodeURI、encodeURIComponent
3.1.2、一些構(gòu)造器
Array、Date、RegExp、Promise、Proxy、Map、WeakMap、Set、WeapSet、Function、Boolean、String、Number、Symbol、Object、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError URIError、ArrayBuffer、SharedArrayBuffer、DataView、Typed Array、Float32Array、Float64Array、Int8Array、Int16Array、Int32Array、UInt8Array、UInt16Array、UInt32Array、UInt8ClampedArray
3.1.3、四個(gè)用于當(dāng)作命名空間的對(duì)象
Atomics、JSON、Math、Reflect
3.1.4、處理方法

1、winter的做法:使用廣度優(yōu)先搜索,查找這些對(duì)象所有的屬性和 Getter/Setter,就可以獲得 JavaScript 中所有的固有對(duì)象。

2、下面代碼可以研究一下看看,new Set()不懂的可以看看MDN關(guān)于set的介紹,(我現(xiàn)在還沒有看明白,我去不同網(wǎng)頁(yè)打開運(yùn)行輸出set不一樣,感覺有點(diǎn)懵逼_(:3」∠)_,理解的大佬可以留言告訴我,不勝感激)

var set = new Set();
var objects = [
    eval,
    isFinite,
    isNaN,
    parseFloat,
    parseInt,
    decodeURI,
    decodeURIComponent,
    encodeURI,
    encodeURIComponent,
    Array,
    Date,
    RegExp,
    Promise,
    Proxy,
    Map,
    WeakMap,
    Set,
    WeakSet,
    Function,
    Boolean,
    String,
    Number,
    Symbol,
    Object,
    Error,
    EvalError,
    RangeError,
    ReferenceError,
    SyntaxError,
    TypeError,
    URIError,
    ArrayBuffer,
    SharedArrayBuffer,
    DataView,
    Float32Array,
    Float64Array,
    Int8Array,
    Int16Array,
    Int32Array,
    Uint8Array,
    Uint16Array,
    Uint32Array,
    Uint8ClampedArray,
    Atomics,
    JSON,
    Math,
    Reflect];
objects.forEach(o => set.add(o));

for(var i = 0; i < objects.length; i++) {
    var o = objects[i]
    for(var p of Object.getOwnPropertyNames(o)) {
        var d = Object.getOwnPropertyDescriptor(o, p)
        if( (d.value !== null && typeof d.value === "object") || (typeof d.value === "function"))
            if(!set.has(d.value))
                set.add(d.value), objects.push(d.value);
        if( d.get )
            if(!set.has(d.get))
                set.add(d.get), objects.push(d.get);
        if( d.set )
            if(!set.has(d.set))
                set.add(d.set), objects.push(d.set);
    }
}
四、內(nèi)置對(duì)象·原生對(duì)象 4.0、分類
winter按照不同應(yīng)用場(chǎng)景,將原生對(duì)象分成了以下幾個(gè)種類

4.1、注意的幾個(gè)點(diǎn)

可以用 new 運(yùn)算創(chuàng)建新的對(duì)象

幾乎所有這些構(gòu)造器的能力都是無(wú)法用純 JavaScript 代碼實(shí)現(xiàn)

也無(wú)法用 class/extend 語(yǔ)法來(lái)繼承

創(chuàng)建的對(duì)象多數(shù)使用了私有字段,比如:Error: [[ErrorData]]...這些字段使得原型繼承方法無(wú)法正常工作

所有這些原生對(duì)象都是為了特定能力或者性能,而設(shè)計(jì)出來(lái)的特權(quán)對(duì)象

五、用對(duì)象來(lái)模擬函數(shù)與構(gòu)造器:函數(shù)對(duì)象與構(gòu)造器對(duì)象 5.0、函數(shù)對(duì)象的定義
具有 [[call]] 私有字段的對(duì)象

[[call]] 私有字段必須是一個(gè)引擎中定義的函數(shù),需要接受 this 值和調(diào)用參數(shù),并且會(huì)產(chǎn)生域的切換

5.1、構(gòu)造器對(duì)象的定義
具有 [[construct]] 私有字段的對(duì)象
5.1.0、[[construct]] 的大致執(zhí)行過(guò)程

1、以 Object.protoype 為原型創(chuàng)建一個(gè)新對(duì)象
2、以新對(duì)象為 this,執(zhí)行函數(shù)的 [[call]]
3、如果 [[call]] 的返回值是對(duì)象,那么,否則返回第一步創(chuàng)建的新對(duì)象

5.2、例子

1、內(nèi)置對(duì)象 Date 在作為構(gòu)造器調(diào)用時(shí)產(chǎn)生新的對(duì)象,作為函數(shù)時(shí),則產(chǎn)生字符串,見以下代碼:

console.log(new Date);
console.log(Date())

2、瀏覽器宿主環(huán)境中,提供的 Image 構(gòu)造器,則根本不允許被作為函數(shù)調(diào)用。

console.log(new Image);
console.log(Image()); // 拋出錯(cuò)誤 Uncaught TypeError: Failed to construct "Image": Please use the "new" operator, this DOM object constructor cannot be called as a function."Image"

3、基本類型(String、Number、Boolean),它們的構(gòu)造器被當(dāng)作函數(shù)調(diào)用,則產(chǎn)生類型轉(zhuǎn)換的效果

4、在 ES6 之后 => 語(yǔ)法創(chuàng)建的函數(shù)僅僅是函數(shù),它們無(wú)法被當(dāng)作構(gòu)造器使用,見以下代碼:

new (a => 0) // 報(bào)錯(cuò):Uncaught TypeError: (intermediate value) is not a constructor

5、使用 function 語(yǔ)法或者 Function 構(gòu)造器創(chuàng)建的對(duì)象來(lái)說(shuō),[[call]][[construct]] 行為總是相似的,它們執(zhí)行同一段代碼。

function f(){
    return 1;
}
var v = f(); // 把 f 作為函數(shù)調(diào)用
var o = new f(); // 把 f 作為構(gòu)造器調(diào)用

6、如果構(gòu)造器返回了一個(gè)新的對(duì)象,那么 new 創(chuàng)建的新對(duì)象就變成了一個(gè)構(gòu)造函數(shù)之外完全無(wú)法訪問的對(duì)象,這一定程度上可以實(shí)現(xiàn)私有

function cls(){
    this.a = 100;
    return {
        getValue: () => this.a
    }
}
var o = new cls;
o.getValue(); //100
//a 在外面永遠(yuǎn)無(wú)法訪問到
六、特殊行為的對(duì)象 6.0、行為不大一樣的對(duì)象
winter總結(jié)了常見的下標(biāo)運(yùn)算(就是使用中括號(hào)或者點(diǎn)來(lái)做屬性訪問)或者設(shè)置原型跟普通對(duì)象不同的對(duì)象,如下:

ArrayArraylength 屬性根據(jù)最大的下標(biāo)自動(dòng)發(fā)生變化。

Object.prototype:作為所有正常對(duì)象的默認(rèn)原型,不能再給它設(shè)置原型了。

String:為了支持下標(biāo)運(yùn)算,String 的正整數(shù)屬性訪問會(huì)去字符串里查找。

Argumentsarguments 的非負(fù)整數(shù)型下標(biāo)屬性跟對(duì)應(yīng)的變量聯(lián)動(dòng)。

模塊的 namespace 對(duì)象:特殊的地方非常多,跟一般對(duì)象完全不一樣,盡量只用于 import

類型數(shù)組和數(shù)組緩沖區(qū):跟內(nèi)存塊相關(guān)聯(lián),下標(biāo)運(yùn)算比較特殊

bind 后的 function:跟原來(lái)的函數(shù)相關(guān)聯(lián)

個(gè)人總結(jié)

看完這篇,有點(diǎn)崩潰,現(xiàn)在已經(jīng)凌晨2點(diǎn)48了,還沒搞懂,感覺之前學(xué)的過(guò)于皮毛,這些東西看起來(lái)一臉懵逼,哈哈哈...,有時(shí)間在好好加強(qiáng)一下這塊的知識(shí)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/114583.html

相關(guān)文章

  • 重學(xué)前端學(xué)習(xí)筆記)--JavaScript中的對(duì)象分類

    摘要:固有對(duì)象由標(biāo)準(zhǔn)規(guī)定,隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象,它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】,如有侵權(quán)請(qǐng)聯(lián)系我,郵箱:ka...

    ShowerSun 評(píng)論0 收藏0
  • 重學(xué)前端學(xué)習(xí)筆記)--JavaScript中的對(duì)象分類

    摘要:固有對(duì)象由標(biāo)準(zhǔn)規(guī)定,隨著運(yùn)行時(shí)創(chuàng)建而自動(dòng)創(chuàng)建的對(duì)象實(shí)例。普通對(duì)象由語(yǔ)法構(gòu)造器或者關(guān)鍵字定義類創(chuàng)建的對(duì)象,它能夠被原型繼承。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】,如有侵權(quán)請(qǐng)聯(lián)系我,郵箱:ka...

    dantezhao 評(píng)論0 收藏0
  • 重學(xué)前端學(xué)習(xí)筆記(二十七)--JavaScript的詞法

    摘要:模板語(yǔ)法四種詞法定義二空白符號(hào)空白符號(hào)分類或稱是,是縮進(jìn)符,字符串中寫的。注意換行符會(huì)影響的兩個(gè)重要語(yǔ)法特性自動(dòng)插入分號(hào)和規(guī)則。 筆記說(shuō)明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄,每天10分鐘,重構(gòu)你的前端知識(shí)體系,筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟,完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語(yǔ)音】,如有侵權(quán)請(qǐng)聯(lián)系我,郵箱...

    jayzou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<