您的位置:澳门新葡8455最新网站 > Web前端 > 自在学习

自在学习

发布时间:2019-11-14 16:55编辑:Web前端浏览(134)

    轻易学习 JavaScript(7卡塔尔国:对象属性描述符

    2018/01/11 · JavaScript · 对象

    原稿出处: Dhananjay Kumar   译文出处:码农网/小峰   

    在JavaScript中,你能够如下所示创造几个对象字面量:

    var cat = { name: 'foo', age: 9 };

    1
    2
    3
    4
    var cat = {
        name: 'foo',
        age: 9
    };

    乍风度翩翩看,好像对象cat有字符串和数字值这么些脾性。但是,这不可是JavaScript解释器。在ES5中,介绍了质量描述符的定义。在我们继续斟酌属性描述符从前,让我们试着应对多少个难点:

    • 何以成立只读属性?
    • 什么样拟定不可胜数的品质?
    • 怎么使属性不可配置?
    • 怎么着规定多性子质是或不是是只读的?

    若果您明白属性描述符,那么你就能够回答全体那几个标题。

    请看下边包车型地铁代码:

    var cat = { name: 'foo', age: 9 }; var a = Object.getOwnPropertyDescriptor(cat, 'name'); console.log(a);

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    var a = Object.getOwnPropertyDescriptor(cat, 'name');
    console.log(a);

    出口将如下所示:

    图片 1

    正如您在这里处看到的,这一个天性有三个特征:

    value保存属性的数额,而writable,enumerable和configurable则汇报属性的其余特色。接下来大家将对这几个特色意气风发风流倜傥演讲。

    writable

    脾气的值是还是不是能够改换是由writable特征决定的。假如writable设置为false,那么属性的值不能改变,JavaScript将忽视属性值中的任何退换。请看下边包车型大巴代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { writable: false }); console.log(cat.name); // foo cat.name = "koo"; // JavaScript will ignore it as writable is set to false console.log(cat.name); // foo

    1
    2
    3
    4
    5
    6
    7
    8
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { writable: false });
    console.log(cat.name); // foo
    cat.name = "koo"; // JavaScript will ignore it as writable is set to false
    console.log(cat.name); // foo

    您能够选择Object.defineProperty改良writable、enumerable和configurable特征的值。大家稍后会在此篇小说中详细座谈Object.defineProperty,但正如您在地点的代码片段中观察的那样,大家早就将writable属性设置为false,进而改动了name属性的值。JavaScript将忽视重新分配,并且name属性的值将保证为foo。

    借使以严苛格局运作代码,那么为了重新分配writable设置为false的属性值,JavaScript将抛出十二分。请看上边的代码:

    'use strict'; var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { writable: false }); console.log(cat.name); // foo cat.name = "koo"; // error

    1
    2
    3
    4
    5
    6
    7
    8
    'use strict';
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { writable: false });
    console.log(cat.name); // foo
    cat.name = "koo"; // error

    在那,JavaScript以严峻方式运作,由此,当你重新分配name属性的值时,JavaScript将抛出格外,如下所示:

    图片 2

    这里的荒唐音讯说,你不可能赋值到只读属性。也正是说,要是属性的writable特征设置为false,那么属性将担任只读属性。

    configurable

    特性的别的特色是或不是足以陈设决意于configurable的值。要是属性configurable设置为false,则不能够校勘writable和enumerable的值。请看下边包车型客车代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { enumerable: false });

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    Object.defineProperty(cat, 'name', { enumerable: false });

    在这处,我们将name属性的configurable设置为false。之后,大家将enumerable设置为false。如前所述,生龙活虎旦叁本性质的configurable设置为false,那么你就不可能纠正另四个表征。

    对此地方的代码,JavaScript会抛出二个TypeError非凡,如下图所示。你会收获不可能再一次定义属性名称的大谬否则:

    图片 3

    在运用configurable的时候,你需求深深记住,改换configurable的值只好做一遍。借使将质量的configurable设置为false,那么你就不能重新分配它;你不大概收回对configurable的改换。请看下面包车型地铁代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { configurable: true });

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    Object.defineProperty(cat, 'name', { configurable: true });

    大家在重新分配name属性的configurable,不过,JavaScript会对上述操作抛出三个TypeError,如下图所示。正如您所观察的,黄金年代旦configurable棉被服装置为false,就无法撤销那多少个修正。

    图片 4

    另二个入眼的专门的学问是,就算configurable设置为false,writable也得以从true改良为false——但反之则不然。请看下边包车型地铁代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); Object.defineProperty(cat, 'name', { writable: false }); cat.name = 'koo'; console.log(cat.name); // foo

    1
    2
    3
    4
    5
    6
    7
    8
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    Object.defineProperty(cat, 'name', { writable: false });
    cat.name = 'koo';
    console.log(cat.name); // foo

    大器晚成经不是在严峻情势下,下边包车型大巴代码不会抛出别的特别。正如我们前边所研究的,即使configurable为false,writable也得以从true变为false,反之则不然。另三个亟需记住的要紧事项是,你不可能删除configurable设置为false的性格。

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { configurable: false }); delete cat.name; // wont delete as configurable is false console.log(cat.name); // foo delete (cat.age); // will be deleted console.log(cat.age); // undefined

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { configurable: false });
    delete cat.name; // wont delete as configurable is false
    console.log(cat.name); // foo
    delete (cat.age); // will be deleted
    console.log(cat.age); // undefined

    在地方的代码中,你会意识JavaScript不会去除name属性,因为name属性的configurable设置为false。

    enumerable

    对此壹本品质,假使您设置了enumerable:false,那么这一个性格将不会并发在枚举中,由此它不能够用在诸如for … in循环那样的话语中。

    请看上边包车型大巴代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); for (let f in cat) { console.log(f); // will print only age }

    1
    2
    3
    4
    5
    6
    7
    8
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { enumerable: false });
    for (let f in cat) {
        console.log(f); // will print only age
    }

    在那地,你一定要获得age,因为name的enumerable被安装为了false。那是另一个索要深深记住的机要事项:通过设置enumerable:false,唯风流倜傥的性质将不可用于枚举。大家来看下边包车型大巴代码:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); console.log(cat.name); // foo console.log('name' in cat); // true

    1
    2
    3
    4
    5
    6
    7
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { enumerable: false });
    console.log(cat.name); // foo
    console.log('name' in cat); // true

    在那,name属性enumerable设置为false,但你能够访谈它。在自己斟酌name是还是不是归于cat的本性时,你也会发觉是true。

    偶然,你恐怕须求检讨有些特定属性enumerable是还是不是设置为false或true。你能够经过行使propertyIsEnumerable方法来成功那点:

    var cat = { name: 'foo', age: 9 }; Object.defineProperty(cat, 'name', { enumerable: false }); console.log(cat.propertyIsEnumerable("name")); // false

    1
    2
    3
    4
    5
    6
    var cat = {
        name: 'foo',
        age: 9
    };
    Object.defineProperty(cat, 'name', { enumerable: false });
    console.log(cat.propertyIsEnumerable("name")); // false

    结论

    作为一名职业的JavaScript开垦职员,你不得不对JavaScript对象属性描述符有叁个很好的精通,笔者愿意您能从那篇小说中学到有些知识!请继续关注大家的下意气风发篇文章,继续读书JavaScript中更关键的定义。

    1 赞 收藏 评论

    图片 5

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:自在学习

    关键词: