co oznacza bind(this)?

Question

Witam,

mam pewien problem, otóż uczę się języka JavaScript i ostatnio zatrzymałem się na jednej rzeczy, której nie rozumiem. Otóż co oznacza bind(this) po kropce? Np. w tym przykładzie

 document.querySelector('#button1').addEventListener("click", this.printBig.bind(this));

co oznacza this.printBig.bind(this)?

Z góry dziękuję :)

Answer 1

bind tworzy kopię danej funkcji ze sztywno ustawionym kontekstem this. W tym wypadku wymuszamy, żeby wewnątrz printBig this zawsze wskazywało na obiekt posiadający tę metodę zamiast na element DOM, na który klikniemy.

Comments

Comandeer był szybszy, więc tylko dodam kilka przykładów z różnym this na podstawie kodu @Arcix: https://codepen.io/anon/pen/PXKRGw

Po kliknięciu w przycisk, w konsoli widać na co wskazuje this.

Przypadki z arrow function pominąłem.

---

@Comandeer,

bind tworzy kopię danej funkcji

jesteś pewien tego tworzenia kopii? Pytam, ponieważ kojarzę, że bind nie tworzył kopii w takim znaczeniu jak byśmy tego pewnie oczekiwali, ale jest jakby to powiedzieć wraperem na bazową funkcję i to ją de facto wywołuje... ale popraw mnie jeśli się mylę bo może coś mi się pokręciło...

---

Tak, to prawda, to bardziej wrapper: https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects

Z kopią chodziło mi o to, że otrzymujemy dokładnie to samo działanie, a jedyną różnicą jest zmienione this.

---

jedyną różnicą jest zmienione this

Jedyną to nie, bo przecież można też odgórnie przypisać parametry i przez to w trakcie wywołania "zdziwić się", że funkcja dostaje nie to, czego byśmy się spodziewali:

function foo(param1, param2) {
	console.log('param1:',param1, 'param2:', param2);
}

foo('pierwszy', 'drugi'); // param1: pierwszy param2: drugi

var boundFoo = foo.bind(null, 'zonk');
boundFoo('pierwszy', 'drugi'); // param1: zonk param2: pierwszy