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