Comparison of ordinary functions and constructors in JavaScript_javascript skills

Question

What is a constructor?
What is the difference between a constructor and a normal function?
What exactly did you do when you used the new keyword?
What should I do if the constructor has a return value?
Can the constructor be called as a normal function?

The following are some of my understandings. Please correct me if I have misunderstandings. Thank you!

this
this always points to the owner of the function or method currently 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 in the page and then call it in the page. When a function is defined globally, its owner is the current page, which is the window object.

Several situations this points to

1. Call globally

this.name //this points to the window object
 
2. Function call

test();//this in the 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 the constructor
var dog=new Dog();//this in the constructor points to the newly created instance object, which is the dogcall and apply

here

The functions of call and apply are the same, but the way of accepting parameters is different. Call accepts multiple single parameters, while apply accepts an array of parameters.
The role of call and apply can simply be said that when an object instance lacks a function/method, it can call the ready-made functions/methods of other objects by replacing this with this object instance and changing the function runtime. context.
For example:

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

Now I have another cat object:

var cat={sound:'meow meow'}

I also want this cat object to be able to call the bark method. At this time, there is no need to redefine the bark method for it. You can use call/apply to call the bark method of the Dog class:

Dog.prototype.bark.call(cat);

or:

dog.bark.call(cat);

Add something to turn it into a chestnut with parameters:

function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(words){
  alert(this.sound+" "+words);
}
var dog=new Dog();
dog.bark("有小偷");//alert:汪汪汪  有小偷
Dog.prototype.bark.call(cat,"饿了");//alert：喵喵喵  饿了

Common functions
This is a simple ordinary function:

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

Ordinary functions have four obvious characteristics compared with constructors:

1. No need to use the new keyword to call

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

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

3. It is not recommended to use the this keyword inside the function
We say that it is not recommended to use it, but of course it is possible to use it if you insist on it. You just need to pay attention to what happens at this time. If you use the this keyword to define a variable or function inside a normal function, because this points to the window global object at this time, some global variables or functions will be added to the window unintentionally.

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

4. Function names are in camel case, with the first letter in lowercase

Constructor
In JavaScript, use the new keyword to call the defined constructor. What is returned by default is a new object with the variables and functions/methods defined by the constructor.

Give me an 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

与普通函数相比，构造函数有以下明显特点：

1.用new关键字调用

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

2.函数内部可以使用this关键字
在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数/方法，就是实例变量或实例函数/方法。需要用实例才能访问到，不能用类型名访问。

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

3.默认不用return返回值
构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。当然，也可以用return语句，返回值会根据return值的类型而有所不同，细节将在下文介绍。

4.函数命名建议首字母大写，与普通函数区分开。
不是命名规范中的，但是建议这么写。

使用new关键字实例化的时候发生了什么？
以上文中的Prince()函数举个栗子：

1.第一步，创建一个空对象。

var prince={}

2.第二步，将构造函数Prince()中的this指向新创建的对象prince。
3.第三步，将prince的_proto_属性指向Prince函数的prototype，创建对象和原型间关系
4.第四步，执行构造函数Prince()内的代码。

构造函数有return值怎么办？
构造函数里没有显式调用return时，默认是返回this对象，也就是新创建的实例对象。
当构造函数里调用return时，分两种情况：

1.return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。
这种情况下，忽视return值，依然返回this对象。

2.return的是Object
这种情况下，不再返回this对象，而是返回return语句的返回值。

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