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 a
Key: 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’shidden
attribute
Hidden properties?
- In fact, every JS object has a hidden property
- And this hidden property is stored
An object that has properties in common
The address of the - this
An object that has properties in common
Is 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?
- use
obj.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 here
key
Variable!!
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.