Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der Anwendungsbeispiele für JavaScript-Funktionsaufrufe und Parameterübergabe

伊谢尔伦
Freigeben: 2017-07-26 17:30:51
Original
4207 Leute haben es durchsucht

JavaScript-Funktionsaufruf

Der Unterschied bei jeder Methode liegt in der Initialisierung dieser.

Parameter als Wert übergeben
Die in einer Funktion aufgerufenen Parameter sind die Parameter der Funktion. Wenn eine Funktion den Wert eines Parameters ändert, ändert sie nicht den Anfangswert des Parameters (definiert außerhalb der Funktion). Änderungen an Funktionsparametern wirken sich nicht auf Variablen außerhalb der Funktion (lokale Variablen) aus.
Parameter über Objekte übergeben
In JavaScript können Sie auf den Wert eines Objekts verweisen. Wenn wir also die Eigenschaften des Objekts innerhalb der Funktion ändern, wird sein Anfangswert geändert. Das Ändern von Objekteigenschaften kann außerhalb der Funktion (globale Variablen) erfolgen.

dieses Schlüsselwort

Im Allgemeinen zeigt dies in Javascript auf das aktuelle Objekt, wenn die Funktion ausgeführt wird. Hinweis Beachten Sie, dass es sich hierbei um ein reserviertes Schlüsselwort handelt. Sie können den Wert dieses Schlüsselworts nicht ändern.

Aufrufen einer JavaScript-Funktion

Der Code in der Funktion wird ausgeführt, nachdem die Funktion aufgerufen wurde.

Als Funktionsaufruf

Instanz


function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2);      // myFunction(10, 2) 返回 20
Nach dem Login kopieren

Die obige Funktion gehört nicht dazu zu jedem Objekt. In JavaScript ist es jedoch immer das standardmäßige globale Objekt. Das standardmäßige globale Objekt in HTML ist die HTML-Seite selbst, daher gehört die Funktion zur HTML-Seite. Das Seitenobjekt im Browser ist das Browserfenster (Fensterobjekt). Die oben genannten Funktionen werden automatisch zu Funktionen des Fensterobjekts. myFunction() und window.myFunction() sind identisch:


function myFunction(a, b) {
  return a * b;
}
window.myFunction(10, 2);  // window.myFunction(10, 2) 返回 20
Nach dem Login kopieren

Hinweis Dies ist eine gängige Methode zum Aufrufen von JavaScript-Funktionen, aber keine Bei guter Programmierpraxis können Methoden oder Funktionen leicht zu Namenskonfliktfehlern führen.
Globales Objekt
Wenn die Funktion nicht von ihrem eigenen Objekt aufgerufen wird, wird der Wert dieses Objekts zum globalen Objekt. In einem Webbrowser ist das globale Objekt das Browserfenster (Fensterobjekt). Der von dieser Instanz zurückgegebene Wert davon ist das Fensterobjekt:


function myFunction() {
  return this;
}
myFunction();        // 返回 window 对象
Nach dem Login kopieren

Beachten Sie, dass der Aufruf der Funktion als globales Objekt den Wert davon zu einem macht globales Objekt. Die Verwendung des Fensterobjekts als Variable kann leicht zum Absturz des Programms führen.

Funktionen, die als Methoden aufgerufen werden

In JavaScript können Sie Funktionen als Methoden von Objekten definieren. Das folgende Beispiel erstellt ein Objekt (myObject) mit zwei Eigenschaften (firstName und lastName) und einer Methode (fullName):


var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName();     // 返回 "John Doe"
Nach dem Login kopieren

fullName Eine Methode ist eine Funktion. Funktionen gehören zu Objekten. myObject ist der Eigentümer der Funktion. Dieses Objekt enthält JavaScript-Code. Der Wert davon in der Instanz ist das myObject-Objekt. Testen Sie unten! Ändern Sie die fullName-Methode und geben Sie diesen Wert zurück:


var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}
myObject.fullName();     // 返回 [object Object] (所有者对象)
Nach dem Login kopieren

Hinweis Wenn die Funktion als Objektmethode aufgerufen wird, wird der Wert davon zum Objekt selbst .

Verwenden Sie den Konstruktor, um die Funktion aufzurufen

Wenn das Schlüsselwort new vor dem Funktionsaufruf verwendet wird, wird der Konstruktor aufgerufen. Das sieht so aus, als würde eine neue Funktion erstellt, aber in Wirklichkeit sind JavaScript-Funktionen neu erstellte Objekte:


// 构造函数:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;               // 返回 "John"
Nach dem Login kopieren

Konstruktoraufruf Ein neues Objekt wird erstellt . Das neue Objekt erbt die Eigenschaften und Methoden des Konstruktors. Hinweis Das Schlüsselwort this im Konstruktor hat keinen Wert. Der Wert hierfür wird erstellt, wenn das Objekt (neues Objekt) beim Aufruf der Funktion instanziiert wird.

Aufrufen einer Funktion als Funktionsmethode

In JavaScript sind Funktionen Objekte. Eine JavaScript-Funktion hat ihre Eigenschaften und Methoden. call() und apply() sind vordefinierte Funktionsmethoden. Zum Aufrufen von Funktionen können zwei Methoden verwendet werden, und der erste Parameter beider Methoden muss das Objekt selbst sein.


function myFunction(a, b) {
  return a * b;
}
myFunction.call(myObject, 10, 2);   // 返回 20
Nach dem Login kopieren

Instanz


function myFunction(a, b) {
  return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);  // 返回 20
Nach dem Login kopieren

Beide Methoden verwenden Objekte selbst als erster Parameter. Der Unterschied zwischen den beiden liegt im zweiten Parameter: apply übergibt ein Parameter-Array, d. h. mehrere Parameter werden zu einem Array zusammengefasst und übergeben, während call als Parameter von call übergeben wird (beginnend mit dem zweiten Parameter).
Im strengen JavaScript-Modus wird der erste Parameter beim Aufruf der Funktion zum Wert dieser Funktion, auch wenn der Parameter kein Objekt ist.
Wenn im nicht-strikten JavaScript-Modus der Wert des ersten Parameters null oder undefiniert ist, wird stattdessen das globale Objekt verwendet.
Hinweis: Mit der Methode call() oder apply() können Sie den Wert dieser Methode festlegen und sie als neue Methode eines vorhandenen Objekts aufrufen.

JavaScript-Funktionsparameter

JavaScript-Funktionen führen keine Prüfungen der Werte von Parametern (Argumenten) durch. Explizite Funktionsparameter und versteckte Parameter (Argumente)Im vorherigen Tutorial haben wir etwas über die expliziten Parameter der Funktion gelernt:


functionName(parameter1, parameter2, parameter3) {
  code to be executed
}
Nach dem Login kopieren

Explizite Funktionsparameter werden aufgelistet, wenn die Funktion definiert wird. Versteckte Funktionsparameter (Argumente) sind die realen Werte, die beim Aufruf der Funktion an die Funktion übergeben werden.

参数规则
JavaScript 函数定义时参数没有指定数据类型。
JavaScript 函数对隐藏参数(arguments)没有进行检测。
JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
默认参数
如果函数在调用时缺少参数,参数会默认设置为: undefined

有时这是可以接受的,但是建议最好为参数设置一个默认值:


function myFunction(x, y) {
  if (y === undefined) {
     y = 0;
  } 
}
Nach dem Login kopieren

或者,更简单的方式:


function myFunction(x, y) {
  y = y || 0;
}
Nach dem Login kopieren

Note 如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。

Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象.argument 对象包含了函数调用的参数数组。通过这种方式你可以很方便的找到最后一个参数的值:


x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  var i, max = 0;
  for (i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}
Nach dem Login kopieren

或者创建一个函数用来统计所有数值的和:


x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  var i, sum = 0;
  for (i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele für JavaScript-Funktionsaufrufe und Parameterübergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage