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

資訊專欄INFORMATION COLUMN

深入淺出JS的對(duì)象屬性

Carl / 2005人閱讀

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

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

對(duì)象

讓我們先看下對(duì)象的定義：

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

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

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

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

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

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

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

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

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

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

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

屬性訪問器

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

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

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

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

影響configurable的方法

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

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

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

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

參考資料

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

JavaScript高級(jí)編程 - 對(duì)象類型

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

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

相關(guān)文章

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

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

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

  • JavaScript深入淺出

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

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

  • js基礎(chǔ)深入淺出

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

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

  • Javascript 深入淺出原型

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

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

  • 深入學(xué)習(xí)js之——作用域鏈

    摘要：開篇作用域是每種計(jì)算機(jī)語言最重要的基礎(chǔ)之一，因此要想深入的學(xué)習(xí)作用域和作用域鏈就是個(gè)繞不開的話題。這樣由多個(gè)執(zhí)行上下文的變量對(duì)象構(gòu)成的鏈表就叫做作用域鏈。這時(shí)候執(zhí)行上下文的作用域鏈，我們命名為至此，作用域鏈創(chuàng)建完畢。 開篇 作用域是每種計(jì)算機(jī)語言最重要的基礎(chǔ)之一，因此要想深入的學(xué)習(xí)JavaScript,作用域和作用域鏈就是個(gè)繞不開的話題。 在《深入學(xué)習(xí)js之—-執(zhí)行上下文棧》中我們提到...

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

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

0條評(píng)論

Carl

男|高級(jí)講師

TA的文章

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