js constructor

1. What is a constructor?

The function that instantiates an object through the new function name is called a constructor. Any function can exist as a constructor. The reason why there are constructors and ordinary functions is mainly different in function. The main function of constructors is to initialize objects, which is characterized by using them together with new. New is to create an object from scratch. The constructor is to add properties and methods to the initialized object. Constructors are defined with uppercase first letters. When there is a return object in the constructor, the final new object will be the return value of the constructor, not the object generated in the new process. It is valid only when the return value of the constructor is an object. When it is not an object, it still returns the object formed in the new process
2. What are the ways to create objects? Examples

1. Create Object with new operator + Object

1 <script>
2          var person = new Object() ;
3          person.name = 'zs' ;
4          person.age = 12 ;
5          person.sayHi = function(){
6              return 'full name'+this.name+'Age'+this.age ;
7          }
8          console.log(person.sayHi()) ;
9 </script>

2. Literal creation object

 1 <script>
 2          var person = {
 3              name:'zs',
 4              age:12,
 5              sayHi:function(){
 6                  return this.name + this.age ;
 7              }
 8          }
 9          console.log(person.sayHi()) ;
10 </script>

3. Creation of factory mode

 1   <script>
 2          function createPerson(name , age) {
 3              var o = new Object() ;
 4              o.name = name ;
 5              o.age = age ;
 6              o.sayHi = function(){
 7                  return this.name + this.age ;
 8              }
 9              return o ;
10          }
11          var per = createPerson('zs' , 12) ;
12          console.log(per.sayHi()) ;
13 </script>

4. Constructor mode

 1 <script>
 2          function Person (name , age ) {
 3              this.name = name ;
 4              this.age = age ;
 5              this.sayHi = function(){
 6                  return this.name + this.age ;
 7              }
 8          }
 9          var per = new Person('zs',12) ;
10          var per1 = new Person('lisi',36) ;
11          console.log(per.sayHi()) ;
12          console.log(per1.sayHi()) ;
13 </script>

5. Prototype mode

 1 <script>
 2          function Person(hobbies) {
 3              this.hobbies = hobbies ;
 4          }
 5          Person.prototype.name = 'zs' ;
 6          Person.prototype.age = 18 ;
 7          Person.prototype.sayHi = function(){
 8              return this.age + this.name ;
 9          }
10          console.log(Person.prototype) ;
11          var per = new Person() ;
12          per.hobbies = 'Basketball' ;
13          console.log(per.hobbies) ;
14          console.log(per.name) ;
15 </script>

3. How to implement inheritance in js

1. Implement inheritance in call mode

 1 <script>
 2         // Solution: when inheriting, you don't need to change the direction of the prototype. You can directly call the parent and constructor to assign values to the attributes
 3         // Borrow constructor: call()   Constructor.call(Current object, attribute 1, attribute 2,...) 
 4         // Property inheritance is solved, and methods cannot inherit
 5 
 6         function Person(name,age,sex,weight){
 7             this.name = name ;
 8             this.age = age ;
 9             this.sex = sex ;
10             this.weight = weight ;
11         }
12 
13         Person.prototype.sayHi = function(){
14             console.log("Hello")
15         }
16 
17         // Student constructor
18         function Student(name,age,sex,weight,score){
19             // Borrowing constructor to implement inheritance
20             // call change this Current point Person,Not pointing Student,Who calls this To whom
21             Person.call(this,name,age,sex,weight)
22             this.score = score ;
23         }
24         Student.prototype.test = function(){
25             console.log("examination")
26         }
27         // instantiation 
28         var stu = new Student("zs",12,'nan',40,100)
29         console.log(stu.name,stu.age,stu.sex,stu.weight,stu.score)
30         stu.test() ;
31         // stu.sayHi() ;//report errors
32     </script>

2. Realize inheritance by combining inheritance

 1 <script>
 2         // Inheritance through prototype --- Attribute problem
 3         // By constructor---- Methodological issues
 4         // Composite inheritance: inheritance in prototypes + Borrowing inheritance in constructor
 5 
 6         function Person(name ,age ,sex){
 7             this.name = name ;
 8             this.age = age ;
 9             this.sex = sex ;
10         }
11         Person.prototype.sayHi  = function(){
12             console.log("Hello")
13         }
14 
15         // Constructor implements the student's class
16         function Student(name,age,sex,score){
17             // Using constructor to solve the problem of duplicate attribute values
18             Person.call(this,name,age,sex)
19             this.score = score ;
20         }
21         // Inherit the method by changing the prototype point
22         Student.prototype = new Person() // No value transfer---Property has been resolved by constructor
23         Student.prototype.study = function(){
24             console.log("study")
25         }
26 
27         // Create instance object
28         var stu = new Student("zs",12,'man',100)
29         console.dir(stu)
30         stu.sayHi()
31         console.log(stu.name)
32         // Both properties and methods are inherited
33     </script>

4. What is a closure? What does it do?

1. Closures are functions that can read internal variables of other functions. For example, in javascript, only sub functions inside a function can read local variables, so closures can be understood as "functions defined inside a function". In essence, closures are a bridge between the inside and outside of a function.

2. The function of closure is to make the Javascript garbage collection mechanism not recover the resources occupied by a after a executes and returns, because the execution of internal function b of a depends on the variables in a.
5. What is pre parsing?

1. Pre parsing: under the current scope, before js runs, the pre declaration with VaR and function keywords will be arranged in memory, and then js statements will be executed from top to bottom. Pre parsing will only occur on variables and functions defined through var.

2. As long as it is defined through var, whether it is a variable or a function, it is assigned undefined first. If it is a variable, whether it is assigned or not, it will be assigned undefined in the pre parsing stage.

3. When the function is pre interpreted, it decomposes it into two parts. The first part is fn function and the second part is (), an anonymous function that will report an error during execution. If there are parameters in parentheses, although no error will be reported and printed, fn cannot be executed or passed to fn function as a parameter.

4. Pre resolution occurs in the current scope and will not occur repeatedly on the same variable, that is, if a variable has been pre resolved in the current scope, it will not be resolved again.

5. Pre parsing process:

The first step is to find something that needs to be parsed according to the keywords var and function in advance.
The second step is to assign values to these things that need to be parsed in advance. For all variables, assign values in advance: undefined; All functions are assigned to the whole function block before officially running the code.
Step 3: after "pre parsing", the browser interprets the code line by line and passes the expression: = + - * – + +! And so on to modify these "pre resolved" values.

Posted by no3dfx on Sat, 16 Apr 2022 23:31:20 +0930