ECMA defines an object as an unordered collection of attributes. Each property or method of an object is identified by a name that maps to a value. Think of an ECMAScript object as a hash table, and the value can be data or functions.

Understanding object

The usual way to create a custom Object is to create a new instance of Object and add properties and methods to it. Or create it as an object literal.

let person = new Object(a); person.name ='Nick';
person.age = 20;
person.sayName = function() {
	console.log(this.name);
}

let person = {
    name: 'Nick',
    age = 20.sayName() {
    	console.log(this.name); }};Copy the code

1. Type of attribute

It is divided into data attributes and accessor attributes.

2. Define multiple properties for an object

3. Read properties

This section is about the internal manipulation of some objects, which is not very convenient for me to grasp, so I’ll skip it.

4. Merge objects

ECMA6 provides the object.assign () method specifically for merge objects. This method takes a target object and one or more source objects as arguments, and copies the latter to the former.

dest = {};
src = { id: 'src'};

result = Object.assign(dest,src);
Copy the code

5. Object identification and equality determination

Object.is()

6. Enhance object syntax

1. Shorthand for attribute values

If the attribute name is the same as the variable name, you can use 👇

let name = 'Bob';

let person = {
	name
};

console.log(person); //{ name: 'Matt'}
Copy the code

Create an object

While it is easy to create objects using Object constructors or Object literals, these methods have a significant disadvantage: creating multiple objects with the same interface requires a lot of repetitive code.

1. An overview of the

ECMAScript6 officially supports classes and inheritance. The ES6 classes are designed to fully cover the prototype-based inheritance pattern designed by the previous specification. However, for all convenience, ES6 classes are just syntactic sugar that encapsulates ES5.1 constructors plus stereotype inheritance.

2. Factory mode

The factory pattern is a well-known design pattern widely used in software engineering to abstract the process of creating specific objects. The following example shows one way to create an object with a specific interface 👇

function createPerson( name, age, job ){
    let o = new Object(a); o.name = name; o.age = age; o.job = job; o.sayName =function(){
    	console.log(this.name);
    }
    return o;
}
let person1 = createPerson("Nick".29."Doctor");
Copy the code

3. Constructor pattern

Constructors in ECMAScript are used to create objects of a specific type. Chestnuts in front can be found at 👇

function Person( name, age, job ){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
    	console.log(this.name); }}let person1 = new Person("Nick".29."Doctor");
Copy the code

In this case, the Person() constructor replaces the createPerson() factory function. In fact, the internal is similar, but there are the following differences 👇

⚪ does not explicitly create objects

The ⚪ property and method are assigned directly to this

⚪ didn’t return

Also, note that the function name Person is capitalized. By convention, constructor names begin with a capital letter, and non-constructors begin with a lowercase letter.

4. Prototyping

All JavaScript objects inherit properties and methods from a Prototype object. Values that are assigned directly to object instances in constructors can be assigned directly to their prototypes 👇

function Person(){}

Person.prototype.name = 'Nick';
Person.prototype.age = 29;
Person.prototype.sayName(){
	console.log(this.name);
};
Copy the code

Here, all the properties and methods are added directly to the Person prototype property, and unlike the constructor pattern, the properties and methods defined using this prototype pattern are shared by all instances.

1. Understand the prototype

Whenever a function is created, a prototype is created for that function according to certain rules. There is a direct connection between the instance and the constructor stereotype, but not between the instance and the constructor.

Take the Person constructor above

Where Person is the constructor, Person.prototype is the prototype object, and person1 is the instance. The relationship between them is as follows

The hidden feature [[prototype]] is accessed via _proto_.

Person. The prototype to the prototype object, and the Person. The prototype. The constructor that points back to the Person function. The Person instance person1 has only one internal attribute that refers back to Person.prototype.

Object.getPrototypeOf()This method returns the prototype object of the passed object. This is especially important when implementing inheritance.

Object.setprototypeof () : Can write a new value to a private property. ❗ can seriously affect code performance.

Object.create() : This method is used to create a new Object and specify a prototype for it.

2. Prototype level

When a property is accessed through an object, the search begins at the instance itself, and if a given name is found on the instance, the corresponding value is returned. If the property is not found, the search continues along the pointer into the prototype object, and returns the corresponding value when it finds the corresponding value on the prototype object.

To take one

Whenever you add a property to an object instance, the property will beshelterProperty of the same name on the stereotype object. You can usedeleteMethod to completely remove properties on the instance 👇

HasOwnProperty () : Can be used to confirm whether a property is on an instance or a prototype object.

3. Stereotypes and in operators

There are two ways to use the IN operator: alone and in a for-in loop.

When used alone, the IN operator returns true if the specified property is accessible through the object, whether on an instance or prototype.

When you use the IN operator in a for-in loop, all properties that can be accessed through an object and can be enumerated are returned, including instance and stereotype properties.

Through the Object. The keys (), Object. GetOwnPropertyNames () and the Object. GetOwnPropertySymbols () to use.

5. Object iteration

ECMAScript 2017 adds two static methods for converting object content into a serialized format 👇

Object.values() : Receives an Object and returns an array of their contents. The value of the Object is an array.

Object.entries() : Takes an Object and returns an array of their contents, returning an array of key/value pairs.

Other prototype issues will be added as they arise.

Advanced Programming in JavaScript (4th edition)

Title styles from: juejin.cn/post/684490…

Where write wrong contact me 🐧 : 54269504