創(chuàng)建Object及Object.defineProperty()

  • 前言:最近在看vue數(shù)據(jù)雙向綁定的時候尤大神追蹤數(shù)據(jù)變化并通知相關(guān)“人員”纸颜,Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。
    待整理
<script type="text/javascript">
    /*
       Object.create(prototype[,descriptors])
       創(chuàng)建一個對象,并把其prototype屬性賦值為第一個參數(shù),同時可以設(shè)置多個descriptors瘫俊。
    */
    var Cat = Object.create({
        "name": 'miaomiao',
        'food': function() {
            alert('I love fish');
        } 
    });
    console.log('貓實例', Cat);
    console.log('================================================================');
    /* 
        Object.defineProperty(obj, prop, descriptor)
        1. value: 任何值济榨,默認(rèn)是undefined
        2. writable: 是否可以被重寫坯沪,默認(rèn)是false
        3. enumerable: 是否可以被循環(huán)(使用for...in或Object.keys()), 默認(rèn)是false
        4. configurable: 是否可被刪除擒滑,是否可以再次設(shè)置特性
        5. get: 返回property的值的方法腐晾,默認(rèn)是undefined
        6. set: 為property設(shè)置值的方法,默認(rèn)是undefined
    */
    var person = Object.create({})
    Object.defineProperty(person ,'age', {
        value: '24',
        writable: true,  //只讀
        enumerable: true, //可被循環(huán)
        configurable: true //可被刪除
    });
    Object.defineProperty(person, 'name', {
        value: 'datura_lj',
        writable: false, //可修改
        enumerable: false, //不可被循環(huán)
        configurable: false //不可被刪除
    });

    console.log('person', person);

    person.age = 17;
    person.name = 'shuaishuai';
    console.log(person);

    for (var key in person) {
        console.log(key + ':' + person[key]);
    }
    delete person.age;
    delete person.name;
    console.log(person);
    /* 
        Object.defineProperties(); 批量設(shè)置
    */
    Object.defineProperties(person, {
        'job': {
            value: '搬磚的',
            writable: true,
            enumerable: true,
            configurable: true
        },
        'sex': {
            value: 'man',
            writable: false,
            enumerable: false,
            configurable: false
        }
    });
    console.log(person);
    /*
        Object.getOwnPropertyDescriptor(obj, property) 
        獲取defineProperty方法設(shè)置的property 特性(只讀丐一,刪除等)
    */
    console.log(Object.getOwnPropertyDescriptor(person, 'job'));
    /*
        Object.getOwnPropertyNames(obj)
        //獲取所有的屬性名藻糖,不包括prototy中的屬性,返回一個數(shù)組
    */
    console.log(Object.getOwnPropertyNames(person));
     /*
        Object.keys(obj)
        和getOwnPropertyNames方法類似库车,但是獲取所有的可以循環(huán)的屬性巨柒,返回一個數(shù)組
    */
    console.log(Object.keys(person));
    console.log('================================================================');
    /*
        Object.preventExtensions(obj)  鎖住對象屬性,使其不能夠拓展凝颇,也就是不能增加新的屬性潘拱,但是屬性的值仍然可以更改,也可以把屬性刪除
        Object.isExtensible(obj)  用于判斷對象是否可以被拓展拧略,返回值為true/false
    */
    console.log(Object.isExtensible(person)); //true  判斷對象是否可以被拓展
    person.hobby = 'money';
    console.log(person.hobby); //money ,此時對象可以拓展

    Object.preventExtensions(person);
    console.log(Object.isExtensible(person)); //false  判斷對象是否可以被拓展

    person.hobby = "code";
    console.log(person.hobby); //code芦岂,屬性值仍然可以修改

    console.log(person.hobby); //undefined仍可刪除屬性
    delete person.hobby;
    console.log(person.hobby); //undefined仍可刪除屬性

    person.like = 'woman'; //Can't add property firstname, object is not extensible 不能夠添加屬性
    console.log(person.like);
    console.log('================================================================');
    /*
        Object.seal(obj) 讓對象既不可以拓展也不可以刪除屬性(把每個屬性的configurable設(shè)為false),單數(shù)屬性值仍然可以修改;
        Object.isSealed由于判斷對象是否被密封
    */
    Object.seal(person);
    person.name = '007'; //仍然可以修改
    console.log(person.name)
    delete person.name; //Cannot delete property 'age' of #<Object>
    console.log(person.name)
    console.log('================================================================');
    /*
        Object.freeze(obj) 完全凍結(jié)對象,在seal的基礎(chǔ)上垫蛆,屬性值也不可以修改(每個屬性的wirtable也被設(shè)為false)
    */
    Object.freeze(person);
    person.aaa = 25; //Cannot assign to read only property 'age' of #<Object>
    console.log(person.aaa)
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末禽最,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子袱饭,更是在濱河造成了極大的恐慌川无,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虑乖,死亡現(xiàn)場離奇詭異懦趋,居然都是意外死亡,警方通過查閱死者的電腦和手機疹味,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門仅叫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人糙捺,你說我怎么就攤上這事诫咱。” “怎么了洪灯?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵坎缭,是天一觀的道長。 經(jīng)常有香客問我,道長掏呼,這世上最難降的妖魔是什么坏快? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮哄尔,結(jié)果婚禮上假消,老公的妹妹穿的比我還像新娘。我一直安慰自己岭接,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布臼予。 她就那樣靜靜地躺著鸣戴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪粘拾。 梳的紋絲不亂的頭發(fā)上窄锅,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機與錄音缰雇,去河邊找鬼入偷。 笑死,一個胖子當(dāng)著我的面吹牛械哟,可吹牛的內(nèi)容都是我干的疏之。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼暇咆,長吁一口氣:“原來是場噩夢啊……” “哼锋爪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起爸业,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤其骄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后扯旷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拯爽,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年钧忽,在試婚紗的時候發(fā)現(xiàn)自己被綠了毯炮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡惰瓜,死狀恐怖否副,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情崎坊,我是刑警寧澤备禀,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響曲尸,放射性物質(zhì)發(fā)生泄漏赋续。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一另患、第九天 我趴在偏房一處隱蔽的房頂上張望纽乱。 院中可真熱鬧,春花似錦昆箕、人聲如沸鸦列。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽薯嗤。三九已至,卻和暖如春纤泵,著一層夾襖步出監(jiān)牢的瞬間骆姐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工捏题, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留玻褪,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓公荧,卻偏偏與公主長得像带射,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子稚矿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本庸诱,Vue即被注冊為全局變量,可以在頁面使用了晤揣。 如果希望搭建...
    Awey閱讀 10,999評論 4 129
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容桥爽,還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,046評論 0 29
  • MVVM 是Model-View-ViewModel 的縮寫昧识,它是一種基于前端開發(fā)的架構(gòu)模式钠四,其核心是提供對Vie...
    Www劉閱讀 684評論 1 7
  • 手袋設(shè)計與出格尋找工作難在哪里缀去? Todywu2013-7-12 這幾天上網(wǎng),朋友們時而彈出窗口甸祭,詢問哪里有招手袋...
    todywu閱讀 718評論 0 51
  • 親其師才能信其道缕碎,要讓學(xué)生親近你,你就要先親近學(xué)生池户,多跟學(xué)生交往咏雌,做學(xué)生的朋友凡怎。 我們在學(xué)生面前通常會很威嚴(yán)...
    楊正歡閱讀 317評論 0 0