Comparison of common functions and constructors in JavaScript

Problem

What is a constructor?
What is the difference between a constructor and a normal function?
What did you do with the new keyword?
What if the constructor has a return value?
Can constructors be called as normal functions?

Here are some of my understanding, understand the wrong place please help me, thank you!

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

1 2 3 4 5

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 in the page and call it in the page. When a function is defined globally, its owner is the current page, which is the Window object.

This points to several situations

1. Call in Global

THIS.name//this point to Window object

2. Function call

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

3. Method invocation of the object

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

4. Call constructor
The this in the Var dog=new dog ()//constructor points to the newly created instance object, where Dogcall and apply

Call and apply function, just accept the parameter is not the same way, call accepts a number of individual parameters, apply to accept the parameter array.
The function of call and apply is simply to say that when an object instance lacks a function/method, it can invoke a ready-made function/method of another object by changing the context of the function runtime by replacing this as the object instance.
For example:

1 2 3 4 5 6

function Dog () {this.sound= "Woof";} Dog.prototype.bark=function () {alert (this.sound);}

Now I have another cat object:

var cat={sound: ' Meow meow meow '}

I also want this cat object to be able to invoke the Bark method, and then you don't have to redefine the bark method for it, you can use call/apply to invoke the bark method of the Dog class:

Dog.prototype.bark.call (CAT);

Or:

Dog.bark.call (CAT);

Add something and turn it into a chestnut with parameters:

1 2 3 4 5 6 7 8 9

function Dog () {this.sound= "Woof";} Dog.prototype.bark=function (words) {alert (this.sound+ "" +words);} var dog=new dog (); Dog.bark ("There Is a Thief");//alert: Wang Bark has a thief Dog.prototype.bark.call (cat, "hungry");//alert: Meow, Meow, hungry.

normal function
This is a simple ordinary function:

1 2 3 4

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

A common function has four distinct features compared to a constructor:

1. No need to call with new keyword

FN (); 2. You can return a value by returning statement

1 2 3 4

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

3. The use of this keyword is not recommended inside functions
We say do not recommend use, of course, it is possible to use, but to pay attention to what happened at this time. If you use the This keyword inside a normal function to define a variable or function, because this is the window global object that this is pointing to, inadvertently adds some global variables or functions to the window.

1 2 3 4 5 6

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

4. function named in hump way, first letter lowercase

Constructors
In JavaScript, the defined constructor is invoked with the new keyword. The default return is a new object that has the variables and functions/methods defined by the constructor.

Give me a chestnut:

1 2 3 4 5 6 7 8 9 10 11 12-13

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

Compared with ordinary functions, constructors have the following obvious features:

1. Call with new keyword

var prince=new prince ("Charming", 25);

2. The inside function can use the This keyword
Inside the constructor, this points to the new object that is constructed. A variable or function/method defined with this is either an instance variable or an instance function/method. needs to be accessed with an instance and cannot be accessed with a type name.

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

3. Default return value is not returned
The constructor is not required to return the value explicitly, and this is returned by default, which is the new instance object. Of course, you can also use the return statement, which will vary depending on the type of value returned, as described in the details below.

4. The function name suggests capitalizing the first letter, separated from the normal function area.
Not in the naming convention, but this is recommended.

What happens when you instantiate with the New keyword?
The Prince () function in the above article is to give a chestnut:

1. The first step is to create an empty object.

var prince={}

2. The second step is to point this in the constructor Prince () to the newly created object prince.
3. The third step is to point the Prince _proto_ attribute to the prototype of the Prince function, creating the relationship between the object and the prototype
4. Step fourth, execute the code within the constructor prince ().

What if the constructor has a return value?
The default is to return the This object, which is the newly created instance object, when no return is explicitly invoked in the constructor.
When calling return in a constructor, it is divided into two situations:

The 1.return is five simple data types: string,number,boolean,null,undefined.
In this case, the return value is ignored and the This object is still returned.

2.return is object.
In this case, you no longer return the This object, but instead return the return statement's value.

1 2 3 4 5 6 7

function person (name) {this.name=name; return {name: ' Cherry '}} var person=new person (' Sheila '); Person.name;//cherry p;//object {name: "Cherry"}