d.aster/Front-End
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
David 2022-11-04 13:53:45 +01:00
parent b7c79cc0c2
commit 8291ed21c3
5 changed files with 112 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
javascript/Javascript Expert/chapter10/ImmediatelyInvokedFunctionExpression.js Normal file
View File

@ -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")();

68
javascript/Javascript Expert/chapter10/bindMethod.js Normal file
View File

@ -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));

27
javascript/Javascript Expert/chapter10/closures.js Normal file
View File

@ -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);

6
javascript/Javascript Expert/chapter10/index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Callbacks</title> <title>Closer look at functions</title>
</head> </head>
<body> <body>
<button id="greet">Greet</button> <!-- <button class="buy">Buy Plane</button> -->
<script src="firstClassFunctions.js"></script> <script src="closures.js"></script>
</body> </body>
</html> </html>

3
javascript/Javascript Expert/chapter10/package.json Normal file
View File

@ -0,0 +1,3 @@
{
"type": "module"
}