preface

JS objects are difficult to understand in JavaScript because they are not only complex data types, but also involve prototypes and chains of prototypes. This article describes adding, deleting, and checking objects and what a prototype is and what a prototype chain is.

Composition of objects

What is an object?

  • An unordered collection of data
  • Set of key-value pairs

That might be too official, but let me put it this way:

  • Objects store properties in no particular order, so you can store a property anywhere
  • Object is aKey: value, translated into Chinese is the key value pair

writing

// Normal writing
let obj = new Object({name:'wangpf'.age:18})
// Simple way to write
let obj  {name:'wangpf'.age:18}
Copy the code

Attention! Attention! Attention!

The key name of the object is a string, the key name of the object is a string, and the key name of the object is a string. This is important! It is still a string even if the quotation marks are omitted!!

The variable is the attribute name

We’ve always used constants (which are strings) for property names

Use variables as attribute names:

let p1 = 'name'
let obj = {p1:'wangpf'} 'p1' is a string!
let obj = {[p1]:'wangpf'} 'name' : 'wangpf'
Copy the code

Looking at the code above, it’s important to be impressed that the object’s attribute name (key) is a string!

The object’shiddenattribute

Hidden properties?

  • In fact, every JS object has a hidden property
  • And this hidden property is storedAn object that has properties in commonThe address of the
  • thisAn object that has properties in commonIs calledThe prototype
  • That is, the hidden property stores the address of the stereotype
 let obj = { }
 obj.toString() // Why?
 // this is because obj's hidden property corresponds to an object with a toString() attribute
Copy the code

Add, delete, modify and check the object

Delete the properties

How can I delete properties on an object?

  • Delete obj. XXX or delete obj[‘ XXX ‘]

If obj. XXX = undefined, does that count?

  • You can do it this way, but it will still exist on the obj object, just change the value to undefined.

Question: Do I delete this property name?

  • 'xxx' in obj If false, prove that the property name does not exist on the object.

Note that there is no way to check if you set the property name to undefined

You can check if there is an attribute name with undefined by saying ‘XXX’ in obj && obj. XXX == undefined

Obj. XXX === undefined: ‘XXX’ is not an attribute of obj.

View properties (read properties)

View attributes are divided into two types, one is the own attributes, the other is the own + shared attributes

  • View all of its properties:Object.keys(obj)
  • View itself + common properties:console.dir(obj)

Objects have two types of properties, so how do I know if this property is my own or common?

  • useobj.hasOwnProperty('xxx') If true, prove that ‘XXX’ is an attribute of itself

View the property value by property name

  • obj[‘key’]
  • obj.key
  • obj[key]Notice what’s going on herekeyVariable!!

Obj [‘key’] and obj[key] Here’s an example:

So make a distinction between strings and variables

The problem

If that makes sense, look at the following code

let list = ['name'.'age'.'gender']
let person = {
  name: 'frank'.age: 18.gender: 'man'
}
for (let i = 0; i < list.length; i++) {
  let name = list[i]
  console.log(????)
}
Copy the code

Ask: How do I print all the properties of person itself?

Answer: the console. The log (person [name])

Modifying or adding attributes (write attributes)

  • Direct assignment
let obj = {name: 'frank'} // Name is a string
obj.name = 'frank' // Name is a string
obj['name'] = 'frank' 
obj[name] = 'frank' // Error, because the value of name is uncertain
obj['na'+'me'] = 'frank'
let key = 'name'; obj[key] = 'frank'
let key = 'name'; obj.key = 'frank' / / wrongBecause obj.key is equivalent to obj['key']
Copy the code
  • Batch assignment
Object.assign(obj, {age: 18.gender: 'man'})
Copy the code

Modifying or adding common properties (properties on prototype objects)

In this way, you cannot modify or add common attributes by yourself

Do you have to change the properties on the prototype object? It’s not impossible

or

In general, try not to change the prototype, it will cause a lot of problems!

Prototype chain

To sum up, what the prototype objects contain are their common properties.

What if I want obj and OBJ2 to have another prototype?

Using object.create (), this is used to create the prototype assigned to the obj Object

And this is where the prototype chain is generated.