这次彻底理解了Object这个属性

最新推荐文章于 2023-04-01 02:17:27 发布

转载最新推荐文章于 2023-04-01 02:17:27 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhoulifeng/p/7523113.html

本文详细介绍了JavaScript中对象的创建方式、属性的添加与删除、属性的检查与遍历方法，并深入探讨了属性的分类及其内部特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实例化Object对象

实例化Object对象的方式有两种：使用Object构造器和使用对象的字面量。例如：

var person1 = {
    name: '李四'
};

var person2 = new Object();
person2.name = '王二';

2.为实列添加属性

我们可以随时随地为对象添加属性，也可以随时修改属性的值。

var person1 = {
    name: '小明'
};

var person2 = new Object();
person2.name = '小红';

//给对象添加属性
person1.age = 23;
person2.age = 25;

//修改属性的值
person1.name = '张三';
console.log(person1.name);      //'张三'
person2.name = '李四';
console.log(person2.name);      //'李四'

3.删除对象中的属性

var person1 = {
    name: '张三'
};

person1.name = null;



console.log(person1.name);      //'张三'

delete person1.name;

console.log(person1.name);      //'undefined'

4.检查属性

由于对象的属性可以被随时随地被修改或删除，因此有时候我们需要检查对象的某个属性是否存在。使用下面的方式检查是不可靠的：

var person1 = {
    name: '张三'
};


person1.name = '';//或者null/undefined

if (person1.name) {

    console.log('存在');

} else {

    console.log('不存在');         //'不存在'
}

使用这种方式可能会得不到正确的结果，如果属性的值是：对象，非空字符串，非零的数或者true，if条件语句会把它们转换成true。如果属性的值是：null，undefined，0，false，NaN，空字符串，if条件语句会把它们转换成false。检差对象中的属性是否存在的更可靠的方式是使用in操作符:

var person1 = {
            name: '张三'
};


person1.name = '';//或者null/undefined

if ('name' in person1) {

    console.log('存在');          //'存在'

} else {

    console.log('不存在');
}

5.遍历实列的属性

默认情况下，我们添加到对象上的属性都是可枚举的，这样的话我们就可以使用for-in循环遍历它们。

var obj = {
    name: '王志龙',
    age: 23,
    gender: '男',
    address: '鹤壁'
};

var propertyName;

for (propertyName in obj){

    console.log('属性名：' + propertyName);
    console.log('属性值：' + obj[propertyName]);
}

for-in循环每循环一次都会将一个属性名赋值给propertyName，直到所有的属性都被遍历一遍为止。

如果我们只是想获取一个对象中的所有属性名，可以使用Object.keys()方法。该方法会以数组的形式返回所有的属性名。

console.log(Object.keys(obj));     // ["name", "age", "gender", "address"]

6.属性的分类

属性的类型分两种：一种是数据属性，一个种是访问器属性。数据属性用来存储一个值，比如所上个例子中的name。访问器属性不包含值，而是定义了一个get和set函数，当读取属性时，调用get函数，当写属性时，调用set函数。

下面是一个使用字面量的形式定义访问器属性的语法：

var obj = {

    _myname: 'clw',

    get name(){

        console.log('get方法被调用了');
        return this._myname + '1111';

    },
    set name(value){

        console.log('set方法被调用了');
        this._myname = value;

    }
};

console.log(obj.name);

7.属性的内部

　　7.1共享的属性：

数据属性和访问器属性共享的内部特性有两个：一个是[[Enumerable]]，这个特性决定了我们是否能够遍历该属性。另一个是[[Configurable]]，这个特性决定了我们是否能够改变属性。默认情况下我们在对象上添加的属性都是可枚举、可配置的。

如果我们向改变属性的特性，可以使用Object.defineProperty()方法。该方法接受3个参数：拥有被修改属性的对象、被修改的属性名、包含描述特性的对象。描述符和内部特性名称相同，但是没有方括号。例如，我们将一个属性改成不能枚举，不能配置：

var person1 = {
    name: '张三',
    age: 22
};

console.log(person1.propertyIsEnumerable('name'));

Object.defineProperty(person1, 'name', {
    enumerable: false
});

console.log('name' in person1);                     //true
console.log(person1.propertyIsEnumerable('name'));  //false

var properties = Object.keys(person1);
console.log(properties);                            //["age"]

//delete person1.name;
//console.log(person1.name);                        //'undefined'

Object.defineProperty(person1, 'name', {
    configurable: false
});

delete person1.name;
console.log(person1.name);                          //'张三'

　　7.2访问器属性内部的特性：

var obj = {

    _myname: 'clw',

    get name(){

        console.log('get方法被调用了');
        return this._myname + '1111';

    },
    set name(value){

        console.log('set方法被调用了');
        this._myname = value;

    }
};


//上面的代码等价于：

var obj2 = {
    _myname: 'clw'
};


Object.defineProperty(obj, 'name', {
    get: function() {

        console.log('get方法被调用了');
        return this._myname + '1111';

    },
    set: function(value) {

        console.log('set方法被调用了');
        this._myname = value;

    },
    configurable: true,
    enumerable: true
});

　　7.3定义多个属性的内部特性：

定义单个属性的内部特性使用Object.defineProperty()，定义多个属性使用的是Object.defineProperties()，这个方法接受2个参数，第一个是属性所属的对象，第二个是包含被定义属性的对象。

  var person1 = {};

        Object.defineProperties(person1, {
            name: {
                value: '张三',
                enumerable: true,
                configurable: true,
                writable: true
            },
            age: {
                value: 23,
                enumerable: false,
                configurable: false,
                writable: false
            },
            address: {
                get: function(){

                },
                set: function(value){

                },
                enumerable: true,
                configurable: true
            }
        });

        console.log(person1.name);              //'张三'
        person1.name = '李四';
        console.log(person1.name);              //'李四'

        console.log(person1.age);               //23
        person1.age = 500;
        console.log(person1.age);               //23

　　7.4获取属性内部的特性

获取属性的内部特性的方法有两个：Object.getOwnPropertyDescriptor()和Object.getOwnPropertyDescriptors()。

var person1 = {};

        Object.defineProperties(person1, {
            name: {
                value: '张三',
                enumerable: true,
                configurable: true,
                writable: true
            },
            age: {
                value: 23,
                enumerable: false,
                configurable: false,
                writable: false
            },
            address: {
                get: function(){

                },
                set: function(value){

                },
                enumerable: true,
                configurable: true
            }
        });

        //获取对象中单个属性的内部特性
        var descriptor = Object.getOwnPropertyDescriptor(person1, 'address');
        //获取对象中所有属性的内部特性
        var descriptors = Object.getOwnPropertyDescriptors(person1);
        console.log(descriptors);

转载于:https://www.cnblogs.com/zhoulifeng/p/7523113.html