Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Detailed explanation of Javascript constructor_basic knowledge

Detailed explanation of Javascript constructor_basic knowledge

WBOY
Release： 2016-05-16 16:33:07
Original
1442 people have browsed it

1. What is a constructor

In some object-oriented languages, such as Java, C, and PHP, constructors are very common. In Javascript, the constructor is first an ordinary function, which can be called using the new operator and generates an object of a special type.

Copy code The code is as follows:

// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");

In the above example, benjamin is a Benjamin object, so how is it instantiated?

Copy code The code is as follows:

function Benjamin(username, sex) {
This.username = username;
This.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);

As we can see, the "Benjamin" constructor simply receives the parameters passed in and assigns them to the this object. This is because when the constructor is called by the new operator, the this object of the constructor is assigned the object returned by the new operation.
This means that the above code is equivalent to:

Copy code The code is as follows:

benjamin = {
"username": "zuojj",
"sex": "male"
}

2. Why use constructor

There are several reasons why constructors are used:
1. Using constructors means that all these objects can be created using the same basic structure
2. Using a constructor means that the "benjamin" object is explicitly marked as an instance of the "Benjamin" function

Copy code The code is as follows:

function Benjamin(username, sex) {
This.username = username;
This.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {
"username": "zuojj",
"sex": "male"
}
//Outputs: true
console.log(benjamin instanceof Benjamin);
//Outputs: false
console.log(ben instanceof Benjamin);

3. Using constructors means that we can define public methods on the prototype for sharing by multiple instances

Copy code The code is as follows:

function Benjamin(username, sex) {
This.username = username;
This.sex = sex;
}
Benjamin.prototype.getName = function() {
return this.username;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("lemon", "female");
//Outputs: zuojj
console.log(benjamin.getName());
//Outputs: lemon
console.log(ben.getName());

3. Precautions

1.new keyword
Don't forget to use the new keyword when instantiating the constructor. Whether to use the new keyword has a great impact on the this object. Without the new keyword, the this object will point to the global object (window in browser and global in node). Therefore, when defining a constructor, it is recommended that the first letter of the function name be capitalized.
2. If the called function does not have an explicit return expression, it will implicitly return the this object - that is, the newly created object. Otherwise, it will affect the returned result, but only if it returns an object

Copy code The code is as follows:

function Bar() {
Return 2;
}
var bar = new Bar();
//Return the newly created object
//Outputs: Bar {}
console.log(bar);
function Test() {
This.value = 2;
Return {
foo: 1
};
}
var test = new Test();
//Returned object
//Outputs: Object {foo: 1}
console.log(test);

What we need to pay attention to is:
a) new Bar() returns the newly created object, not the literal value of the number 2. Therefore new Bar().constructor === Bar, but if a numeric object is returned, the result is different;
b) The new Test() obtained here is the object returned by the function, not the newly created object through the new keyword, as shown below:

Copy code The code is as follows:

function Bar() {
Return 2;
}
var bar = new Bar();
function BarN() {
return new Number(2);
}
var barn = new BarN();
//Outputs: true
console.log(bar.constructor === Bar);
//Outputs: Number {}
console.log(barn);
//Ouputs: false
console.log(barn.constructor === BarN);
//Outputs: true
console.log(barn.constructor === Number);
/*---------------------------------------------- */
function Test() {
This.value = 2;
Return {
foo: 1
};
}
var test = new Test();
//Outputs: undefined
console.log(test.value);
//Ouputs: 1
console.log(test.foo);

The above is a summary of the constructor function. I hope it will be helpful to beginners. If there is anything inappropriate in the article, I hope to criticize and correct it.

Related labels：
javascript Constructor
source：php.cn
Previous article：javascript Deferred and recursion limit examples_javascript skills Next article：The solution to the problem of garbled Chinese characters in the Post method of JQuery's Ajax_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template