1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
title: Function.prototype.call()
slug: Web/JavaScript/Reference/Global_Objects/Function/call
tags:
- Function
- JavaScript
- Method
translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
---
<div>{{JSRef}}</div>
<p>Die <code><strong>call()</strong></code> Methode ruft eine Funktion mit dem Argument this und den individuellen Parametern auf.</p>
<div class="note">
<p><strong>Hinweis:</strong> Die Syntax dieser Funktion ist nahezu identisch zu {{jsxref("Function.prototype.apply", "apply()")}}. Der Unterschied ist, dass <code>call()</code> eine <strong>Liste von Argumenten</strong> und <code>apply()</code> einen einzelnen <strong>Array von Argumenten</strong> akzeptiert.</p>
</div>
<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><code><var>fun</var>ction.call(<var>thisArg</var>, <var>arg1</var>, <var>arg2</var>, ...)</code></pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>thisArg</code></dt>
<dd>Optional. Der Wert von <code>this</code>, der für den Aufruf der Funktion <em><code>function</code></em> genutzt wird. Zu beachten ist, dass <code>this</code> möglicherweise nicht der Wert ist, den die Methode sieht: Wenn die Methode eine Funktion in {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}} ist, werden {{jsxref("Global_Objects/null", "null")}} und {{jsxref("Global_Objects/undefined", "undefined")}} mit dem globalen Objekt ersetzt und primitive Werte werden in ein Hüllobjekt umgewandelt.</dd>
<dt><code>arg1, arg2, ...</code></dt>
<dd>Argumente für das Objekt.</dd>
</dl>
<h3 id="Rückgabewert">Rückgabewert</h3>
<p>Das Ergebnis der aufgerufenen Funktion mit dem spezifischen <code><strong>this</strong></code> Wert und Parametern.</p>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Beim Aufruf einer existierenden Funktion können Sie für <code>this</code> ein neues Objekt zuweisen. <code>this</code> verweist auf das aktuelle Objekt, also das aufrufende Objekt. Mit call können Sie eine Methode schreiben und an ein anderes Objekt vererben, ohne die Methode für das neue Objekt neuzuschreiben.</p>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Nutzung_von_call_um_Konstruktoren_für_ein_Objekt_zu_verketten">Nutzung von <code>call</code>, um Konstruktoren für ein Objekt zu verketten</h3>
<p>Man kann <code>call</code> nutzen, um Konstruktoren für ein Objekt, ähnlich wie in Java, zu verketten. Im folgenden Beispiel wird der Konstruktor für das <code>Product</code> Objekt mit zwei Parametern, <code>name</code> und <code>price</code>, definiert. Zwei andere Funktionen <code>Food</code> und <code>Toy</code> rufen <code>Product</code> auf und übergeben <code>this</code>, <code>name</code> und <code>price</code>. <code>Product</code> initialisiert die Eigenschaften <code>name</code> und <code>price</code> und beide speziellen Funktionen definieren <code>category</code>.</p>
<pre class="brush: js">function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
}
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
}
var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
</pre>
<h3 id="Nutzung_von_call_zum_Aufruf_einer_anonymen_Funktion">Nutzung von <code>call</code> zum Aufruf einer anonymen Funktion</h3>
<p>In diesem komplett konstruierten Beispiel erstellen wir eine anonyme Funktion und nutzen <code>call</code>, um diese für jedes Objekt in einem Array aufzurufen. Der Hauptnutzen für die Nutzung anonymer Funktionen hier, ist das hinzufügen einer Print-Funktion für jedes Objekt, welche den rechten Index des Objekts in dem eingegebenen Array ausgeben kann. Die Übergabe des Objektes als <code>this</code>-Wert ist hier nicht zwingend erforderlich, wurde aber zur Veranschaulichung genutzt.</p>
<pre class="brush: js">var animals = [
{ species: 'Lion', name: 'King' },
{ species: 'Whale', name: 'Fail' }
];
for (var i = 0; i < animals.length; i++) {
(function(x) {
this.print = function() {
console.log('#' + x + ' ' + this.species
+ ': ' + this.name);
}
this.print();
}).call(animals[i], i);
}
</pre>
<h3 id="Einsatz_von_call_zum_aufrufen_einer_Funktion_mit_spezifiziertem_Kontext_für_'this'">Einsatz von <code>call</code> zum aufrufen einer Funktion mit spezifiziertem Kontext für '<code>this</code>'</h3>
<p>Im unten stehenden Beispiel wird das <code>this</code>Objekt der <code>greet</code> Funktion beim Aufruf auf <code>obj</code> gesetzt.</p>
<pre class="brush: js">function greet() {
var reply = [this.animal, 'typically sleep betreen', this.sleepDuration].join(' ');
console.log(reply);
}
var obj = {
animal: 'cats', sleepDuration: '12 and 16 hours'
};
greet.call(obj); // cats typically sleep between 12 and 16 hours
</pre>
<h3 id="Eine_Funktion_mit_call_ausführen_ohne_den_ersten_Parameter_zu_setzen.">Eine Funktion mit <code>call</code> ausführen ohne den ersten Parameter zu setzen.</h3>
<p>Im unten stehenden Beispiel wird die <code>display</code> Funktion aufgerufen ohne den ersten Parameter zu übergeben. Wenn der erste Parameter nicht übergeben wird, ist <code>this</code> das globale Objekt.</p>
<pre class="brush: js">var sData = 'Wisen';
function display(){
console.log('sData value is %s', this.sData);
}
display.call(); // sData value is Wisen
</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ES1')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Initiale Definition. Implementiert in JavaScript 1.3.</td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<div>
<p>{{Compat("javascript.builtins.Function.call")}}</p>
</div>
<h2 id="See_also" name="See_also">Siehe auch</h2>
<ul>
<li>{{jsxref("Function.prototype.bind()")}}</li>
<li>{{jsxref("Function.prototype.apply()")}}</li>
<li><a href="/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Einführung in objektorientiertes JavaScript</a></li>
</ul>
|
