深入淺出JS的對象屬性

Carl 發(fā)布于2019-08-21 16:46 / 2016人閱讀

摘要：布爾值，是否能通過循環(huán)或返回屬性。而區(qū)別在于為布爾值的特征的默認值，通過屬性訪問器設置的默認都是，而通過定義屬性設置的默認都是。該方法返回被凍結的對象。

可能很多人都知道最近很火的MVVM（model-view-virtualModel）框架，如Vue/Angular/React，如果你不知道的話，就要抓緊學習了，它能夠把你從高頻復雜的DOM解析中解脫出來。
MVVM框架的最主要的特性就是雙向數(shù)據(jù)綁定，其中使用了ES5的getter/setter函數(shù)，而他們就是對象的訪問器屬性，如果你不清楚它們的具體用法，那就不算是真正了解Javascript的基礎知識對象的屬性，現(xiàn)在讓我們一起回顧和總結下對象的屬性。

對象

讓我們先看下對象的定義：

無序?qū)傩缘募?，其屬性可以包含基本值，對象或者函?shù)。   ------ ECMA-262

也就是我們可以定義的對象屬性只能是下面三種：

var person = {
    // 屬性
    name: "Nicholas",
    // 對象
    job: {
        name: "teacher",
        salary: 10000
    },
    // 函數(shù)
    greet: function () {
        alert("hello");
    }
};

對象的屬性

JavaScript中只包含有兩種屬性：數(shù)據(jù)屬性和訪問器屬性，并包含不同的特征。

數(shù)據(jù)屬性包含數(shù)據(jù)值的位置，可以在該位置對其進行讀寫。其包含4個特征：

   configurable: 布爾值，表示能否通過delete屬性來刪除屬性或修改屬性的特性。
   enumerable: 布爾值，是否能通過`for-in`循環(huán)或`Object.keys()`返回屬性。
   writable: 布爾值，屬性值是否可以修改。
   value: 屬性的數(shù)據(jù)值，實質(zhì)指向的是讀寫數(shù)據(jù)的位置。默認為undefined。

數(shù)據(jù)屬性可以通過屬性訪問器（即點運算符和方括號計算表達式）來設置屬性，也可以通過Object.defineProperty() 或 Object.defineProperties()設置（下面統(tǒng)一用defineProperty代指兩者）。而區(qū)別在于為布爾值的特征的默認值，通過屬性訪問器設置的默認都是true，而通過定義屬性設置的默認都是false。

訪問器屬性不包含數(shù)據(jù)值，包含一對兒getter/setter函數(shù)（非必須），在讀取訪問器屬性時，調(diào)用getter函數(shù)，負責返回有效的值；在寫入屬性時，調(diào)用setter函數(shù)并傳入新值，負責決定如何處理數(shù)據(jù)。其包含4個特征：

    configurable: 布爾值，表示能否通過delete屬性來刪除屬性或修改屬性的特性，默認為false。
    enumerable: 布爾值，是否能通過`for-in`循環(huán)或`Object.keys()`返回屬性，默認為false。
    get: 讀取屬性時調(diào)用的函數(shù)，默認為undefined。
    set: 寫入屬性時調(diào)用的函數(shù)，接收唯一參數(shù)，默認為undefined。

訪問器屬性只能通過defineProperty來定義。

如果屬性已經(jīng)存在，我們可以用defineProperty再次修改該屬性的特征，也可以通過Object.getOwnpropertyDescriptor() 或 Object.getOwnpropertyDescriptors()來查看其特征列表。對于configurable = true的屬性我們也可以使用delete操作符進行刪除，如果設置成了不可配置的，我們就再也不能把它變回可配置的了。

屬性訪問器

有時我們會通過getter/setter來代理一個屬性的讀取操作，即實現(xiàn)一個偽屬性，但是這個屬性不能與真實屬性重名，否則會覆蓋真實屬性的值，變成動態(tài)獲取，這可能不是你想要的結果。

// 實例：保存當前值變化的日志記錄
var o = {
    set current (str) {
        this.log[this.log.length] = str;
    },
    get current () {
        return this.log.join(",");
    },
    log: []
};

這樣我們就代理current，用于保存實時日志，每次對log的更新也變成了一個操作歷史檔案，方便實時查看我們的所有改動。
同樣我們可以在configurable配置為true的時候刪除該屬性的代理：delete o.current。

關于delete，如果我們刪除了一個var/let/const屬性，在其聲明的作用域下會返回false，如果是嚴格模式，則會拋出語法錯誤。刪除一個不可配置的屬性同理會失敗或報錯。
刪除數(shù)組的下標時，length并不會變小，遍歷到該下標時會跳過執(zhí)行。

影響configurable的方法

另外，存在一些Object的方法會影響到對象屬性的可配置性：

Object.freeze()
該方法可以凍結一個對象，凍結指的是不能向這個對象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該對象已有屬性的可枚舉性、可配置性、可寫性。也就是說，這個對象永遠是不可變的。該方法返回被凍結的對象。
凍結指的是表層屬性的淺凍結，如果需要凍結嵌套的屬性，則需要遍歷并遞歸凍結子屬性。

Object.preventExtensions()
該方法讓一個對象變的不可擴展，也就是永遠不能再添加新的屬性。需要注意的是不可擴展的對象的屬性通常仍然可以被刪除，同時會阻止一個對象將__proto__屬性重新指向另一個對象。

Object.seal()
該方法可以讓一個對象密封，并返回被密封后的對象。密封對象將會阻止向?qū)ο筇砑有碌膶傩?，并且會將所有已有屬性的可配置性（configurable）置為不可配置（false），即不可修改屬性的描述或刪除屬性。但是可寫性描述（writable）為可寫（true）的屬性的值仍然被修改。

參考資料

MDN - Object: https://developer.mozilla.org...

JavaScript高級編程 - 對象類型

GPU云服務器云服務器 js中集合對象的屬性 js包裝對象中的屬性 js_window對象屬性對象的屬性

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/88697.html

深入淺出，JS原型鏈的工作原理

摘要：前言原型鏈，即原型鏈條。原型的作用在中，每個對象都有自己的原型。訪問的屬性方法依舊不存在于該原型，則會繼續(xù)訪問該原型的原型前言：原型鏈，即原型鏈條。它是由原型、原型的原型、原型的原型的原型...這一規(guī)則組合成的，經(jīng)常被應用于繼承。原型的作用在JS中，每個對象都有自己的原型。當我們訪問對象的屬性和方法時，JS會先訪問對象本身的屬性和方法。如果對象本身不包含這些屬性和方法，則訪問對象...

Ali_ 2019-08-23 13:52 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數(shù)基礎要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
js基礎深入淺出

摘要：當多個事件觸發(fā)的時候，會把異步事件依次的放入里等同步事件執(zhí)行完之后，再去隊列里一個個執(zhí)行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經(jīng)典實例總結那些剪不斷理還亂的關系持續(xù)不斷更新。。。基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區(qū)別基本類型和字面值相等，...

phodal 2019-08-20 16:21 評論0 收藏0
Javascript 深入淺出原型

摘要：重點實例對象是通過原型對象與構造函數(shù)取得聯(lián)系的。原型鏈的形成是真正是靠的，而不是。函數(shù)對象和原型對象通過和屬性進行相互關聯(lián)。 JavaScript 使用 prototypal 原型模型，雖然這經(jīng)常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。個人博客排版更佳：https://haonancx.github.io/ showImg(https://se...

wpw 2019-08-21 11:21 評論0 收藏0
深入學習js之——作用域鏈

摘要：開篇作用域是每種計算機語言最重要的基礎之一，因此要想深入的學習作用域和作用域鏈就是個繞不開的話題。這樣由多個執(zhí)行上下文的變量對象構成的鏈表就叫做作用域鏈。這時候執(zhí)行上下文的作用域鏈，我們命名為至此，作用域鏈創(chuàng)建完畢。開篇作用域是每種計算機語言最重要的基礎之一，因此要想深入的學習JavaScript,作用域和作用域鏈就是個繞不開的話題。在《深入學習js之—-執(zhí)行上下文?！分形覀兲岬?..

lemanli 2019-08-23 15:26 評論0 收藏0