JavaScript knowledge: Constructors are also functions
|
The first thing to make clear is that constructors are also functions I often use constructors to create instance objects. For example, the instantiation of objects and arrays can be completed through the corresponding constructors Object() and Array(). There is no difference in the syntax definition between constructors and ordinary functions. The main differences are reflected in the following three points. (1) The first letter of the constructor function name is usually capitalized. By convention, constructor names start with a capital letter, while non-constructor names start with a lowercase letter. This is borrowed from object-oriented programming languages and helps distinguish constructors from normal functions in ECMAScript. (2) The this keyword is used inside the function body to indicate the object instance to be generated. The constructor does not explicitly return any value, but returns "this" by default. In the following code snippet, the Person() function does not use the return keyword to return any information, but the output variable person1 is a Person instance with name and age attribute values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. Define the constructor function Person(name,age){
this.age = age;
this.name = name;
this.sayName = function(){
console.log(this.name);
}
}
// 2. Generate instance object var person1 = new Person('Xiao Su','18');
// 3. Print instance object console.log(person1);
</script>
</body>
</html>
The display effect is as follows
(3) When called as a constructor, it must be used in conjunction with the new operator. This is very important. Any function called with the new operator is a constructor, and a function not called with the new operator is a normal function. 1. Definition and call of constructorThe constructor is also called a custom function, which defines properties and methods for its own object type in the form of a function. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. Define the constructor function Person(name,age){
this.age = age;
this.name = name;
this.sayName = function(){
console.log(this.name);
}
}
// 2. Generate instance object var person1 = new Person('Xiao Su','18');
// 3.Call method person1.sayName();
</script>
</body>
</html>
2. Purpose of the new keywordWhen the constructor is executed, it performs the following four steps:
Take the previous code for generating the person1 instance as an example. Step 1: Create a new address in memory for the person1 instance. Step 2: Determine that the this pointer of the person1 instance points to the person itself. Step 3: Add name, age, and sayName attributes to the person1 instance, where the sayName attribute value is a function. Step 4: Return the person1 instance. An example
var person1 = new Person("Bob", 18);
This line of code is equivalent to
// Demonstrate the function of new function Person(name,age) {
// 1. Create a new object var instance = new Object();
// 2. Point this inside the function to this new object this = instance;
// 3. Execute the code inside the constructor this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
};
// 4. Return the new object as the return value return instance;
}
This means that instance is assigned to person1, that is, person1 = instance. In fact, it is like this:
// Demonstrate the function of new function Person(name,age) {
// 1. Create a new object var person1 = new Object();
// 2. Point this inside the function to this new object this = person1;
// 3. Execute the code inside the constructor this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
};
// 4. Return the new object as the return value return person1;
}
3. Constructor problem: waste of memoryBasic fact: the sayName attribute is different in different instances. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. Custom constructor function Person(name,age) {
this.name = name;
this.age = age;
// The type property value inside this is unchanged this.type = "human";
// The sayName method of each object is the same this.sayName = function () {
console.log(this.name);
};
}
var person1 = new Person('Bob',18);
var person2 = new Person('Mike',20);
// 2. Determine whether the respective methods are the same function console.log(person1.sayName === person2.sayName); // false
</script>
</body>
</html>
Explanation: The console.log(person1.sayName === person2.sayName) method can be used to determine whether the two functions are the same. Obviously, they are not the same function, so the two functions occupy two memory spaces, which will cause memory waste. So how do we solve the problem of functions occupying memory? The answer is to extract the internal functions of the object as public functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Solution 1: Extract the public functions out of the constructor function sayName() {
console.log(this.name);
}
function sayAge() {
console.log(this.age);
}
//1. Custom object function Person(name,age) {
this.name = name;
this.age = age;
// The type property value inside this is unchanged this.type = "human";
// The sayName method of each object is the same this.sayName = sayName;
this.sayAge = sayAge;
}
//2. Instantiate the object var person1 = new Person('Bob',18);
var person2 = new Person('Mike',20);
console.log(person1.sayName === person2.sayName); // true
</script>
</body>
</html>
At this point, there is also a problem. If there are multiple public functions, multiple functions need to be created externally, which may cause naming conflicts. Solution: encapsulate multiple common functions into one object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 3. Encapsulate multiple public functions into one object var fns = {
sayName : function () {
console.log(this.name);
},
sayAge : function () {
console.log(this.age);
}
};
// 1. Custom object function Person(name,age) {
this.name = name;
this.age = age;
this.type = "human";
this.sayName = fns.sayName;
this.sayAge = fns.sayAge;
}
// 2. Generate object instance var person1 = new Person("Bob",18);
var person2 = new Person("Mike",20);
// person1.sayName();
console.log(person1.sayName === person2.sayName);
console.log(person1.sayAge === person2.sayAge);
</script>
</body>
</html>
Explanation: Encapsulating multiple functions into one object can solve the problem of possible function name conflicts. By setting up a globally accessible function, it can be accessed by all instances without having to create it repeatedly. However, there is a problem. If all functions added to an object are treated as global functions, it is impossible to complete the property encapsulation of a custom type object (implying that global functions can only encapsulate functions but not properties, because properties are encapsulated outside the function and must be defined as global variables before they can be called, which will pollute global variables). Therefore, this is not a good solution. At this point, the concept of prototype is introduced. Using the concept of prototype can solve this problem well. SummarizeThis article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: OpenSSL implements two-way authentication tutorial (with server and client code)
>>: Implementing a distributed lock using MySQL
Recommend
Implementing a puzzle game with js
This article shares the specific code of js to im...
The difference between the name and id of the a tag's target pointing to the iframe
Copy code The code is as follows: <iframe id=&...
Vue parent-child component mutual value transfer and call
Table of contents 1. Parent passes value to child...
MySQL 5.7.10 Installation Documentation Tutorial
1. Install dependency packages yum -y install gcc...
Vue implements a small weather forecast application
This is a website I imitated when I was self-stud...
Examples of vertical grid and progressive line spacing
New Questions Come and go in a hurry. It has been...
Solution to Navicat Premier remote connection to MySQL error 10038
Remote connection to MySQL fails, there may be th...
Detailed explanation of Angular routing basics
Table of contents 1. Routing related objects 2. L...
SpringBoot integrates Activiti7 implementation code
After the official release of Activiti7, it has f...
How to solve the problem that MySQL cannot start because it cannot create temporary files
Problem Description I recently encountered a prob...
Example of implementing load balancing with Nginx+SpringBoot
Introduction to Load Balancing Before introducing...
Mysql delete duplicate data to keep the smallest id solution
Search online to delete duplicate data and keep t...
Solve the problem of PhPStudy MySQL startup failure under Windows system
Report an error The Apache\Nginx service started ...
Docker image import and export code examples
Import and export of Docker images This article i...
Optimizing the performance of paging query for MySQL with tens of millions of data
When the amount of data in MySQL is large, limit ...