Understanding of JavaScript objects

object

Understanding object

ECMA-262 defines an object as "a collection of unordered attributes whose attributes can contain basic values, objects or functions." Strictly speaking, this is equivalent to saying that an object is a set of values without a specific order. Each property or method of an object has a name, and each name is mapped to a value.

We can think of the ECMAScript object as a hash table: nothing more than a set of name value pairs, in which the value can be data or function.

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

Merge objects

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

Object. Is provided in ES6 Assign() to merge objects.

This method takes a target object and one or more source objects as parameters, and then copies all the properties and self owned properties of the source object to the target object.

Merge objects in addition to using object Assign, you can also use Object extenders to simplify merging objects

s

be careful:

Object.assign() is a shallow copy. If multiple source objects merge and duplicate attributes, the value of the last attribute will be taken.

// ...

var a = {
    title:'Junior front end Engineer'
}

var b = {
    address: 'Zhongguancun, Beijing'
}

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





//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', wave: '22W'}

Object identification type and equality judgment

Object. Is provided in ES6 Is () method, which accepts two parameters.

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

Object properties

ECMA-262 version 5 describes various features of attributes when defining features that are only used internally. These features are used to implement the JavaScript engine, so they cannot be accessed directly in JavaScript.

In JavaScript, the attribute types of objects are: data attribute and accessor attribute

Data properties

Definition: the data attribute contains the location of a data value, which can read and write values. It can be defined directly through the object. Data attributes have four characteristics that describe their behavior.

It has four specific behaviors to constrain attribute behavior.

on time

be careful:

When calling object When defineproperty(), if the default behavior of the property is not specified, its three behaviors are false

In actual development, there are few default behavior scenarios for modifying attributes, but learning the behavior of attributes is helpful to understand objects.

How to modify the default behavior of object properties

Through object Defineproperty() to modify the default behavior of the property

Parameters are:

Target object Object properties to modify A descriptor object (this object is used to manage the default behavior of attributes)

This method will directly define a new property on an object, or modify the existing property of an object and return the object.

let obj = {
    code: 200,
    title: 'Front end self-study community',
}

Object.defineProperty(obj,"code",{
    writable: false  //Prohibit modifying object attribute code
})

obj.code = 201


console.log(obj)  // Return to {code: 200, title: 'front end self-study community'}

Accessor properties

It contains a setter function and a getter function, which are used to return the property value and modify the property value

When the property is modified, get and call the setter function.

The getter function is called when the property wants to get a value.

In actual development, these two attributes are not necessary. It depends on your business needs

If the value of one property changes and affects the value of another property, you can use setter and getter.

let obj = {
    code: 200,
    title: 'Front end self-study 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-study community'}

Behavior of reading properties

To read the properties of an attribute, you must use ECMAScript5's: object Getownpropertydescriptor() to get the behavior of object properties.

This function accepts two parameters:

Target object Properties to get

This method returns the property descriptor corresponding to a self owned property on the specified object.

let obj = {
    code: 200,
    title: 'Front end self-study community',
}

const des = Object.getOwnPropertyDescriptor(obj,'code')
console.log(des) 
//{ value: 200, writable: true, enumerable: true, configurable: true }
console.log(des.writable) //true