Comparaison des fonctions et constructeurs ordinaires dans les compétences JavaScript_javascript

Question

Qu'est-ce qu'un constructeur ?
Quelle est la différence entre un constructeur et une fonction normale ?
Qu'avez-vous fait exactement lorsque vous avez utilisé le nouveau mot-clé ?
Que dois-je faire si le constructeur a une valeur de retour ?
Le constructeur peut-il être appelé comme une fonction normale ?

Voici quelques-unes de mes compréhensions. Veuillez me corriger si j'ai des malentendus. Merci !

ce
cela pointe toujours vers le propriétaire de la fonction ou de la méthode en cours d'exécution. Par exemple :

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

Dans le code ci-dessus, nous définissons une fonction test() dans la page puis l'appelons dans la page. Lorsqu'une fonction est définie globalement, son propriétaire est la page actuelle, qui est l'objet window.

Plusieurs situations que cela indique

1. Appelez dans le monde entier

this.name //cela pointe vers l'objet fenêtre
 
2. Appel de fonction

test();//ceci dans la fonction test() pointe également vers l'objet fenêtre
 
3. Appel de méthode objet

obj1.fn();//ceci dans la méthode fn() de l'objet obj1 pointe vers obj1
 
4. Appelez le constructeur
var dog=new Dog();//this dans le constructeur pointe vers l'objet d'instance nouvellement créé, qui est le dogcall et s'applique

Les fonctions de call et apply sont les mêmes, mais la manière d'accepter les paramètres est différente. Call accepte plusieurs paramètres uniques, tandis que apply accepte un tableau de paramètres.
Le rôle de call et apply peut simplement être dit que lorsqu'une instance d'objet ne dispose pas d'une fonction/méthode, elle peut appeler les fonctions/méthodes prêtes à l'emploi d'autres objets en les remplaçant par cette instance d'objet et en modifiant le contexte d'exécution de la fonction.
Par exemple :

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

Maintenant j'ai un autre objet chat :

var cat={sound:'meow miaou'}

Je souhaite également que cet objet cat puisse appeler la méthode bark pour le moment, il n'est pas nécessaire de redéfinir la méthode bark pour cela. Vous pouvez utiliser call/apply pour appeler la méthode bark de la classe Dog :

Dog.prototype.bark.call(cat);

ou :

dog.bark.call(cat);

Ajoutez quelque chose pour le transformer en châtaigne avec des paramètres :

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：喵喵喵  饿了

Fonctions communes
Il s'agit d'une simple fonction ordinaire :

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

Les fonctions ordinaires ont quatre caractéristiques évidentes par rapport aux constructeurs :

1. Pas besoin d'utiliser le nouveau mot-clé pour appeler

fn();2. Vous pouvez utiliser l'instruction return pour renvoyer la valeur

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

3. Il n'est pas recommandé d'utiliser le mot-clé this dans la fonction
Nous disons qu'il n'est pas recommandé de l'utiliser, mais bien sûr il est possible de l'utiliser si vous insistez. Il vous suffit de faire attention à ce qui se passe à ce moment-là. Si vous utilisez le mot-clé this pour définir une variable ou une fonction à l'intérieur d'une fonction normale, parce que cela pointe vers l'objet global de la fenêtre à ce moment-là, certaines variables ou fonctions globales seront ajoutées involontairement à la fenêtre.

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

4. Les noms des fonctions sont en casse chameau, avec la première lettre en minuscule

Constructeur
En JavaScript, utilisez le mot-clé new pour appeler le constructeur défini. Ce qui est renvoyé par défaut est un nouvel objet avec les variables et fonctions/méthodes définies par le constructeur.

Donnez-moi un exemple :

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"}