Objects in javascript are composed of key and value. Key is an identifier and value can be of any type

How objects are created

1. By constructor

var obj = new Object()
obj.name = 'alice'
obj.age = 18

2. Pass literal

var obj = {
  name: 'alice',
  age: 18
}

property descriptor

Perform precise operations on attributes, such as defining whether attributes can be deleted, traversed or modified

1. Grammar

//Define an attribute
Object.defineProperty(Object, PropertyKey, attributes)
// Define multiple attributes
Object.defineProperties(Object, properties)

2. Attribute descriptor characteristics

3. Classification of attribute descriptors

Attribute descriptors are divided into data attribute descriptors and read attribute descriptors. Data attribute descriptors are used to define attributes. Read attribute descriptors are used to read and set attributes that are not willing to be exposed in functions

Different attribute descriptors can operate on different attributes

4. Definition
Add the skill attribute to the obj object. The description of the attribute is not deleted or redefined, not modifiable, and enumerable

var obj = {
  name: 'alice',
  age: 18
}

Object.defineProperty(obj, 'skill', {
  configurable: false,
  writable: false,
  enumerable: true,
  value: 'flying',
})
console.log(obj)

delete obj.skill
console.log(obj)

obj.skill = 'swimming'
console.log(obj)

Therefore, the above deletion and modification are invalid operations. The execution results are as follows

Object

1. Gets the property descriptor of the object

• getOwnPropertyDescriptor
• getOwnPropertyDescriptors

2. Operation properties

• preventExtensions prevents new properties from being added
• seal closes the attribute, that is, it is forbidden to add or delete attributes
• freeze attribute, that is, it is forbidden to add, modify or delete attributes

3. Query properties

• isExtensible query whether attributes can be added
• isSealed query whether it is a closed property
• isFrozen query whether it is a frozen property

var user = {
  name: 'kiki',
  age: 18
}
console.log('getOwnPropertyDescriptor', Object.getOwnPropertyDescriptor(user, 'name'))
console.log('getOwnPropertyDescriptors', Object.getOwnPropertyDescriptors(user))

Object.preventExtensions(user)
console.log('isExtensible', Object.isExtensible(user))
user.skill = 'flying'
console.log('user', user)

Object.seal(user)
console.log('isSealed', Object.isSealed(user))
delete user.age
console.log('user', user)

Object.freeze(user)
console.log('isFrozen', Object.isFrozen(user))
user.name = 'alice'
console.log(user)

The execution results of the above code are as follows

prototype

1. Implicit prototype

Each object has an implicit prototype. You can use Object.getPrototypeOf or__ proto__ (there is a browser compatibility problem) when obtaining and finding elements, if there is no own object, it will find it on the prototype

var obj = {}
console.log(obj.__proto__)
console.log(Object.getPrototypeOf(obj))
console.log(obj.name)

obj.__proto__.name = 'alice'
console.log(obj.name)

The implicit prototype of the object points to an empty object

2. Explicit prototype

In addition to the implicit prototype, each function also has an explicit prototype. In the prototype, there is an attribute constructor pointing to the function itself

function foo(){}
console.log(foo.__proto__)
console.log(foo.prototype)
console.log(Object.getOwnPropertyDescriptors(foo.prototype))

Constructor

In the constructor, you can create objects in batch through the new keyword

1. Definition mode

function foo()
var f = new foo()

2. Operation of new keyword

• Create a new object (empty object) in memory
• Object__ proto__ Property is assigned to the prototype property of the constructor
• this of the constructor will point to the created object
• Code that executes the constructor
• If the function does not return a non empty object, it returns the new object created

3. Performance in memory
The new keyword will change the name of the created object__ proto__ Property is assigned to the prototype property of the constructor

function Person(){}
var p1 = new Person()
var p2 = new Person()
console.log(p1.__proto__ === Person.prototype) // true
console.log(p1.__proto__ === p2.__proto__) // true

The illustration is as follows

The above is part of the content of object-oriented programming. The next article records the implementation of inheritance in js. There are still many places that developers need to master about js advanced. You can see other blog posts I wrote and keep updating~