Common functions in JavaScript are compared with constructors

  • 2020-05-27 04:13:52
  • OfStack

The problem

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

Below is my 1 some understanding, understanding the wrong place please help correct, thank you!

this
this always points to owner of the function or method currently being executed. Such as:


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

In the code above, we defined an test() function on the page and called it on the page. When a function is defined globally, its owner is the current page, which is the window object.

this points to several cases

1. Global calls

this.name //this points to the window object

2. Function call

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

3. Method call of the object

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

4. Call the constructor
var dog = new Dog (); // this in the constructor points to the newly created instance object, which is dogcall and apply here

call and apply have the same effect, but not the same way to accept parameters. call accepts multiple single parameters, while apply accepts an array of parameters.
The effect of call and apply is simply to say that when an object instance is missing a function/method, the ready-made function/method of another object can be called by changing the context of the function runtime by replacing this among them with the object instance.
Such as:


function Dog(){
  this.sound=" auf ";
}
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 call the bark method, so instead of redefining the bark method, I can call the bark method of the Dog class using call/apply:

Dog.prototype.bark.call(cat);

Or:

dog.bark.call(cat);

Add something and turn it into a parameter chestnut:


function Dog(){
  this.sound=" auf ";
}
Dog.prototype.bark=function(words){
  alert(this.sound+" "+words);
}
var dog=new Dog();
dog.bark(" Have a thief ");//alert: auf    Have a thief 
Dog.prototype.bark.call(cat," hungry ");//alert : meow meow meow    hungry 

Common function
This is a simple ordinary function:


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

Common functions have four distinct characteristics compared with constructors:

1. Do not use the new keyword

fn (); 2. You can use the return statement to return a value


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

3. The this keyword is not recommended inside functions
We say it's not recommended, but it's okay to use it, just be careful what happens. If you use the this keyword to define a variable or function inside a normal function, because this is pointing to an window global object, you inadvertently add some global variables or functions to window.


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

4. The function is named with a hump and begins with a lowercase letter

The constructor
In JavaScript, the defined constructor is called with the new keyword. The default is to return a new object with constructor-defined variables and functions/methods.

Take a chestnut:


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 characteristics:

1. Use new

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

2. The this keyword can be used inside the function
Inside the constructor, this points to the constructed new object. A variable or function/method defined in this is an instance variable or instance function/method. You need an instance to access it, not a type name.

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

3. return return value is not used by default
The constructor does not need to explicitly return a value with return, but instead returns this, the new instance object, by default. Of course, you can also use the return statement, and the return value will vary depending on the type of return value, as described below.

4. Function name is recommended to be capitalized, which is distinguished from ordinary functions.
Not in the naming convention, but recommended.

What happens when you instantiate using the new keyword?
The Prince() function above takes a chestnut:

1. Step 1, create an empty object.

var prince={}

2. In step 2, point this in the constructor Prince() to the newly created object prince.
3. In step 3, point the _proto_ attribute of prince to prototype of Prince function, and create the relationship between the object and the prototype
4. In step 4, execute the code in the constructor Prince().

What if the constructor has an return value?
When return is not explicitly invoked in the constructor, the default is to return the this object, which is the newly created instance object.
When return is called from the constructor, there are two situations:

1.return has 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 Object
In this case, instead of returning the this object, the return value of the return statement is returned.


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

Related articles: