Vergleich gewöhnlicher Funktionen und Konstruktoren in JavaScript_Javascript-Kenntnissen

Frage

Was ist ein Konstruktor?
Was ist der Unterschied zwischen einem Konstruktor und einer normalen Funktion?
Was genau haben Sie gemacht, als Sie das neue Schlüsselwort verwendet haben?
Was soll ich tun, wenn der Konstruktor einen Rückgabewert hat?
Kann der Konstruktor als normale Funktion aufgerufen werden?

Das Folgende sind einige meiner Verständnisse. Bitte korrigieren Sie mich, wenn ich Missverständnisse habe.

das
Dies verweist immer auf den Eigentümer der Funktion oder Methode, die gerade ausgeführt wird. Zum Beispiel:

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

Im obigen Code definieren wir eine test()-Funktion auf der Seite und rufen sie dann auf der Seite auf. Wenn eine Funktion global definiert ist, ist ihr Besitzer die aktuelle Seite, also das Fensterobjekt.

Mehrere Situationen, auf die dies hinweist

1. Global anrufen

this.name //this zeigt auf das Fensterobjekt
 
2. Funktionsaufruf

test();//dies in der test()-Funktion zeigt auch auf das Fensterobjekt
 
3. Aufruf der Objektmethode

obj1.fn();//dieses in der fn()-Methode des obj1-Objekts zeigt auf obj1
 
4. Rufen Sie den Konstruktor
auf var dog=new Dog();//this im Konstruktor zeigt auf das neu erstellte Instanzobjekt, das der dogcall ist und gilt

hier

Die Funktionen von „call“ und „apply“ sind die gleichen, aber die Art und Weise, Parameter zu akzeptieren, ist unterschiedlich. „Call“ akzeptiert mehrere einzelne Parameter, während „apply“ ein Array von Parametern akzeptiert.
Die Rolle von Call und Apply kann einfach gesagt werden: Wenn einer Objektinstanz eine Funktion/Methode fehlt, kann sie die vorgefertigten Funktionen/Methoden anderer Objekte aufrufen, indem sie diese durch diese Objektinstanz ersetzt und den Funktionslaufzeitkontext ändert.
Zum Beispiel:

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

Jetzt habe ich ein weiteres Katzenobjekt:

var cat={sound:'meow miau'}

Ich möchte auch, dass dieses Katzenobjekt die Bark-Methode aufrufen kann. Zu diesem Zeitpunkt besteht keine Notwendigkeit, die Bark-Methode dafür neu zu definieren. Sie können call/apply verwenden, um die Bark-Methode der Dog-Klasse aufzurufen.

Dog.prototype.bark.call(cat);

oder:

dog.bark.call(cat);

Fügen Sie etwas hinzu, um es in eine Kastanie mit den Parametern zu verwandeln:

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

Allgemeine Funktionen
Dies ist eine einfache gewöhnliche Funktion:

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

Gewöhnliche Funktionen weisen im Vergleich zu Konstruktoren vier offensichtliche Merkmale auf:

1. Zum Aufrufen von

muss das neue Schlüsselwort nicht verwendet werden

fn();2. Sie können die Return-Anweisung verwenden, um den Wert

zurückzugeben

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

3. Es wird nicht empfohlen, das Schlüsselwort this innerhalb der Funktion zu verwenden
Wir sagen, dass es nicht empfehlenswert ist, es zu verwenden, aber es ist natürlich möglich, es zu verwenden, wenn Sie darauf bestehen. Sie müssen nur darauf achten, was zu diesem Zeitpunkt passiert. Wenn Sie das Schlüsselwort this verwenden, um eine Variable oder Funktion innerhalb einer normalen Funktion zu definieren, werden einige globale Variablen oder Funktionen unbeabsichtigt zum Fenster hinzugefügt, da dies zu diesem Zeitpunkt auf das globale Fensterobjekt verweist.

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

4. Funktionsnamen werden in Kamelbuchstaben geschrieben, wobei der erste Buchstabe klein geschrieben wird

Konstrukteur
Verwenden Sie in JavaScript das Schlüsselwort new, um den definierten Konstruktor aufzurufen. Standardmäßig wird ein neues Objekt mit den vom Konstruktor definierten Variablen und Funktionen/Methoden zurückgegeben.

Geben Sie mir ein Beispiel:

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