创建Object及Object.defineProperty()

  • 前言:最近在看vue数据双向绑定的时候尤大神追踪数据变化并通知相关“人员”,Object.defineProperty 把这些属性全部转为 getter/setter。
    待整理
<script type="text/javascript">
    /*
       Object.create(prototype[,descriptors])
       创建一个对象,并把其prototype属性赋值为第一个参数,同时可以设置多个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: 任何值,默认是undefined
        2. writable: 是否可以被重写,默认是false
        3. enumerable: 是否可以被循环(使用for...in或Object.keys()), 默认是false
        4. configurable: 是否可被删除,是否可以再次设置特性
        5. get: 返回property的值的方法,默认是undefined
        6. set: 为property设置值的方法,默认是undefined
    */
    var person = Object.create({})
    Object.defineProperty(person ,'age', {
        value: '24',
        writable: true,  //只读
        enumerable: true, //可被循环
        configurable: true //可被删除
    });
    Object.defineProperty(person, 'name', {
        value: 'datura_lj',
        writable: false, //可修改
        enumerable: false, //不可被循环
        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(); 批量设置
    */
    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方法设置的property 特性(只读,删除等)
    */
    console.log(Object.getOwnPropertyDescriptor(person, 'job'));
    /*
        Object.getOwnPropertyNames(obj)
        //获取所有的属性名,不包括prototy中的属性,返回一个数组
    */
    console.log(Object.getOwnPropertyNames(person));
     /*
        Object.keys(obj)
        和getOwnPropertyNames方法类似,但是获取所有的可以循环的属性,返回一个数组
    */
    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设为false),单数属性值仍然可以修改;
        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) 完全冻结对象,在seal的基础上,属性值也不可以修改(每个属性的wirtable也被设为false)
    */
    Object.freeze(person);
    person.aaa = 25; //Cannot assign to read only property 'age' of #<Object>
    console.log(person.aaa)
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 10,894评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,971评论 0 29
  • MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对Vie...
    Www刘阅读 667评论 1 7
  • 手袋设计与出格寻找工作难在哪里? Todywu2013-7-12 这几天上网,朋友们时而弹出窗口,询问哪里有招手袋...
    todywu阅读 686评论 0 51
  • 亲其师才能信其道,要让学生亲近你,你就要先亲近学生,多跟学生交往,做学生的朋友。 我们在学生面前通常会很威严...
    杨正欢阅读 291评论 0 0