[Web front-end basics | JS basics] Object

Object

One: Related concepts of objects

1: What is an object?

In JavaScript, an object is a set of unordered collections of related properties and methods. All things are objects, such as strings, numbers, arrays, and functions.

Objects are composed of properties and methods.

Attributes: the characteristics of things, represented by attributes in objects (common nouns)
Method: the behavior of things, represented by methods in objects (common verbs)

2: Why do you need objects:

When saving a value, you can use a variable, and when saving multiple values (a set of values), you can use an array.

Data can only be accessed through index values. Developers need to clear the rankings of all data to accurately obtain data. When the amount of data is huge, it is impossible to memorize the index values of all data.

In order to better store a set of data, the object came into being: an attribute name is set for each item of data in the object, the data can be accessed more semantically, the data structure is clear, the meaning is obvious, and it is convenient for developers to use.

The object expression structure in JS is clearer and more powerful.

Two: Three ways to create objects

1: Use literals to create objects

curly braces: { }

It contains the attributes and methods of expressing this specific thing (object);
The "key" in the "key-value pair" that stores specific data in an object is called the object's attribute, that is, the item that stores specific data in the object
{} Is represented in the form of key-value pairs
The "key" in the "key-value pair" that stores the function in the object is called the method of the object, that is, the item that stores the function in the object
Key: equivalent to the attribute name
Value: equivalent to the attribute value, can be any type of value (number type, string type, boolean type, function type, etc.)
, Separated
Behavior, method: an anonymous function

code show as below:

var obj = {
    
    
    uname: "zhao",
    age: 18,
    sex: "女",
    tel: 1234567890,
    // zhao这个好人的行为
    speak: function () {
    
    
        console.log("好好学习，天天向上");
    }
}
//打印obj里面的uname
console.log(obj.uname);
//打印行为
obj.speak();
}

Use of objects
- Access object properties
  - The property call in the object: object. Property name, this small point. It is understood as "of"
  - Another way to call properties in objects: object ['property name'], note that the properties in square brackets must be quoted
    
    The sample code is as follows:
```
console.log(obj.uname)     // 调用名字属性
console.log(obj['uname'])  // 调用名字属性
```
- Call object method
  - Method call in the object: object. method name (), pay attention to the parentheses after the method name
```
obj.speak();             // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
```
- Summary of variables, attributes, functions and methods
  
  Properties are part of the object, and variables are not part of the object. Variables are containers for storing data separately
  - Variable: separate declaration and assignment, exist alone
  - Attributes: The variables in the object are called attributes and do not need to be declared. They are used to describe the characteristics of the object
  - The method is part of the object, the function is not part of the object, and the function is a container that encapsulates operations individually
  - Function: exist alone, can be called by the "function name ()"
  - Method: The function in the object is called the method. The method does not need to be declared. It can be called by using "object.method name()". The method is used to describe the behavior and function of the object.

2: Use new Object to create an object

Create empty object
```
var andy = new Obect();
```
note:
- Object(): Capitalize the first letter
- new Object(): requires the new keyword
- Format used: object.attribute=value;

3: Use the constructor to create objects (the first two can only create one at a time)

Constructor
- Constructor: It is a special function that is mainly used to initialize an object, that is, to assign initial values to object member variables. It is always used with the new operator. We can extract some public attributes and methods from the object, and then encapsulate them into this function.
- Encapsulation format of the constructor:
```
function 构造函数名(形参1,形参2,形参3) {
        
        
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}
```
- The calling format of the constructor
```
var obj = new 构造函数名(实参1，实参2，实参3)
```
  In the above code, obj receives the object created by the constructor.
- Precautions
  1. The constructor convention is to capitalize the first letter .
  2. You need to add this before the properties and methods in the function to indicate the properties and methods of the current object.
  3. There is no need to return in the constructor to return the result .
  4. When we create an object, we must use new to call the constructor .
- other
  
  1: The constructor, such as Stars(), abstracts the public part of the object and encapsulates it in a function, which generally refers to a certain class (class)
  
  2: Create an object, such as new Stars(), which specifically refers to a certain one. The process of creating an object through the new keyword is also called object instantiation
The role of the new keyword
1. Before the constructor code starts to execute, create an empty object;
2. Modify the point of this to point this to the created empty object;
3. Code that executes the function
4. After the function is completed, return this—the object created

4: Traverse objects

The for...in statement is used to loop through the attributes of an array or object.

The syntax is as follows:

for (变量 in 对象名字) {
    
    
    // 在此执行代码
}

The variable in the grammar is customized, it needs to conform to the naming convention, usually we will write this variable as k or key.

for (var k in obj) {
    
    
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}