JavaScript Advanced Programming (Red Treasure) Chapter VIII Objects, Classes, and Object-Oriented Programming Reading

Posted by merlinti on Wed, 24 Nov 2021 21:15:23 +0100

JavaScript Advanced Programming (Red Treasure) Chapter VIII Objects, Classes, and Object-Oriented Programming Reading

INTRODUCTION: You can think of an ECMAScript object as a Hash list containing a set of name/value pairs, where values can be data or functions.

Section 1: Understanding Objects

Now let's create an object

let person = {
    name: "Tom",
    age: 29,
    job:"engineer",
    sayName() {
        console.log(this.name);
    }
}


Section 2: Attributes of Data

1.[[Configurable]]: Indicates whether a property can be redefined by delete deletion, whether its attributes can be modified, and whether it can be changed to an accessor property.

2.[[Enumberable]]: Indicates whether an attribute can be returned through a for-in loop

3.[[Writable]]: Indicates whether the value of an attribute can be modified

4.[[value]]: Contains the actual value of the attribute

Example:

let person = {}
Object.defineProperty(person,"name",{
    Writable:false,
    value: "nic"
});
console.log(person.name); //nic
person.name = "Grrg";
console.log(person.name); //nic
let person = {}
Object.defineProperty(person,"name",{
    configurable:false,
    value: "nic"
});
console.log(person.name); //nic
delete person.name;
console.log(person.name); //nic

Note: If configurable is set to false, it is not reversible and will never be configurable.

Two additional attributes are provided:

[[Get]]: Gets a function that is called when reading a property.

[[Set]]: Sets a function that is called when a property is written.

Example:

Object.defineProperty(book,"year",{
    get() {
        return this.age;
    },
    set(newValue) {
        this.age = newValue;
    }
})

Section 3: Defining Multiple Attributes

let book = {};
Object.defineProperty(book,"year",{
    year_: {
        value:2017
    },
    edition: {
      value:1  
    },
    year:{
       get() {
        return this.age;
    },
    set(newValue) {
        this.age = newValue;
    } 
    }
    
})

Section 4: Reading Attribute Attributes

Method: Object.getOwnPropertyDescriptor();

let book = {};
Object.defineProperty(book,"year",{
    year_: {
        value:2017
    },
    edition: {
      value:1  
    },
    year:{
       get() {
        return this.age;
    },
    set(newValue) {
        this.age = newValue;
    } 
    }
    
})

//The core is here
let des = Object.getOwnPropertyDescriptor(book,"year_");
console.log(des.value); //2017
console.log(des.configurable); //false
console.log(typeof des.get); //undefined

let des = Object.getOwnPropertyDescriptor(book,"year"); //So des.get gets it

ECMAScript 2017: Object.getOwnPropertyDescriptors() static method. Calling this simply means that all properties of all variables are returned.

Code omitted.

Section 5: Merged Objects (Mixed)

Blend: Copy all local properties of the source object together onto the target object.

Target objects are enhanced by blending objects into the properties of the source object.

Method for merging objects in ES6: Object.assign() method.

Simple copy:

dest = {};
src = {id:'src'};

result = Object.assign(dest,src);
//Object.assign Modifies the target object
//It also returns the modified target object
console.log(dest === result); //true
console.log(dest !== src); //true
console.log(result); //{id:src}
console.log(result); //{id:src}

Multiple source objects:

dest = {};
result = Object.assign(dest,{a:'foo'},{b:'bar'});
console.log(result); //{a:foo,b:bar}

Get and set functions:

dest = {
    set a(val) {
        console.log()
    }
};

src = {
    get a() {
        console.log('Invoked src getter');
        return 'foo';
    }
}

Object.assign(dest,src);
//Call src's get method, dest's set method, and pass in foo
//Because the set function here does not perform assignments
//So we didn't actually transfer the values here
console.log(dest); //{set a(val) {...}}

Object.assign() actually does a shallow copy of each source object.

That is, you cannot transfer the get and set functions between two objects.

Also, the back attribute overrides the previous one.

Knowledge Points:

Shallow copy: This means that only references to objects will be copied.

Incomplete treatment.

Good night

Topics: Java Javascript Front-end ECMAScript