This blog mainly talks about object-oriented issues, mainly including: the basic concept of object-oriented , the way of creating objects , and the problems that need to be paid attention to in constructors .
Table of contents
First, the basic concept of object-oriented
2. Three major characteristics of object-oriented
3. The benefits of object-oriented development
Two, four ways to create objects
2. Call the built-in constructor of the system
3. The way of factory function
4. Create a custom constructor
3. Problems that need to be paid attention to in custom constructors
1. The first letter of the function name should be capitalized
2. The constructor does not need to write return
3. Can constructors be used as ordinary functions?
4. This in the function points to the problem
First, the basic concept of object-oriented
1. What is object-oriented?
Before you get in touch with object-oriented, you need to understand one thing: object-oriented is not a grammar, but a thought, a programming model!
We have two programming modes:
- Process-oriented development : The focus is on the development process, focusing on each step, the creation of each variable, the relationship between variables, the execution sequence, etc., and most of the cases are specially written for a specific function.
- Object-oriented development : the focus is on the object, we need an object to help us do things, but we don't pay attention to the implementation process in the object , we only need its execution result.
· Process-oriented development:
var a=0;
a++;
a++;
alert(a)· Object-oriented development:
var num=Math.random()
console.log(num)·Through the above two examples, it is not difficult to see the difference between process-oriented and object-oriented development methods, and it can also be seen that the functions in JS: Math, etc., are all called by programmers in an object-oriented form to obtain results.
So why can programmers directly run the method and get the result through the method of object name. method name () ? This involves one of the three major characteristics of object-oriented: encapsulation.
2. Three major characteristics of object-oriented
Object-oriented has three characteristics: encapsulation, inheritance, and polymorphism .
- Encapsulation: Simply put, it is to write a certain piece of repetitive code in a custom function , and call the function directly when this code is needed.
- Inheritance: On the basis of encapsulating a function, create a new function that can use all the properties and methods of the original function , and can also have its own properties and methods.
- Polymorphism: Different results can be returned according to the number and type of parameters passed in.
3. The benefits of object-oriented development
- Not suitable for beginners, but high-end!
- Write each function separately to facilitate future maintenance;
- Reduce duplication of code;
Two, four ways to create objects
1. Literal creation method
That is to declare a variable directly through var, and then a curly brace.
var obj={
"属性名":属性值,
...
"方法名":function(形参列表){
函数体
}
}How to access the properties and methods in the object?
- ObjectName.PropertyName===ObjectName["PropertyName"]
- ObjectName.MethodName() === ObjectName["MethodName"]()
Notice:
1. When accessing non-existing properties and methods , the returned result is undefined;
2. You can add non-existent properties and methods anytime and anywhere;
3. If you want to get all the things in the object, you need to traverse: use for...in loop ;
2. Call the built-in constructor of the system
JS provides an object constructor.
var obj=new Object()
obj.属性名="属性值"3. The way of factory function
That is a custom function.
function createObj(name,age,arr){
var obj={}
obj.name=name,
obj.age=age,
obj.material=arr
return obj
}
createObj("xxx",11,[1,2,3,4]) The way of using the factory function supports code reuse, and you don’t need to care about how the function is executed and returned, you only need to pass parameters to get the result.
4. Create a custom constructor
That is to say, on the basis of method 3, using the new keyword, the inside of the function is also slightly changed.
function createObj(name,age){
this.name=name
this.age=age
}
var obj=new createObj("xxx",18)
console.log(obj)When the new keyword is used, it becomes a constructor, which automatically creates an object inside the function and returns it automatically . Use the variable receive at the call.
Use this in the function to add properties and methods to the instantiated object of the constructor .
Both methods 3 and 4 can form an object-oriented development model, but the factory function method is still not as simple as the constructor method.
3. Problems that need to be paid attention to in custom constructors
1. The first letter of the function name should be capitalized
This is not a hard requirement, but it is more in line with the specification.
function CreateObj(){}2. The constructor does not need to write return
Because return is automatically generated when using the constructor .
If return is written:
- If the return is a basic data type, it may not be useful to the person who calls the function;
- If a complex data type is returned, the original content of the function will be overwritten, and the returned result will not be what we want;
3. Can constructors be used as ordinary functions?
It can be used as an ordinary function, but the final result may not be what we need.
- First of all, the function has no return , that is to say, there is no return value. If the external variable is used to receive it, the result is undefined .
- Secondly, in the constructor defined in the global scope , the this inside the function points to the global object of window , that is to say, this.property name=xxx in the constructor adds a property to the window object and assigns the value to xxx, so if you want to get this property, you have to: window.property name .
4. This in the function points to the problem
- When the constructor is only defined and the new stage is not executed , this inside the function does not point to anywhere;
- Use the new keyword, also known as instantiation . In the new phase, the instance object has already been generated , and a variable is not necessarily required to receive it (problem of stack storage and heap storage), so this points to the instantiated object generated in the new phase .
function CreateObj(name){
this.name=name
}
new CreateObj("xxx") //new过程===实例化过程
//此时对象已经生成了