hinzugefügt bind Methode, closures, IIFE (Immediatelly Invoked Function Expresion)

2022-11-04 13:53:45 +01:00 · 2022-11-04 13:53:45 +01:00 · 8291ed21c3
commit 8291ed21c3
parent b7c79cc0c2
5 changed files with 112 additions and 3 deletions
--- a/Expert/chapter10/ImmediatelyInvokedFunctionExpression.js
+++ b/Expert/chapter10/ImmediatelyInvokedFunctionExpression.js
@ -0,0 +1,11 @@
+// const runOnce = function () {
+//   console.log("This will never run again");
+// };
+
+// eine solche Methode kann man nicht manuel ausführen, sie wird noch einmal bei dem Laden des Scripts ausgeführt
+// Ideal für die ursprünglichen Einstellungen der Resourcen einer WEB-Applikation (IIFE-Immediatelly Invoked Function Expression)
+(function () {
+  console.log("This will never run again");
+})();
+
+() => console.log("This will also never run again")();
--- a/Expert/chapter10/bindMethod.js
+++ b/Expert/chapter10/bindMethod.js
@ -0,0 +1,68 @@
+const lufthansa = {
+  airline: "Lufthansa",
+  iataCode: "LH",
+  bookings: [],
+
+  book: function (flightNumber, passengerName) {
+    console.log(
+      `${passengerName} booked a seat on ${this.iataCode}${flightNumber}`
+    );
+    this.bookings.push({
+      flight: `${this.iataCode}${flightNumber}`,
+      passengerName,
+    });
+  },
+};
+
+const book = lufthansa.book;
+
+const wizzair = {
+  airline: "Wizzair Air Hungary",
+  iataCode: "WZ",
+  bookings: [],
+};
+
+// binding der Methode book aus dem lufthasa Objekt dem wizzair Objekt
+const bookEW = book.bind(wizzair);
+// Verwendung der book Methode im wizzair Objekt, und ihre Ausführung
+bookEW(663, "David A.");
+
+console.log(wizzair.bookings);
+
+const bookWZ52 = book.bind(wizzair, 52);
+bookWZ52("David Aster");
+bookWZ52("Joanne Aster");
+console.log(wizzair.bookings);
+
+lufthansa.planes = 300;
+lufthansa.buyPlane = function () {
+  console.log(this);
+  this.planes++;
+
+  console.log(this.planes);
+};
+
+// console.log(lufthansa.planes);
+lufthansa.buyPlane();
+
+// document
+//   .querySelector(".buy")
+//   .addEventListener("click", lufthansa.buyPlane.bind(lufthansa));
+
+// Partial Applikation
+const addTAX = (rate, value) => value + rate * value;
+const addVAT = addTAX.bind(null, 0.22);
+// addTAX = (rate, value) => value + 0.22 * value;
+// Mehrwertsteuer wird da immer 22% sein
+console.log(addVAT(120));
+
+// Das Gleiche kann man auch mit einer Methode erreichen, die eine Methode zurück gibt
+const addTAX1 = function (rate) {
+  return function (value) {
+    return value + value * rate;
+  };
+};
+
+const addVAT1 = addTAX1(0.22);
+console.log(addVAT1(100));
+console.log(addVAT1(120));
--- a/Expert/chapter10/closures.js
+++ b/Expert/chapter10/closures.js
@ -0,0 +1,27 @@
+const secureBooking = function () {
+  let passengerCount = 0;
+  return function () {
+    passengerCount++;
+    console.log(`${passengerCount} passengers`);
+  };
+};
+
+const booker = secureBooking();
+booker();
+booker();
+booker();
+
+// console.dir(secureBooking);
+
+const boardPassengers = function (n, wait) {
+  const perGroup = n / 3;
+
+  setTimeout(function () {
+    console.log(`We are now boarding all ${n}`);
+    console.log(`There are 3 groups, each with ${perGroup}`);
+  }, wait * 1000);
+  console.log(`Will start boarding in ${wait} seconds`);
+};
+
+const perGroup = 1000;
+boardPassengers(180, 3);
--- a/Expert/chapter10/index.html
+++ b/Expert/chapter10/index.html
@ -4,10 +4,10 @@
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Callbacks</title>
+    <title>Closer look at functions</title>
  </head>
  <body>
-    <button id="greet">Greet</button>
-    <script src="firstClassFunctions.js"></script>
+    <!-- <button class="buy">Buy Plane</button> -->
+    <script src="closures.js"></script>
  </body>
 </html>
--- a/Expert/chapter10/package.json
+++ b/Expert/chapter10/package.json
@ -0,0 +1,3 @@
+{
+  "type": "module"
+}