1. What is an object?

Objects are an unordered collection of related attributes and methods, that is, a collection of stored data.

Objects are made up of attributes and methods.

2. Three ways of defining objects

2.1 Literal Quantity Definition Object

• The data units inside the object are stored as key names: key values or attributes: the syntax of attribute values
• Separate multiple data units by commas

//Name is the key name/attribute of the obj object,'Wang Zhao has no Jun'is the value and attribute value
//fn is a method, followed by a colon by an anonymous function
var obj = {name:'Wang Zhao has no king.',sex:'male',age:'**',
           fn:function(){
               console.log('Trying to Blog');
           }

};

Method to invoke the properties of an object:

(1) Object. attribute

Numeric key names are not supported and parsing variables are not supported

(2) Object ['Property']

Supports numeric key names and parsing variables

Method to invoke object

Object. Method name ()

var obj = {name:'Wang Zhao has no king.',sex:'male',age:'**',
           fn:function(){
               console.log('Trying to Blog');
           }

};

console.log(obj);
console.log(obj.name);
console.log(obj['name']);

obj.fn();

Execution results:

Variables, attributes, functions, methods:

Same thing: variables, attributes, they are all used to store data

Differences:

Variables: Writing a list of variables directly when declared and assigned separately is unique

Attribute: Must be an object when there is no declarative use inside the object. Property or Object ['Property']

The difference: Functions, methods, all implement a function

Function: Individually declare that the called function name () exists separately

Method: is the method of calling within an object: object. Method ();

Describe the behavior and function of objects

2.2 new Object Definition Object

• Add properties and methods of objects using = assignment
• End each property, method with a semicolon

var obj = new Object();

obj.name = 'Wang Zhao has no king.';
obj.sex = 'male';
obj.age = '**';
obj.fn = function() {
    console.log('Trying to Blog');
} 

console.log(obj.name);
console.log(obj['sex']);
obj.fn();

console.log(obj);

Execution results:

2.3 Constructor Definition Object

Syntax format of constructors

function constructor name () {

this. Attribute = attribute value;

this. Method= function() {}

}

Be careful:

The first two methods of defining an object can only define one object at a time. If many of the attributes and methods inside the object are mostly the same as another object, we can only copy and paste them into another object. This is OK, but it looks a little rough. What can we do? Then we can use the method of function to repeat these same codes. This function is called constructor. This function encapsulates not ordinary code, but encapsulated object. In fact, it is to abstract some of the same properties and methods inside the object and encapsulate them inside the function.

The process of creating objects with the new keyword is object instantiation.

function Person(name,num,sex) { //The first letter of the constructor name needs to be capitalized

   this.name = name;
   this.age = num;
   this.sex = sex;

   this.fn = function (grade) {
      console.log(grade);
   }
}

//Calling a constructor returns results without requiring a return
//Calling a constructor must use new
//Calling a function with new Person() defines an object
var protagonist = new Person('Emperor Ye Tiandi', 24, 'male');
    
console.log(protagonist.name);
console.log(protagonist.age);
console.log(protagonist.sex);
protagonist.fn('Red dust Fairy');

var fristProtagonist = new Person('Emperor Waste', 30, 'male');

console.log(fristProtagonist.name);
console.log(fristProtagonist.age);
console.log(fristProtagonist.sex);
protagonist.fn('Red dust Fairy');

Execution results:

Differences between constructors and objects:

Constructor: A generic class

Object: A specific object.

3. Basic Operations of Objects

Define an object:

var obj = {name:'Wang Zhao has no king.',sex:'male',age:'**',
           fn:function(){
               console.log('Trying to Blog');
           }

};

Execution results:

Then do the following:

Modify Object)

Object is already present

//modify
obj.name = 'Wang Zhaojun';
obj.sex = 'female';

Execution results:

New Objects

Object does not exist

//Newly added
obj.addr = 'Beijing';
console.log(obj);

Execution results:

delete object

Format 1:

Delete (object. property)

Delete (object ['attribute'])

Format 2:

delete object. attribute

delete object ['attribute']

Object is already present

//delete
delete(obj.sex);
delete(obj['age']);

Execution results:

4. Loop through objects

Objects can only be used for...in loop traversal

Note: for...in-loop is detailed in another article I wrote about JavaScript arrays

var obj = {name:'Wang Zhao has no king.',sex:'male',age:'**'};

//Loop through objects
for (var index in obj) {

    //index stores the key name of an obj object
    console.log(index);

    //Object. Property cannot resolve variable
    //You must use an object ['attribute'] here to parse variables
    console.log(obj[index]);
}

Execution results: