犀牛書——CHAP6：對象

philadelphia 發布于2019-08-19 18:40 / 1767人閱讀

摘要：對象是屬性的無序集合。使用對象直接量創建的對象的原型就是，使用運算符創建的對象的原型是構造函數的的值。主要目的是將對象鎖定，避免外界干擾。判斷對象是否封閉。刪除屬性可刪除對象的自有屬性且為的屬性。

對象是屬性的無序集合。因此，這一章主要從對象和屬性兩個方面來闡述。

1. 對象 1.1 對象的定義

對象是屬性的無序集合，也可以看做是從字符串到值的映射。

1.2 對象的分類

對象可分為三類：
- 內置對象（native object）：由ECMAScript規范定義的對象。如數組、函數、日期、正則表達式等都是內置對象。
- 宿主對象（host object）：JS解釋器所嵌入的宿主環境（比如Web瀏覽器）定義的。如客戶端JS中的HTMLElement對象就是宿主對象。
- 自定義對象（user-defined object）：運行中的JS代碼創建的對象。

1.3 對象的操作 1.3.1 創建對象

創建對象主要有3種方法：對象直接量、new運算符、Object.create（）
（1） 對象直接量：
    `var empty = {}`
    `var point = {x:0,y:0}`
 (2) new運算符：new + 函數調用（該函數稱為構造函數constructor）.使用對象直接量創建對象相當于使用 new Object()
 (3) `Object.create()`
 **每一個JS對象（null除外）都和另一個對象相關聯，另一個對象就是該對象的原型。** 使用對象直接量創建的對象的原型就是Object.prototype，使用new運算符創建的對象的原型是構造函數的prototype的值。
 Object.create()接受兩個參數。第一個是要創建的對象的原型對象，第二個可選，內容是屬性描述符。
 對于前兩種創建對象的方法，用Object.create()表示即為：Object.create(Object.prototype),Object.create(Func.prototype).
 當有第二個參數時：

        var bob = Object.create(userB, {
     "id" : {
       value: MY_GLOBAL.nextId(),
       enumerable:true // writable:false, configurable(deletable):false by default
     },
     "name": {
       value: "Bob",
       enumerable: true
     }
        });

1.3.2 序列化對象

對象序列化是指將對象的狀態轉化為字符串，也可將字符串還原為對象。函數、RegExp、Error、undefined值不能序列化和還原。
`JSON.stringify()`將任意的JavaScript值序列化成JSON字符串，并且**只能序列化對象的可枚舉屬性**。
`JSON.parse()`將一個 JSON 字符串解析成為一個 JavaScript 值。

1.4 對象的方法

所有的對象都會從Object.prototype繼承屬性和方法（除了以null為原型）,這里先介紹Object.prototype的幾個方法，其他的將會在后面的部分介紹。
- `toString()`:返回調用這個方法的對象值的字符串。返回信息少。在需要將對象轉換為字符串的時候，JS會調用這個方法。
- `toLocaleString()`:返回對象的本地化字符串。Object的該方法調用toString(),Date 和 Number 則對日期、數字做本地化的轉換。
- `valueOf()`:返回對象的原始值。

1.5 對象的屬性

- 原型屬性:每個對象都有一個原型(Object.prototype除外),ECMAScript提供了兩種方法查詢對象的原型。
    a. `Object.getPrototypeOf()`:返回作為參數傳入的對象的原型。
    b. `isPrototypeOf()`:檢測一個對象是否是另一個對象的原型。p.isPrototypeOf(o)檢測p是否是o的原型。
- 可擴展性：是否可以給對象添加新屬性。主要**目的是將對象鎖定，避免外界干擾**。關于可擴展性有以下幾種方法：
    a. `Object.isExtensible()` :檢測傳入的對象是否是可擴展的，返回布爾值。
    b. `Object.preventExtens()` :將對象設置為不可擴展的，意味著不能給對象添加新的屬性。**將對象設置為不可擴展后不能重新設置為可擴展。**
    c. `Object.seal()`:將對象設置為不可擴展+不可配置自有屬性，意味著不能給對象添加新的屬性+不能對已有屬性進行刪除或配置。
    d. `Object.isSeal()`：判斷對象是否封閉（seal)。
    e. `Object.freeze()`:不可擴展+不可配置+數據屬性只讀。
    f. `Object.isFrozen()`判斷對象是否凍結（freeze）

2.屬性 2.1 屬性的分類

a.按照原型和繼承可分為: 繼承屬性和自由屬性。
b.按照屬性的描述符可分為: 數據屬性和存取器屬性(accessor property)。

2.2 屬性的描述符

屬性的描述符主要是對針對屬性可以進行的操作的描述。
數據屬性和存取器屬性共有的屬性描述符是：
    - enumerable：是否可枚舉，即能佛歐通過for/in 或者 Object.keys()循環。
    - configurable: 是否可以刪除屬性或者對屬性描述符進行修改。如果configurable為false,則不能對writable之外的描述符進行修改，同時數據屬性和存取器屬性不可轉換。也不能將可寫性從false改為true。
數據屬性多帶帶有的屬性描述符是：
    - value：屬性的值。
    - writable：屬性的值是否可通過賦值運算符修改。
存取器屬性多帶帶有的屬性描述符是：
    - set:給屬性提供setter方法，若無則為undefined.
    - get:給屬性提供getter方法，若無則為undefined.

針對屬性的描述符有以下幾種方法：
- `Object.getOwnPropertyDescriptor()` :獲得對象的特定的**自有屬性**的屬性描述符。第一個參數為對象，第二個為屬性名。
- `Object.defineProperty(obj, prop, descriptor)` :給對象添加新的屬性或者修改已有屬性的屬性描述符，并返回該對象。通過該方法添加的屬性，其默認的屬性描述符都為false.通過賦值運算符設置的屬性的屬性描述符默認為true.
- `Object.defineProperties(obj, props)`：同時修改或添加多個屬性。

2.3 對屬性的操作 2.3.1 查詢和設置

有兩種方式可查詢設置對象的屬性:.和[]。.的右側必須是有效標識符且不能是保留字。而[]則可以動態獲取屬性以及可以轉換為字符串的屬性。由于[]訪問與數組很相似，因此也叫作關聯數組。
屬性的賦值會先檢查原型鏈，若原型鏈有該屬性且該屬性為不可寫，則不能給該屬性賦值。若原型鏈存在且可寫，或者原型鏈不存在該屬性，則該屬性就變為自有屬性，且不會修改原型對象的屬性值。

2.3.2 刪除屬性

`delete`可刪除對象的自有屬性且configurable為true的屬性。注意：delete只是斷開屬性與對象的關系，而不是操作屬性中的屬性。由此可能造成內存泄漏。

2.3.3 檢測屬性

檢測屬性主要檢測兩方面：(1)屬性是否存在在對象中；（2）哪些屬性是自有屬性.提供的方法如下：
- `in`操作符。檢測自有和繼承屬性中是否包含該屬性。同時若屬性值為undefined，返回true,若屬性不存在返回false. property in obj
- `hasOwnProperty()`: obj.hasOwnProperty("x")檢測屬性”x”是否是obj對象的自有屬性。
- `propertyIsEnumerable()`: obj.propertyIsEnumerable("x")檢測屬性”x”是否是obj對象的自有屬性+該屬性是否可枚舉.當同時為true時才返回true.

2.3.4 枚舉屬性

枚舉屬性主要有三種方法：
- `for/in`：遍歷所有**可枚舉**的自有+繼承屬性。把屬性名稱賦值給循環變量。(枚舉+所有)
- `Object.keys()`：以**數組形式**返回對象的所有**可枚舉**的**自有屬性**的名稱。（枚舉+自有）
- `Object.getOwnpropertyNames()`：以**數組形式**返回對象的所有自有屬性。（自有+可枚舉+不可枚舉）

GPU云服務器云服務器犀牛網犀牛犀牛云計算犀牛云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79837.html

犀牛書——CHAP8：函數

摘要：若有函數名，則在函數體內指代該函數本身，并且只存在于函數體中。返回值與普通函數相同。如果嵌套函數作為普通函數調用，則指向全局對象或者構造函數調用在函數或者方法調用之前使用關鍵字，則為構造函數調用。創建一個新的對象繼承構造函數的屬性。 showImg(https://box.worktile.com/view/ddbade8c84bb41cdb20db15228584b8e?pid=4b...

he_xd 2019-08-19 18:40 評論0 收藏0
如何循序漸進地學習Javascript

摘要：如果在初學一門語言的時候第一想到的是問別人，是很難取得進步的。如果你真想學好，我有個大概的自學軌跡供你們參考。第一步，學習的編程。立即可以嘗試的實例，也可以讓的初學者馬上看到效果。讀懂別人的代碼是學習，而改進別人的代碼則是創造了。 javascript入門太容易了，導致幾乎人人隨便看看就能上手，零基礎的人學個三五天都能對外宣稱自己掌握了js。可是真正掌握js是一件很難的事情。如果在初學...

DTeam 2019-08-21 12:17 評論0 收藏0
犀牛書——CHAP7：數組

摘要：數組有以下特點無類型數組元素可以是任意元素。因此，當小于數組最大索引時，大于的數組元素會被刪除。原數組不會改變將數組元素轉換為字符串并連接在一起。默認將數組元素用，連接，傳入的參數即為連接符。 showImg(https://box.worktile.com/view/fcfcdf2c99b14edfb6768085955ae253?pid=4b0845b09ca94218a955f8...

Alfred 2019-08-19 18:40 評論0 收藏0
犀牛書——CHAP10：正則表達式

摘要：設計目的是為了讓在全局范圍內有效。在正則表達式后部引用前面的子表達式。傳入分隔符或正則表達式。對象屬性以下屬性返回布爾值。是否包含修飾符以下不返回布爾值整個字符串下一次搜索開始的位置。返回布爾值，若匹配則返回。 1. 正則表達式語法 1.1 表示方法 - `//`字面量模式，`/表達式/修飾符` - 使用`new RegExp(字符串，修飾符 | 正則表達式)`構造函數。在ES5中，...

JessYanCoding 2019-08-19 18:40 評論0 收藏0
如果想成為一名頂尖的前端，這份書單你一定要收藏！

摘要：其中負載均衡那一節，基本上是參考的權威指南負載均衡的內容。開發指南讀了一半，就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊發表于云+社區專欄作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹...

callmewhy 2019-08-02 16:06 評論0 收藏0