js object-oriented programming, you need to know this

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

attributedescribeDefault value when defined by objectDefault value when defined by attribute descriptor
configurableDefines whether attributes can be deleted or redefinedtruefalse
enumerableDefines whether attributes can be enumerated, for example, through for in/Object.keystruefalse
writableCan it be modifiedtruefalse
valueRead the property and the value of the operation when modifyingundefinedundefined
getThe function that executes when the property is obtainedundefinedundefined
setThe function that executes when the property is setundefinedundefined

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

Data attribute descriptor××
Access property descriptor××

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',

delete obj.skill

obj.skill = 'swimming'

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


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))

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

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

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

The execution results of the above code are as follows


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 = {}

obj.__proto__.name = 'alice'

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(){}


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~

Keywords: Javascript

Added by n00b Saibot on Sun, 07 Nov 2021 20:40:53 +0200