Want to make APP Same thing as WeChat , Can run small programs smoothly ？ | Experience will send you to Xinjiang 、 Huawei 、 Cherry keyboard ！>>>

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 and setter 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 ：

Accessor properties The characteristics of ：

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

6.1.7 The Object Type

data type - object

Standard library - Property description object

JavaScript Standard built in objects -Object

Class Basic syntax