A thorough understanding of Object's attributes

1. Instantiating Object objects

There are two ways to instantiate Object objects: using Object constructors and using literal quantities of objects. For example:

var person1 = {
    name: 'Li Si'
};

var person2 = new Object();
person2.name = 'WangTwo';

2. Adding attributes to real columns

We can add attributes to objects anytime, anywhere, or we can modify the values of attributes at any time.

Copy code
var person1 = {
    name: 'Xiao Ming'
};

var person2 = new Object();
person2.name = 'Xiaohong';

//Adding attributes to objects
person1.age = 23;
person2.age = 25;

//Modify the value of the attribute
person1.name = 'Zhang San';
console.log(person1.name);      //'Zhang three'
person2.name = 'Li Si';
console.log(person2.name);      //'Lee four'

3. Delete attributes in objects

var person1 = {
    name: 'Zhang San'
};

person1.name = null;



console.log(person1.name);      //'Zhang three'

delete person1.name;

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

4. Check attributes

Because attributes of objects can be modified or deleted anytime and anywhere, sometimes we need to check whether an attribute of an object exists. It is unreliable to check in the following way:

var person1 = {
    name: 'Zhang San'
};


person1.name = '';//Or null/undefined

if (person1.name) {

    console.log('existence');

} else {

    console.log('Non-existent');         //'no'
}

In this way, you may not get the correct results. If the values of the attributes are: objects, non-empty strings, non-zero numbers or true, the if conditional statement will convert them to true. If the values of attributes are null, undefined, 0, false, NaN, empty strings, the if conditional statement converts them to false. A more reliable way to detect whether attributes exist in a difference object is to use the in operator:

var person1 = {
            name: 'Zhang San'
};


person1.name = '';//Or null/undefined

if ('name' in person1) {

    console.log('existence');          //'being'

} else {

    console.log('Non-existent');
}

5. Attributes of traversing real columns

By default, the attributes we add to objects are enumerable, so that we can iterate through them using a for-in loop.

var obj = {
    name: 'Zhi Long Wang',
    age: 23,
    gender: 'male',
    address: 'Hebi'
};

var propertyName;

for (propertyName in obj){

    console.log('Property name:' + propertyName);
    console.log('Attribute values:' + obj[propertyName]);
}

The for-in loop assigns an attribute name to propertyName every time until all attributes are traversed.

If we just want to get all the attribute names in an object, we can use the Object.keys() method. This method returns all attribute names as arrays.

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

6. Classification of attributes

There are two types of attributes: data attributes and accessor attributes. Data attributes are used to store a value, such as name in the previous example. Accessor attributes do not contain values, but define a get and set function. When reading attributes, call get function, when writing attributes, call set function.

The following is a grammar for defining accessor properties in the form of literal quantities:

var obj = {

    _myname: 'clw',

    get name(){

        console.log('get Method is called');
        return this._myname + '1111';

    },
    set name(value){

        console.log('set Method is called');
        this._myname = value;

    }
};

console.log(obj.name);

7. Internal attributes

7.1 Shared attributes:

There are two internal features of data attribute and accessor attribute sharing: one is [[Enumerable], which determines whether we can traverse the attribute. The other is [[Configurable], which determines whether we can change attributes. By default, the attributes we add to objects are enumerable and configurable.

If we want to change the properties of attributes, we can use the Object.defineProperty() method. This method accepts three parameters: the object with the modified attribute, the name of the modified attribute and the object with the descriptive feature. Descriptors and internal feature names are the same, but there are no square brackets. For example, we changed an attribute to be unable to enumerate and configure:

var person1 = {
    name: 'Zhang San',
    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);                          //'Zhang three'

7.2 Internal characteristics of accessor properties:

var obj = {

    _myname: 'clw',

    get name(){

        console.log('get Method is called');
        return this._myname + '1111';

    },
    set name(value){

        console.log('set Method is called');
        this._myname = value;

    }
};


//The above code is equivalent to:

var obj2 = {
    _myname: 'clw'
};


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

        console.log('get Method is called');
        return this._myname + '1111';

    },
    set: function(value) {

        console.log('set Method is called');
        this._myname = value;

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

7.3 Defines the internal characteristics of multiple attributes:

Object.defineProperty() is used to define the internal characteristics of a single attribute, and Object.defineProperties() is used to define multiple attributes. This method takes two parameters, the first is the object to which the attribute belongs, and the second is the object containing the defined attribute.

 var person1 = {};

        Object.defineProperties(person1, {
            name: {
                value: 'Zhang San',
                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);              //'Zhang three'
        person1.name = 'Li Si';
        console.log(person1.name);              //'Lee four'

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

7.4 Get the properties inside the attributes

There are two ways to get the internal properties of attributes: Object.getOwnPropertyDescriptor() and Object.getOwnPropertyDescriptors().

var person1 = {};

        Object.defineProperties(person1, {
            name: {
                value: 'Zhang San',
                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
            }
        });

        //Getting the internal characteristics of a single attribute in an object
        var descriptor = Object.getOwnPropertyDescriptor(person1, 'address');
        //Get the internal characteristics of all attributes in an object
        var descriptors = Object.getOwnPropertyDescriptors(person1);
        console.log(descriptors);

Keywords: Attribute

Added by Myss on Thu, 23 May 2019 23:28:37 +0300