What is an object
To put it simply , An object is a set of properties (property) Set . Each attribute contains two parts :
- Property name (key)—— It can be a string or a symbol (symbol) Type values .
- features (attributes)—— Used to describe the state of an attribute .
Classification of attributes
Object properties can be divided into two categories :
- Data attribute (data property)—— Property values are directly accessible .
- Accessor properties (accessor property)—— Attribute values are passed through Accessor functions (accessor function) Visiting , contain
getter
andsetter
Method .getter
Method is used to get the property value ,setter
Method is used to set the property value . let me put it another way , Accessor properties Do not save attribute values separately , Attribute values are passed through Accessor functions To get and set .
An attribute is either Accessor properties ( have getter/setter
Method ), Or Data attribute ( have value
), But not both .
Example :
let user = {
// name and surname It's data properties
name: "John",
surname: "Smith",
// fullname Is the accessor property , Definition getter and setter Methods don't need to use function keyword
get fullName() {
return `${this.name} ${this.surname}`;
},
set fullName(value) {
[this.name, this.surname] = value.split(" ");
}
};
user.name; // John
user.fullName; // John Smith
Attribute characteristics
Data attribute The characteristics of :
Attribute Name | Value Domain | Description |
---|---|---|
[[Value]] | Property value . | |
[[Writable]] | Boolean | if true , You can modify the attribute value , Otherwise, the property value cannot be modified . |
[[Enumerable]] | Boolean | if true , You can use for-in Enumerate the property values , Otherwise, the attribute value cannot be enumerated . |
[[Configurable]] | Boolean | if true , The attribute can be deleted , Can be modified to Accessor properties , Or you can modify some of the attributes ( Do not modify [[Value]], Can't be [[Writable]] It is amended as follows false ) |
Accessor properties The characteristics of :
Attribute Name | Value Domain | Description |
---|---|---|
[[Get]] | Object or Undefined | If the property value is an object , Must be a function object . This function is used to get the attribute value . |
[[Set]] | Object or Undefined | If the property value is an object , Must be a function object . This function is used to modify the attribute value . |
[[Enumerable]] | Boolean | if true , You can use for-in Enumerate the property values , Otherwise, the attribute value cannot be enumerated . |
[[Configurable]] | Boolean | if true , The attribute can be deleted , Can be modified to Data attribute , Or you can modify the characteristics of the attribute . |
Used to describe the characteristics of an attribute (attribute) Is stored in Property description object (attributes object) Medium , These features are also known as property descriptor .
adopt Object.getOwnPropertyDescriptor()
Method to get the object property Property description object .
var obj = { p: 'a' };
Object.getOwnPropertyDescriptor(obj, 'p');
// { value: "a",
// writable: true,
// enumerable: true,
// configurable: true
// __proto__: Object
// }
Object creation
There are three ways to create objects :
- Use initializer —— Object literal .
- Using constructors —— Use
new
Keyword causes the constructor to return an object instance . - Use
Object.create()
Method —— Prototype an existing object , Return a new object .
The initializer
An object initializer , By braces ({}
) And it contains zero or more key value pairs .
Example 1 : ES6 Previous grammar
var o = {}; // This is an empty object
var o = {a: 'foo', b: 42, c: {}};
** Example 2 :**ES6 New syntax
// Attributes can be used as variables
var a = 'foo', b = 42, c = {};
var o = {a, b, c};
// If the property value is a function , Omission function keyword
const o = {
method() {
return "Hello!";
}
};
// Equate to
const o = {
method: function() {
return "Hello!";
}
};
// Attribute names can use variables and expressions
var prop = 'foo';
var o = {
[prop]: 'hey',
['b' + 'ar']: 'there'
};
Constructors
In the early ,JavaScript Language uses constructors (constructor) As a template for creating objects . The difference between a constructor and a normal function is : The function body uses this
Keyword represents the object instance to be generated , You must use new
keyword .
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
This writing is similar to the traditional object-oriented language ( for example C++ and Java) Difference is very big , Let's learn Java People who like language are confused and puzzled . later ,ES6 Provides a more traditional approach , Introduced Class( class ) The concept , Template as object . adopt class
keyword , Classes can be defined .ES6 Of class
Can be seen as just a grammar sugar , Most of its functions ,ES5 Can do it .
class Point {
// Constructors
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Object.create()
Method
Take existing objects as prototypes , Generate new instance objects . The newly generated object inherits the properties of the prototype object .
// Prototype object
var A = {
print: function () {
console.log('hello');
}
};
// Instance object
var B = Object.create(A);
Object.getPrototypeOf(B) === A // true
B.print() // hello
B.print === A.print // true
Object.create()
Method generated object , Will inherit the constructor of its prototype object .
function A() {}
var a = new A();
var b = Object.create(a);
b.constructor === A // true
b instanceof A // true
Operation of attribute
View of properties
Use Object.keys
Method to view all the properties of an object itself .
var obj = {
key1: 1,
key2: 2
};
Object.keys(obj);
// ['key1', 'key2']
Reading of attributes
Reads the properties of the object , There are two ways , One is to use the point operator , Another way is to use the square bracket operator .
var obj = {
p: 'Hello World'
};
obj.p // "Hello World"
obj['p'] // "Hello World"
Variables and expressions can be used in bracket operators .
var foo = 'bar';
var obj = {
foo: 1,
bar: 2
};
obj.foo // 1
obj[foo] // 2
Add and modify properties
It's the same as reading properties , You can use the dot operator or the bracket operator , To add or modify properties . If the specified attribute exists , Modify the value of the property ; If it does not exist , Then add the attribute .
var obj = {};
// JavaScript Allow properties of “ Post binding ”, in other words , You can add properties at any time , There's no need to define objects , Just define the attributes .
obj.foo = 'Hello';
obj['bar'] = 'World';
This method can only set the value of the property , The other features of the property are default values .
To set the object properties more finely , You can use Object.defineProperty()
Method to add or modify properties . It is used as follows :
Object.defineProperty(object, propertyName, attributesObject)
Object.defineProperty
Method accepts three parameters :
- object: The object of the property
- propertyName: character string , Represents the property name
- attributesObject: Property description object
If the attribute does not exist , Then add the attribute ; If the attribute exists , Update the property . The return value of this method is the modified object .
var obj = Object.defineProperty({}, 'p', {
value: 123,
writable: false, // Set the property to non modifiable
enumerable: true,
configurable: false
});
obj.p // 123
obj.p = 246;
obj.p // 123
Deletion of attribute
delete
The command deletes properties of an object , Returns after successful deletion true
.
var obj = { p: 1 };
Object.keys(obj) // ["p"]
delete obj.p // true
obj.p // undefined
Object.keys(obj) // []
Related information
Standard library - Property description object