简单了解 javascript 对象的属性(一) —— 数据属性

阅读 580
收藏 42
2017-01-03
原文链接:www.jianshu.com

        俗话说得好:“看事情不能看只表面”。日常生活中,我们如果处对象,除了看外貌,还得看内涵。这篇文章不会教你怎么找对象,但却能让你看清ECMAscript中对象的内在。

        ES中的对象有两种属性:数据属性访问器属性。今天我们只谈数据属性。

注:ES5之前,并没有什么直接检测属性特性的方法。

先上一段代码:

var Obj = { a:5 };    //我并不只是一个值,那是因为你不懂我。

        好了,大家看到了什么?没错,只是一个值。下面教你怎么看她的内在。

Object.getOwnPropertyDescriptor(Obj, "a" );

        此方法可得到对象的数据属性,传入两个参数:第一个是要查找的对象名;第二个是要查找的属性名。

输出结果如下:

configurable:可配置。

enumerable:可枚举。

writable:可写。

        以上三个属性取值为true或false。

value:属性值。

        现在你算是对她有一点了解了,下面几招教你如何获取她的芳心。

添加属性的方法:

        思考一下:你知道几种为对象添加属性和值的方法?

第一种:直接在创建的对象里面添加。如:var Obj = { a:5 };

第二种:通过点方法添加。如:Obj.a = 5;

第三种:通过Object.defineProperty()方法添加。此方法可以在添加属性的同时指定它的特性。

看代码:

var Obj = {};
Object.defineProperty( Obj, "a", {
    value: 5,
    writable: true,
    configurable: true,
    enumerable: true
});

        第一和第二种方法创建属性的方法一样。你可能会想,第三种方法要写那么多代码,还是前面两种靠谱。下面通过几个实例来看看是不是真的那样。

实例一:

var Obj1 = {};
Object.defineProperty( Obj1, "a", {
    value: 5,
    writable: false,    //注意,这里改了false了,意思是不可写。
    configurable: true,
    enumerable: true
});
var Obj2 = { a:5 };

        好,我们来修改一下它的值看看。

Obj1.a= 6;
console.log(Obj1.a);        //返回值:5
Obj2.a= 6;
console.log(Obj1.a);        //返回值:6

        对,这就是它的区别一。Obj2一点节操都没有,说变就变。还是Obj1可靠点,始终如一。

实例二:

var Obj1 = {};
Object.defineProperty( Obj1, "a", {
    value: 5,
    writable: true,
    configurable: false,        //注意,这里改了false了,意思是不可配置。
    enumerable: true
});
var Obj2 = { a:5};

        试试删除属性a看看。

delete Obj1.a;
console.log(Obj1.a);        //返回值:5
delete Obj2.a;
console.log(Obj2.a);        //返回值:undefined

        这就是区别二,configurable: false可以禁止删除属性。它还可以禁止通过defineProperty()修改属性的特性。

注意:属性如果设了不可配置,writable还是可以由true改为false,但不能由false改为true。

实例三:

var Obj1 = {};
Object.defineProperty( Obj1, "a", {
    value: 5,
    writable: true,
    configurable: true,
    enumerable: false        //注意,这里改了false了,意思是不可枚举。
});
var Obj2 = { a:5};

        试试通过for-in把属性打印出来。

for( i in Obj1 ){
    console.log( "Obj1[" + i +"]:" + Obj1[i] );
};        //无返回值
for( i in Obj2 ){
console.log( "Obj2[" + i +"]:" + Obj2[i] );
};        //返回值:Obj2[a]:5

        这就是区别三。for-in只能找到可枚举的属性。

        通过下面的方法,可以看到Obj2是有属性a的。

"a" in Obj2;//返回值:true

得注意的是,如果通过defineProperty()方法创建属性而不指定属性的特性,默认都为false。看看下面的代码:

var Obj = {};
Object.defineProperty( Obj,"a", {
    value: 5,
});

        通过console.log的输出结果:(在控制台上可以不打console.log)

       好了,现在应该知道怎么处对象了吧。

        最后,再送大家三个实用方法:

实例:

var Obj = {};
Object.defineProperty( Obj, "a", {
    value: 3,
    enumerable: true    //设为可枚举
});
    value: 4,
    enumerable: false    //设为不可枚举
});
Obj.propertyIsEnumerable("a");        //返回值:true
Obj.propertyIsEnumerable("b");        //返回值:false
Obj.propertyIsEnumerable("c");        //返回值:false

Object.keys(Obj);        //返回值:["a"]
Object.getOwnPropertyNames(Obj);     //返回值:["a", "b"]

propertyIsEnumerable():检查属性名是否存在于对象中(而不是原型链上),并且为可枚举。

Object.keys():返回一个数组,包含所有可枚举的属性。

Object.getOwnPropertyNames():返回一个数组,包含所有属性,不管是否可枚举。

评论