call, apply und bind

function.bind ()

function.bind() führt die Funktion nicht aus, sondern gibt eine Funktion zurück, die später ausgeführt werden kann – z.B., wenn später ein Event eintritt. So bleibt der Kontext in asynchronen Callbacks und Events erhalten.

bind() ist eine elegante Methode, um einen oder mehrere Parameter an eine Callback-Funktion zu übergeben, ohne dass die Funktion sofort aufgerufen wird. Ein Beispiel für die Anwendung von bind() ist ein addEventListener, der eine EventHandler-Funktion für eine Gruppe von Elementen ausführt, um ein vertikales Akkordeon zu animieren.

<div class="demo">
	<div class="box box1 boxAni"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
	<div class="box box4"></div>
</div>

const boxen = document.querySelectorAll(".box");

const handleStackMove = function(elem) {
	console.log (this.message)
	document.querySelector(".boxAni").classList.remove("boxAni");
	elem.classList.add("boxAni");
}

const context = {
	message : "Das ist mein Akkordeon"
}

boxen.forEach ((item) => {
	item.addEventListener ("click", 
		handleStackMove.bind(context, item)
	)
});

function.call

.bind(), wenn eine Funktion später in einem bestimmten Kontext aufgerufen werden soll (z.B. bei Events),
.call() / .apply(), wenn eine Funktion sofort aufgerufen werden soll und den Kontext ändert.

Das einfach Objekt satz1 hat keine Methoden, die Methode mwst hat keine Eigenschaft num, gibt aber this.num zurück.

let satz1 = { num:19 };

let mwst = function (a) {
   return this.num * a / 100; 
}

mwst.call( satz1, 100);

Das Ergebnis des Aufrufs mwst.call( satz1, 100) ist 19. Die Funktion könnte genauso für ein zweites Objekt satz2 = { num:11 } aufgerufen werden.

19

Wenn die Funktion mehrere Parameter hat, werden sie allesamt im call-Aufruf aufgeführt.

let obj = { num: 2 };
let sum = function (a, b, c) {
   return this.num + a + b + c; 
}

sum.call( obj, 4, 6, 8);

Das Ergebnis wäre wie erwartet

20

Ein call-Aufruf mit einem Objekt, das mehrere Elemente hat:

let obj = { a: 2, b: 8 };
let sum = function (c) {
   console.log (this.a + this.b + c);
}

sum.call ( obj, 3);

13

function.apply

Anstelle der drei Parameter könnte ein Array übergeben werden, dann wäre der Aufruf apply anstelle von call.

let obj = { num:2 };
let arr = [3, 5, 9];
let add = function (a, b, c) {
   //console.log ("apply " + this.num + a + b + c);
}
add.apply( obj, arr);