Javascript Constructor Detailed _ Basics

Source: Internet
Author: User

First, what is the constructor

Constructors are common in some object-oriented languages, such as Java, C + +, and PHP. In JavaScript, a constructor is first a normal function that can be invoked using the new operator and generate a special type of object.

Copy Code code 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 code 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 passed arguments 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 code above is equivalent to:

Copy Code code as follows:

Benjamin = {
"username": "ZUOJJ",
"Sex": "Male"
}

Second, why use constructors

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

Copy Code code 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 common methods on the prototype for multiple instances to share

Copy Code code 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 ());

III. Matters of note

1.new keywords
When instantiating a constructor, be sure to use the New keyword and use the new keyword, which has a large impact on the This object, which points to the Global Object (window in browser and global in node) without the new keyword. So when you define a constructor, we recommend that you capitalize the first letter of the function name.
2. If the called function does not have an explicit return expression, it implicitly returns the This object-that is, the newly created object, or it will affect the result returned, but only to return an object

Copy Code code as follows:

function Bar () {
return 2;
}
var bar = new Bar ();
Returns the newly created object
Outputs:bar {}
Console.log (bar);
function Test () {
This.value = 2;
return {
Foo:1
};
}
var test = new Test ();
The returned object
Outputs:object {foo:1}
Console.log (test);

What we need to be aware of is:
A The new Bar () returns the newly created object, not the literal value of 2. So the new bar (). constructor = = Bar, but if the return is a numeric object, the result is different;
b Here's the new Test () is the object returned by the function, not the newly created object by the newer keyword, as follows:

Copy Code code 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 the summary of the constructor function, I hope to help beginners, the article in the wrong place, hope Criticism, treatise.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.