JS中可枚举属性(enumerable)和propertyIsEnumerable()

什么是可枚举属性

枚举就是列举,可枚举属性就是可以列举的属性,直白一点就是可以用for in遍历到的属性。

propertyIsEnumerable()的用法

obj.propertyIsEnumerable(prop) 是用来判断属性是否可枚举的

  • obj: 要检测的对象
  • 参数 prop: 要检测的属性的名称。
  • 返回值: Boolean类型,可枚举属性的时候返回true。

可枚举属性会对那些操作产生影响

for…in
Object.keys()
JSON.stringify()

下面我们详细测试一下

1. 可枚举属性的遍历

首先我们看一个栗子:

var p = {name: '张三', age: 28};
for (var key in p) {
    console.log('属性名:' + key + ',是否可枚举:' + p.propertyIsEnumerable(key));
}
//输出结果:
//->属性名:name,是否可枚举:true
//->属性名:age,是否可枚举:true

p上的name和age两个属性都被遍历了,这两个属性都是可枚举属性,那什么是不可枚举属性呢?

2. 不可枚举属性不会被遍历

我们再看一个栗子:

Object.prototype.get_name = function () {
    return this.name;
};
var p = new Object({name: '张三'});
for (var key in p) {
    console.log('属性名:' + key + ',是否可枚举:' + p.propertyIsEnumerable(key));
}
//输出结果:
// ->属性名:name,是否可枚举:true
// ->属性名:get_name,是否可枚举:false

可能有疑问get_name判断可枚举返回的是false怎么还遍历出来了呢?其实正确的理解是这样的, get_name不是实例p的属性是Object原型上的属性,对于实例p来说是不可枚举的,但是对于原型来说是可枚举的(下面代码有测试)。(for…in遍历,只要在遍历对象和对象所在的原型链上的可枚举属性都会被遍历)
大家想一个问题,get_name是Object的原型上的属性,被遍历了。Object的原型上还有很多的属性,有toString、hasOwnProperty还有我们现在正在研究的propertyIsEnumerable都是原型上的属性,怎么就只有自定义的get_name被遍历出来了呢?因为其它属性都是不可枚举的。看下面代码:

console.log(p.__proto__.propertyIsEnumerable('get_name'));//->true
console.log(p.__proto__.propertyIsEnumerable('toString'));//->false
console.log(p.__proto__.propertyIsEnumerable('propertyIsEnumerable'));//->false
console.log(p.__proto__.propertyIsEnumerable('hasOwnProperty'));//->false

我们已经知道了什么是可枚举属性,知道了propertyIsEnumerable得用法,我们可不可以自定义一个不可枚举属性呢?当然可以。

3. 自定义不可枚举属性

var p = new Object({name: '张三'});
//为p设置不可枚举属性
Object.defineProperty(p, "age", {
    value: 20,
    enumerable: false
});
for (var key in p) {
    console.log('属性名:' + key + ',是否可枚举:' + p.propertyIsEnumerable(key));
}
//输出结果:属性名:name,是否可枚举:true
console.log('age是不是p的可枚举属性:' + p.propertyIsEnumerable('age')+',age属性的值是多少:'+ p.age);
//age是不是p的可枚举属性:false,age属性的值是多少:20

通过defineProperty我们就自定义了一个不可枚举的属性,并且可以正常使用。

4. 不可枚举属性对Object.keys()和JSON.stringify()的影响

Object.keys()和JSON.stringify()也不会列举出不可枚举属性,也不会列举出原型链上的所有属性。

Object.prototype.get_name = function () {};
var p = new Object({name: '张三'});
//为p设置不可枚举属性
Object.defineProperty(p, "age", {
    value: 20,
    enumerable: false
});
console.log(Object.keys(p));//输出结果->["name"]
console.log(JSON.stringify(p));//输出结果->{"name":"张三"}

如果文档哪里不正确欢迎指正。
本文主要参考文档:http://www.cnblogs.com/kongxy/p/4618173.html
欢迎转载,但请注明出处。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,130评论 0 3
  • 属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...
    呼呼哥阅读 2,911评论 0 2
  • 概述 JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对...
    zjh111阅读 724评论 0 0
  • 本篇主要介绍JS中常用Object的属性方法。 delete 操作 in 运算符 obj.hasOwnProper...
    boySpray阅读 1,985评论 0 2
  • 这个年纪,这种生活背景下想写的第一篇小随笔,让自己很意外的是这个主题。一切都是机缘巧合,在今天邂逅这个平台以...
    静夜星月阅读 164评论 0 1