Comparison between common and constructor functions in JavaScript: javascript Constructor

Comparison between common and constructor functions in JavaScript: javascript Constructor

Problem

What is a constructor?
What is the difference between a constructor and a common function?
What did I do when I use the new keyword?
What if the constructor has a return value?
Can constructors be called as common functions?

Here are some of my understandings. If you have any mistakes, please correct them. Thank you!

This
This always points to the owner of the function or method being executed. For example:

function test(){  console.log(this);}test();//Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

In the above Code, we define a test () function on the page and call it on the page. When a function is defined globally, its owner is the current page, that is, the window object.

This points to several situations

1. Global Call

This. name // this points to the window object

2. function call

This in the test (); // test () function also points to the window object

3. Object method call

Obj1.fn (); // this in the fn () method of the obj1 object points to obj1

4. Call Constructors
Var dog = new Dog (); // this In the constructor points to the newly created instance object, that is, dogcall and apply

The call function is the same as the apply function, but the method for accepting parameters is different. call accepts multiple single parameters, and apply accepts parameter arrays.
The functions of call and apply can be simply described as: when an object instance lacks a function/method, it can call a ready-made function/method of other objects, the method is to change the context of the function runtime by replacing this with the object instance.
For example:

Function Dog () {this. sound = "Wang Wangwang";} Dog. prototype. bark = function () {alert (this. sound );}

Now I have another cat object:

Var cat = {sound: 'awesome meak '}

I also want this cat object to call the bark method. In this case, you do not need to define the bark Method for it again. You can call/apply to call the bark method of the Dog class:

Dog. prototype. bark. call (cat );

Or:

Dog. bark. call (cat );

Add something to become a chestnut with parameters:

Function Dog () {this. sound = "Wang Wangwang";} Dog. prototype. bark = function (words) {alert (this. sound + "" + words);} var dog = new Dog (); dog. bark ("thieves"); // alert: Wang Wangwang has thieves Dog. prototype. bark. call (cat, "ELE. Me"); // alert: ELE. Me

Common functions
This is a simple common function:

function fn(){  alert("hello sheila");}fn();//alert:hello sheila

Compared with constructor, common functions have four obvious characteristics:

1. You do not need to use the new keyword to call

Fn (); 2. return values can be returned using the return statement.

 function fn(a,b){    return a+b;  }  alert(fn(2,3));//alert:5

3. this keyword is not recommended for functions.
We do not recommend that you use it. Of course, it is okay to use it, but pay attention to what happened at this time. If you use the this keyword inside a common function to define a variable or function, because this points to the window global object, some global variables or functions are inadvertently added to the window.

function greeting(){    this.name="sheila";    alert("hello "+this.name);  }  greeting();//alert:hello sheila  alert(window.name);//alert:sheila

4. The function name is in the camper mode, and the first letter is lowercase.

Constructor
In JavaScript, The new Keyword is used to call the defined constructor. By default, a new object is returned, which has the variables and functions/methods defined by the constructor.

Example:

function Prince(name,age){  this.gender="male";  this.kind=true;  this.rich=true;  this.name=name;  this.age=age;}Prince.prototype.toFrog=function(){  console.log("Prince "+this.name+" turned into a frog.");}var prince=new Prince("charming",25);prince.toFrog();//Prince charming turned into a frog.prince.kind;//true

Constructor has the following obvious characteristics compared with common functions:

1. call with the new Keyword

Var prince = new Prince ("charming", 25 );

2. this keyword can be used inside the function.
Inside the constructor, this points to the newly constructed object. The variables or functions/methods defined by this are instance variables or Instance functions/methods. You must use an instance to access the instance. You cannot use a type name to access the instance.

Prince. age; // 25
Prince. age; // undefined

3. return values are not required by default.
The constructor does not need to use the return explicit return value. By default, this is returned, that is, the new instance object. Of course, you can also use the return statement. The return value varies according to the type of the return value. The details are described below.

4. We recommend that you use uppercase letters for function naming.
It is not in the naming convention, but it is recommended to write it like this.

What happens when the new keyword is used for instantiation?
The Prince () function in the above text provides an example:

1. Step 1: Create an empty object.

Var prince = {}

2. Step 2: Point this in the constructor Prince () to the newly created object prince.
3. Step 3: point the _ proto _ attribute of prince to the prototype of the Prince function, and create the relationship between the object and the prototype.
4. Step 4: Execute the code in the constructor Prince.

What if the constructor has a return value?
When no return is explicitly called in the constructor, this object is returned by default, that is, the newly created instance object.
When return is called in the constructor, there are two situations:

1. return is five simple data types: String, Number, Boolean, Null, Undefined.
In this case, ignore the return value and still return this object.

2. The return Object
In this case, the return Statement is returned instead of the this object.

function Person(name){    this.name=name;    return {name:"cherry"}  }  var person=new Person("sheila");  person.name;//cherry  p;//Object {name: "cherry"}