Folgen Sie mir, um Javascript-Funktionsaufrufe und Konstruktoraufrufe zu erlernen. Javascript-Kenntnisse-js-Tutorial-php.cn

1. Funktionsaufruf
Funktion ist definitiv das Wichtigste in JavaScript. In JavaScript übernimmt Function die Funktionen von Prozeduren, Methoden, Konstruktoren und sogar Klassen und Modulen.

Bei der objektorientierten Programmierung sind Funktionen, Methoden und Klassenkonstruktor oft drei verschiedene Dinge, die durch unterschiedliche Syntaxen implementiert werden. Aber in JavaScript werden diese drei Konzepte durch Funktionen in drei verschiedenen Modi implementiert.

Der einfachste Verwendungsmodus ist der Funktionsaufruf:

function hello(username) { 
  return "hello, " + username; 
} 
hello("Keyser S&ouml;ze"); // "hello, Keyser S&ouml;ze"

Nach dem Login kopieren

2. Methodenaufruf

Das Konzept der Methoden in JavaScript besteht darin, dass das Attribut eines Objekts eine Funktion ist: Es ist dieselbe Funktion, unterscheidet sich jedoch, nachdem sie einem Mitglied eines Objekts zugewiesen wurde. Nachdem einem Mitglied eines Objekts eine Funktion zugewiesen wurde, wird diese nicht mehr als Funktion, sondern als Methode bezeichnet.

var obj = { 
  hello: function() { 
    return "hello, " + this.username; 
  }, 
  username: "Hans Gruber" 
}; 
obj.hello(); // "hello, Hans Gruber"

Nach dem Login kopieren

Das eigentliche Verhalten besteht darin, dass der Aufruf selbst bestimmt, an welches Objekt dieser gebunden wird, das heißt:
obj1.hello() bindet dies an obj1 und obj2.hello() bindet dies an obj2. Merken Sie sich einen Satz: Wer anruft, dieser zeigt auf wen

Aufgrund dieser verbindlichen Regelung ist auch folgende Verwendung denkbar:

function hello() { 
  return "hello, " + this.username; 
} 

var obj1 = { 
  hello: hello, 
  username: "Gordon Gekko" 
}; 
obj1.hello(); // "hello, Gordon Gekko" 

var obj2 = { 
  hello: hello, 
  username: "Biff Tannen" 
};_ 
obj2.hello(); // "hello, Biff Tannen"

Nach dem Login kopieren

In einer gewöhnlichen Funktion, wie der oben genannten Hallo-Funktion, ist die Verwendung des Schlüsselworts this jedoch keine gute Möglichkeit, wenn es direkt aufgerufen wird, wird das Zeigen darauf zu einem Problem. In diesem Fall wird häufig auf das globale Objekt (GlobalObject) verwiesen, bei dem es sich im Allgemeinen um das Fensterobjekt in Browsern handelt.
Und dieses Verhalten ist unsicher und bedeutungslos.

Wenn also im ES5-Standard der strikte Modus verwendet wird, wird dieser auf undefiniert gesetzt:

function hello() { 
  "use strict"; 
  return "hello, " + this.username; 
} 
hello(); // error: cannot read property "username" of undefined

Nach dem Login kopieren

Der obige Ansatz besteht darin, potenzielle Fehler schneller aufzudecken und Fehlbedienungen und schwer zu findende Fehler zu vermeiden.
Der Unterschied zwischen gewöhnlichen Funktionsaufrufen und Methodenaufrufen wird anhand dieses Beispiels deutlich.

var func = function() {
  alert(this);
};
var o = {};
o.fn = func;
// 比较
alert(o.fn === func);//true
// 调用
func();//[object Window]
o.fn();//[object Object]

Nach dem Login kopieren

Das laufende Ergebnis hier ist, dass die beiden Funktionen gleich sind, sodass das gedruckte Ergebnis wahr ist. Da jedoch die Aufrufe der beiden Funktionen unterschiedlich sind, druckt der Aufruf von func [Objektfenster], während das Druckergebnis von o.fn [Objektobjekt] ist.

Hier ist der Unterschied zwischen Funktionsaufruf und Methodenaufruf. Beim Funktionsaufruf bezieht sich dies speziell auf das globale Objektfenster, während sich dies bei der Methode speziell auf das aktuelle Objekt bezieht, d. h., dies bezieht sich in o.fn auf das Objekt O.

3. Aufruf des Konstruktors

Der dritte Verwendungsmodus der Funktion besteht darin, sie als Konstruktor zu verwenden:

dies

im Konstruktor

Wir müssen den Prozess der Objekterstellung analysieren, um die Bedeutung davon zu verstehen:

 var Person = function() {
  this.name = "小平果";
 };
 var p = new Person();

Nach dem Login kopieren

Hier wird zunächst die Funktion Person definiert. Analysieren wir die gesamte Ausführung:

Wenn das Programm diesen Satz ausführt, führt es den Funktionskörper nicht aus, sodass der JavaScript-Interpreter den Inhalt dieser Funktion nicht kennt.
Führen Sie als Nächstes das Schlüsselwort new aus, um das Objekt zu erstellen, ruft einen Verweis auf das Objekt ab und übergibt den Verweis auf das neue Objekt an die Funktion.
Führen Sie dann die Funktion aus und übergeben Sie die übergebene Objektreferenz an diese. Mit anderen Worten, in der Konstruktormethode ist dies das gerade von new erstellte Objekt.
Fügen Sie dann Mitglieder hinzu, das heißt, fügen Sie dem Objekt Mitglieder hinzu.
Schließlich endet die Funktion, gibt dies zurück und übergibt dies an die Variable auf der linken Seite.

Nachdem wir die Ausführung des Konstruktors analysiert haben, können wir feststellen, dass dies im Konstruktor das aktuelle Objekt ist.

Rückgabe im Konstruktor

Die Bedeutung der Rückgabe im Konstruktor hat sich geändert. Wenn im Konstruktor ein Objekt zurückgegeben wird, bleibt die ursprüngliche Bedeutung erhalten. Wenn die Rückgabe ein Nicht-Objekt ist, z. B. eine Zahl, ein Boolescher Wert usw Zeichenfolge, dann ist die Rückgabe diese. Wenn es keine Rückgabeanweisung gibt, wird auch diese zurückgegeben. Sehen Sie sich den folgenden Code an:

 // 返回一个对象的 return
 var ctr = function() {
  this.name = "赵晓虎";
  return {
  name:"牛亮亮"
  };
 };
 // 创建对象
 var p = new ctr();
 // 访问name属性
 alert(p.name);

 //执行代码，这里打印的结果是"牛亮亮". 因为构造方法中返回的是一个对象，那么保留return的意义，返回内容为return后面的对象. 再看下面代码：

 // 定义返回非对象数据的构造器
 var ctr = function() {
  this.name = "赵晓虎";
  return "牛亮亮";
 };
 // 创建对象
 var p = new ctr();
 // 使用
 alert(p);
 alert(p.name);

Nach dem Login kopieren

Das Ergebnis der Ausführung des Codes ist, dass das Popup-Fenster zuerst [Objektobjekt] und dann „Zhao Xiaohu“ ausgibt, da die Rückgabe hier eine Zeichenfolge ist, die zum Basistyp gehört, und dann die Rückgabeanweisung Hier ist ungültig und dieses Objekt wird zurückgegeben. Daher gibt das erste [Objektobjekt] aus, aber das zweite gibt nicht undefiniert aus.

function User(name, passwordHash) { 
  this.name = name; 
  this.passwordHash = passwordHash; 
} 
var u = new User("sfalken", 
  "0ef33ae791068ec64b502d6cb0191387"); 
u.name; // "sfalken"

Nach dem Login kopieren

Verwenden Sie den neuen Schlüssel, um die Funktion als Konstruktor aufzurufen. Im Gegensatz zu Funktions- und Methodenaufrufen übergibt der Konstruktor ein neues Objekt, bindet es an dieses und gibt das Objekt dann als Rückgabewert des Konstruktors zurück. Die Funktion der Konstruktorfunktion selbst besteht darin, das Objekt zu initialisieren.

Ein häufiger Fehler beim Konstruktoraufruf

Ich habe gerne den folgenden Konstruktor definiert:

var Coder = function( nick ){ 
this.nick = nick; 
};

Nach dem Login kopieren

Was passiert nach der Definition des Konstruktors? Das ist richtig, instanziieren Sie es schnell:

var coder = Coder( 'casper' );

Nach dem Login kopieren

Wie heißt dieser Programmierer-Bruder? Schnell ausdrucken:

console.log( coder.nick ); //undefined 
= =b 竟然是undefined！！再回过头看看实例化的那个语句，不难发现问题出在哪里：少了个new 
var coder = Coder( 'casper' ); //当作普通的函数来调用，故内部的this指针其实指向window对象 
console.log( window.nick); //输出：casper 
var coder = new Coder( 'casper' ); //加上new，一切皆不同，this正确地指向了当前创建的实例 
console.log( coder.nick ); //输出：casper

Nach dem Login kopieren

这样的错误貌似挺低级的，但出现的概率挺高的，肿么去避免或减少这种情况的发生呢？
可以在内部实现里面动下手脚：

var Coder = function( nick ){ 
  if( !(this instanceof Coder) ){ 
    return new Coder( nick ); 
  } 
    this.nick = nick; 
};

Nach dem Login kopieren

其实很简单，实例化的时候，内部判断下，当前this指向的对象的类型即可，如果非当前构造函数的类型，强制重新调用一遍构造函数。
突然觉得Coder这名字不够洋气？想用Hacker，好吧，我改。。。数了下，一共有三处要改，这不科学，有没有办法只把构造函数的名字改了就行？
当然有：

var Coder = function( nick ){ 
  if( !(this instanceof arguments.callee) ){ 
    return new arguments.callee( nick ); 
  } 
  this.nick = nick; 
};

Nach dem Login kopieren

tips：据说在ES 5的严格模式下面arguments.callee会被禁用，不过仅当ES 5普及同时你指定了要使用严格模式，否则还是可以用的发散下思维。

以上就是本文的全部内容，希望对大家学习函数调用、方法调用和构造函数调用有所帮助。