For example, if you describe a cell phone object in JavaScript, the cell phone has the following properties and methods:

• Phone attributes: color, weight, screen size.
• Cell phone methods: call, send text messages, watch videos, listen to music. In code, an attribute can be thought of as a variable held in an object, using object. Attribute name “represents; A method can be thought of as a function stored in an object, using object. Method name () “to access.

// Suppose we now have a cell phone object p1, created in code
var p1 = {
color: 'black'.weight: '188g'.screenSize: '6.5'.call: function (num) {
console.log('Call up'+num);
},

sendMessage: function (num, message) {
console.log ('to'+ num + 'Send a text message saying :' + message);
},

playVideo: function() {
console.log ('Play video');
},

playMusic: functlon() {
console.log ('Play music'); }};// access the attributes of p1
console.log (pl.color);     // Output result :" black ", indicating that the color of the mobile phone is black
console.log (p1.weight);    // Output: "188g", which means the weight of the phone is 188g
console.log (p1.screenSize);// Output :"6.5", indicating that the screen size of the phone is 6.5 inches

// call p1's method
p1.call('123');           // Call the phone number 123
p1.sendMessage('123'.'hello'); // Text the phone number 123 with the message hello
p1.playVideo();    // Call the phone's playback video method
p1.playMusic();    // Call the phone's play music method
Copy the code

As you can see from the above code, object properties and variables are used similarly, and object methods and functions are used similarly. Objects are a collection of properties and methods, represented by a simple variable name p1.

Once the object is created, you can access its properties and methods. Example code is as follows:

// Access the attributes of the object (syntax 1)
console.log (stul.name);   // Output result: Xiao Ming
// Access the attributes of the object (syntax 2)
console.log (stul['age']); // Output :18

// Call a method on an object (syntax 1)
stul.sayHello();        // Output: Hello
// Call a method on an object (syntax 2)
stul['sayHello'] ();// Output: Hello
Copy the code

If the member name of an object contains special characters, it can be represented as a string, as shown in the following code:

var obj = {
'name-age': 'xiao Ming - 18'
};
console.log (obj['name-age']);  
// Output result :" xiaoming-18"
Copy the code

JavaScript objects are dynamic. If an object has no members, users can manually assign attributes or methods to add members, as shown in the following example:

varStu2 = {};// Create an empty object
stu2.name = 'Jack';  // Add the name attribute to the object
stu2.introduce = function() {     // Add the introduce method to the object
alert ('My name is ' + this.name);// Use this in the method to represent the current object
};

alert (stu2.name);// Access the name attribute, output: Jack
stu2.introduce();// Call the rule introduce(), output :My name is Jack
Copy the code

In the code above, the object itself can be represented as this in its methods, so the name attribute of the object can be accessed using this.name.

Undefined is returned when accessing properties that do not exist in the object. Example code is as follows:

var stu3 = {};      // Create an empty object
console.log(stu3.name); // Output result: undefined
Copy the code

The literals we learned earlier are only suitable for creating one object, but when creating multiple objects, we need to write each member of the object, which is cumbersome. Therefore, we can use constructors to create objects. The syntax for using constructors to create objects is “new constructor name ()”, in which arguments can be passed to the constructor in parentheses, or the parentheses can be omitted if there are no arguments.

In effect, “new Object()” is a way to create an Object using the constructor, Object being the name of the constructor, but this creates an empty Object.

The basic syntax is as follows:

// Write the constructor
functionConstructor name () {
this.attribute = attribute;thisDirection:.function() {
/ / the method body
};
}

// Use the constructor to create an object
var obj = newConstructor name ();Copy the code

In the above syntax, this in the constructor represents the newly created object, and this can be used to add members to the newly created object in the constructor. Note that constructor names are recommended to start with a capital letter.

Case study:

// Write a Student constructor
function Student (name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log ('Hello, my name is.' + this.name);
};
}

// Create an object using the Student constructor
var stul = new Student('Ming'.18);
console.log(stul.name);         // Output result: Xiao Ming
console.log(stu1.sayHello());   // Output result: Hello, my name is Xiao Ming
var stu2 = new Student('little red'.17);
console.log(stu2.name);         // Output result: small red
console.log(stu2.sayHello());   // Output result: Hello, my name is Xiao Hong
Copy the code

Constructors in JavaScript are similar to classes in traditional object-oriented languages such as Java, so some of the terms of object-oriented programming can be used in JavaScript as well.

• Abstract: The process of extracting the common features of a class of objects and writing them into a constructor (class) is called abstraction.
• Instantiation: The process of creating an object using a constructor (class), called instantiation.
• Instance: If the STU1 object is created by the Student constructor, the stu1 object is called an instance (or instance object) of the Student constructor.

Tip: In some documentation, it is common to refer to methods on objects as functions, or to constructors as constructors or constructors, just to understand that these names refer to the same thing.

Learn more: Static members

There is a concept of static in object-oriented programming, and JavaScript is no exception. Static members in JavaScript are properties and methods that are inherent in constructors and can be used without creating instance objects.

Static member creation and use are shown in the following code:

function Student(){
}

Student.school = 'x university';       // Add the static property school
Student.sayHello = function() { // Add static method sayHello
console.log('Hello');
};

console.log(Student.school);    // Output result :x university
Student.sayHello();             // Output :Hello
Copy the code