Understanding JavaScript objects

object

Understanding object

Ecma-262 defines an object as “an unordered collection of attributes, which may contain primitive values, objects, or functions.” Strictly speaking, this is equivalent to saying that an object is a set of values in no particular order. Each property or method of an object has a name, and each name maps to a value.

We can think of ECMAScript objects as hash tables: nothing more than a set of name-value pairs whose values can be data or functions.

Each Object is created based on a reference type, meaning that the easiest way to create a custom Object is to create an instance of Object and then add properties and methods to it

Merge objects

It is the value that copies all the properties of the source object into the properties of the target object.

Object.assign() is provided in ES6 to merge objects.

This method takes a target object and one or more source objects as parameters, and copies all of the source object’s properties and its own properties into the target object.

Merge objects except using Object.assignYou can also use… Object extender to simplify merging objects

s

Note:

• Object.assign()Is shallow copy. If a merge occurs between multiple source objects, the value of the last attribute is taken when the attribute is repeated.

// ...

var a = {
    title:'Junior Front End Engineer'
}

var b = {
    address: 'Beijing Zhongguancun'
}

varc = { ... a, ... b}console.log(c) 
// {title: 'junior front-end engineer ', address:' Beijing Zhongguancun '}





//Object.assign()
var job = {
    title:'Senior Front End Engineer'
}

var salary = {
    wage: '22w'
}

var HaiJun = {}

console.log(Object.assign(HaiJun,a,job,salary)) 
//{title: 'senior front-end engineer ', wage: '22w'}
Copy the code

Object identification type and equality judgment

The object.is () method is provided in ES6, which takes two arguments.

console.log(Object.is(1."1")) //false

console.log(Object.is({},{})) //false

console.log(Object.is(+0.0))   //true

var objA = {
    id:2
}

var objB = {
    id:2
}

console.log(Object.is(objA.id,objB.id)) //true
Copy the code

Object properties

Ecma-262 version 5, in defining internal-only features, describes various characteristics of attributes that are intended to implement JavaScript engines and therefore cannot be accessed directly in JavaScript.

In JavaScript, the property types of an object are: data property and accessor property.

Data attributes

Definition: A data property contains a location of a data value that can be read and written to, directly defined by an object. Data attributes have four characteristics that describe their behavior.

It has four specific behaviors that constrain attribute behavior.

On time

Note:

• In the call Object.defineProperty()When,If the default behavior of the property is not specified, all three behaviors are false .

In real development, there are few scenarios for changing the default behavior of a property, but learning the behavior of a property helps you understand an object.

How do I modify the default behavior of object properties

Modify the attribute default behavior with Object.defineProperty()

Parameters as follows:

• The target object

• The object property to modify

• A descriptor object that manages the default behavior of properties

This method directly defines a new property on an object, or modifies an existing property of an object, and returns the object.

let obj = {
    code: 200.title: 'Front-end Self-learning Community',}Object.defineProperty(obj,"code", {writable: false  // Disallow the modification of object attribute code
})

obj.code = 201


console.log(obj)  // return {code: 200, title: 'front-end self-learning community'}
Copy the code

Accessor properties

It contains a setter and getter function that returns the property value and modifies the property value.

Gets to call setter functions when properties are modified.

When the property wants to get a value, the getter function is called.

In actual development, these two attributes are not required, depending on your business requirements

A settter getter can be used when the value of one property changes to affect the value of another property.

let obj = {
    code: 200.title: 'Front-end Self-learning Community',}Object.defineProperty(obj,"mounth", {set(newValue){
        if(newValue >3) {
            this.code = 400}},get(){
        return this.code
    }
})
obj.mounth = 4
console.log(obj)  //{code: 400, title: 'front-end self-learning community'}
Copy the code

The act of reading a property

To read the attributes of properties, must use ECMAScript5: Object. GetOwnPropertyDescriptor () to obtain the attributes of the Object.

This function takes two arguments:

• The target object
• The property to obtain

This method returns a property descriptor corresponding to a property of its own on the specified object.

let obj = {
    code: 200.title: 'Front-end Self-learning Community',}const des = Object.getOwnPropertyDescriptor(obj,'code')
console.log(des) 
//{ value: 200, writable: true, enumerable: true, configurable: true }
console.log(des.writable) //true
Copy the code

conclusion

❤️ attention + like + collection + comment + forward ❤️, original is not easy, encourage the author to create better articles pay attention to the public number “front-end self-study community”, you can get more front-end high-quality articles! After paying attention to the reply keyword “add group”, you can join the “front-end self-study communication group”, learning progress together. After paying attention to add my wechat pull you into the technical exchange group welcome to pay attention to the public number, more wonderful articles only in the public number push