js - Object attributes used (a)

Object.defineProperty && Object.defineProperties

ECMAS-262 5th edition defined only used when the internal characteristics, provides a description of the characteristic properties of several properties. ECMAScript object existing attribute descriptor There are two main data descriptor (attribute data) and the access descriptor (access properties), has a data descriptor is writable or unwritable attribute values. Access descriptor is an attribute of a pair of getter-setter function function described herein.

Object.defineProperty && Object.definePropertiesThese two methods are important in js, the main function is used to define or modify the properties of the interior , corresponding thereto Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptorsis acquired, this line internal property.

Data (data descriptor) properties

There are four data attributes describe internal properties characteristic

• [[The Configurable]]
  indicates whether the attribute is removed by delete, can modify the properties of the properties, or the ability to modify the access attribute modification properties, if direct literal definition object, the default is true

• [[Enumerable]]
  indicates whether the attribute can be enumerated, i.e., whether to return the attributes for-in loop or Object.keys (), if direct literal definition object, the default is true

• [[The Writable]]
  can modify the value of the property, if direct literal definition object, the default is true

• [[The Value]]
  corresponding to the attribute value default is undefined

Accessor (Access Descriptor) properties

Access properties described also has four internal property characteristics

• [[The Configurable]]
  as data and properties [[the Configurable]], indicating whether this property by deleting delete, can modify the properties of the properties, or the ability to modify the access attribute modification properties, if used as literal definitions object, the default value is true

• [[Enumerable]]
  and data attributes [[the Configurable]] as the attribute indicates whether enumerable, i.e., whether to return the attributes for-in loop or Object.keys (), if used as literal definition objects, Default It is true

• [[Get]]
  a property to provide getter method (function call to access the object property, the return value is the current value of the property), if there is no getter was undefined. The return value is used as the method attribute value. The default is undefined

• [[The Set]]
  a property to provide the setter method (function called when the attribute value is provided to a subject), if no setter was undefined. This method takes a unique parameter, and the new value of the parameter assigned to the attribute. The default is undefined

Create / modify / get property method

• Object.defineProperty()

Function:
The method defines an object directly on a new attribute, or modify existing properties of an object and return the object. If you do not specify a configurable, writable, enumerable, then these attributes default is false, if you do not specify the value, get, set, these properties default value is undefined

语法: Object.defineProperty(obj, prop, descriptor)

obj : a target object to be operated
prop : target needs to define or modify the name of the attribute
descriptor : attributes will be defined or modified descriptor

var obj = new Object();

Object.defineProperty(obj, 'name', {
     configurable: false,
     writable: true,
     enumerable: true,
     value: '张三'
})

• Object.defineProperties()

Function:
The method of directly defining one or more new attributes on an object or modify an existing attribute, and returns the object.

语法: Object.defineProperties(obj, props)

obj : to be added or modified attributes of objects
The props : one or more key of the object to be added or modified specific configuration attributes defined for the object of

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '张三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 张三, 18

• Object.getOwnPropertyDescriptor()

Function:
This method returns the specified object of a corresponding property of its own attribute descriptor. (Own property imparting means is a direct property of the object, the attribute need not be looked up from the prototype chain)

语法: Object.getOwnPropertyDescriptor(obj, prop)

obj: a need to find the target object
prop: the name of the target object property

var person = {
    name: '张三',
    age: 18
}

var desc = Object.getOwnPropertyDescriptor(person, 'name'); 
console.log(desc)  结果如下
// {
//     configurable: true,
//     enumerable: true,
//     writable: true,
//     value: "张三"
// }

• Object.getOwnPropertyDescriptors()

Function:
The all own attribute descriptor specified object, if there is no attribute itself, returns the empty object.

语法: Object.getOwnPropertyDescriptors(obj)

obj: a need to find the target object

var person = {
    name: '张三',
    age: 18
}
var desc = Object.getOwnPropertyDescriptors(person);
console.log(desc) 
//name: {
//    configurable: true,
//    enumerable: true,
//    value: '张三',
//    writable: true
//}
//age: {
       configurable: true
      enumerable: true
     value: 18
     writable: true
}

Descriptor properties under various scenarios

• configurable
  If configurable attribute to false, can not use the delete operator (throw errors in strict mode), modify all internal property throws an error in the "javaScript advanced tutorial," said can only change the value of writable now change the value of writable will throw an error

Add a descriptor attribute data in the object

var person = {};

Object.defineProperty(person, 'name', {
    configurable: false,
    value: 'John'
}) ;

delete person.name   // 严格模式下抛出错误

console.log(person.name)  // 'John'  没有删除

Object.defineProperty(person, 'name', {
    configurable: true  //报错
});

Object.defineProperty(person, 'name', {
    enumerable: 2  //报错
});

Object.defineProperty(person, 'name', {
    writable: true  //报错
});

Object.defineProperty(person, 'name', {
    value: 2  //报错
});

Add access in an object descriptor attribute

var obj = {};
var aValue; //如果不初始化变量, 不给下面的a属性设置值,直接读取会报错aValue is not defined
var b;
Object.defineProperty(obj, 'a', {
    configurable : true,
    enumerable : true,
    get: function() {
        return aValue
    },
    set: function(newValue) {
        aValue = newValue;
        b = newValue + 1
    }
})
console.log(b) // undefined
console.log(obj.a)  // undefined, 当读取属性值时，调用get方法,返回undefined
obj.a = 2;  // 当设置属性值时,调用set方法,aValue为2

console.log(obj.a) // 2  读取属性值,调用get方法,此时aValue为2
console.log(b) // 3  再给obj.a赋值时,执行set方法,b的值被修改为2,额外说一句,vue中的计算属性就是利用setter来实现的

Note:
1.getter setter and may not be used simultaneously, but only one of the strict mode, error is thrown
2. The data access descriptor and the descriptor can not be mixed, error is thrown

var obj = {};
Object.defineProperty(obj, 'a', {
    value: 'a1',
    get: function() {
       return 'a2'
    }    
});

3. Under the global environment

var a = 1; // a属于window, 相当于window.a
var d = Object.getOwnPropertyDescriptor(window, 'a');
console.log(d)
// {
//     configurable: false,
//     value: 1,
//     writable: true,
//     enumerable: true
// }

In another look at the way NA var statement to initialize a variable

a = 1; // a相当于window的一个属性, window.a
var d = Object.getOwnPropertyDescriptor(window, 'a');
console.log(d)
// {
//     configurable: true,   // 此时configurable属性值为true
//     value: 1,
//     writable: true,
//     enumerable: true
// }

Any variables var defined above, which are configurable attribute value is false, the object is defined as

var b = {
    name: 'bbb'
}
var d = Object.getOwnPropertyDescriptor(window, 'b');
console.log(d)
// {
//     configurable: false
//     value: 1,
//     writable: true,
//     enumerable: true
// }

It is noted that it is the object using the literal definition of the attribute data inside the object descriptor attributes are true

var b = {
    name: 'bbb'
}
var d = Object.getOwnPropertyDescriptor(b, 'name');
console.log(d)
// {
//     configurable: true
//     writable: true,
//     enumerable: true
//     value: 'bbb'
// }

• Writable

When the writable is false (and configurable as true), [[value]] can be modified by defineProperty, but can not directly modify an assignment