Szybki trening JavaScript

Klasy

Klasy 01

                
                    class Worker {

                    }

                    console.log(typeof Worker);

💡 Co pojawi się w konsoli ?

Klasy 01

                
                    class Worker {

                    }

                    console.log(typeof Worker);

💡 Co pojawi się w konsoli ?

                    
                        function

Klasy 02

                
                    class Worker {

                    }

                    let worker = new Worker();
                    console.log(worker instanceof Worker);

💡 Co pojawi się w konsoli ?

Klasy 02

                
                    class Worker {

                    }

                    let worker = new Worker();
                    console.log(worker instanceof Worker);

💡 Co pojawi się w konsoli ?

                    
                        true

Klasy 03

                
                    class Worker {
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();
                    console.log(worker.sayWork === Worker.prototype.sayWork);

💡 Co pojawi się w konsoli ?

Klasy 03

                
                    class Worker {
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();
                    console.log(worker.sayWork === Worker.prototype.sayWork);

💡 Co pojawi się w konsoli ?

                    
                        true

Klasy 04

                
                    class Worker {
                        constructor() {
                            console.log('buduje Worker');
                        }
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();

💡 Co pojawi się w konsoli ?

Klasy 04

                
                    class Worker {
                        constructor() {
                            console.log('buduje Worker');
                        }
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();

💡 Co pojawi się w konsoli ?

                    
                        buduje Worker

Klasy 05

                
                    class Worker {

                        constructor() {
                            console.log('buduje Worker');
                        },
                        sayWork() {
                            console.log('work work')
                        }
                    }

💡 Co pojawi się w konsoli ?

Klasy 05

                
                    class Worker {

                        constructor() {
                            console.log('buduje Worker');
                        },
                        sayWork() {
                            console.log('work work')
                        }
                    }

💡 Co pojawi się w konsoli ?

                    
                        Uncaught SyntaxError: Unexpected token ','

Klasy 06

                
                    class Worker {
                        let workerId = 1;
                        constructor() {
                            console.log('buduje Worker');
                        }
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();

💡 Co pojawi się w konsoli ?

Klasy 06

                
                    class Worker {
                        let workerId = 1;
                        constructor() {
                            console.log('buduje Worker');
                        }
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();

💡 Co pojawi się w konsoli ?

                    
                        Uncaught SyntaxError: Unexpected identifier

Klasy 07

                
                    class Worker {
                        let workerId = 1;
                        constructor() {
                            console.log('buduje Worker');
                        }
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();

💡 Co pojawi się w konsoli ?

Klasy 07

                
                    class Worker {
                        let workerId = 1;
                        constructor() {
                            console.log('buduje Worker');
                        }
                        sayWork() {
                            console.log('work work')
                        }
                    }

                    let worker = new Worker();

💡 Co pojawi się w konsoli ?

                    
                        Uncaught SyntaxError: Unexpected identifier

Klasy 08

                
                    let worker = new Worker();

                    class Worker {
                        constructor() {
                            console.log('buduje Worker');
                        }
                    }

💡 Co pojawi się w konsoli ?

Klasy 08

                
                    let worker = new Worker();

                    class Worker {
                        constructor() {
                            console.log('buduje Worker');
                        }
                    }

💡 Co pojawi się w konsoli ?

                    
                        Uncaught ReferenceError: Worker is not defined

Klasy 09

                
                    let worker = class Worker {
                        constructor() {
                            console.log('buduje Worker');
                        }
                    };

                    new worker();

💡 Co pojawi się w konsoli ?

Klasy 09

                
                    let worker = class Worker {
                        constructor() {
                            console.log('buduje Worker');
                        }
                    };

                    new worker();

💡 Co pojawi się w konsoli ?

                    
                        buduje Worker

Klasy 10

                
                    let Worker = function() {

                        console.log('buduje Worker');
                    };

                    let worker  = {};
                    Worker.call(worker);

💡 Co pojawi się w konsoli ?

Klasy 10

                
                    let Worker = function() {

                        console.log('buduje Worker');
                    };

                    let worker  = {};
                    Worker.call(worker);

💡 Co pojawi się w konsoli ?

                    
                        buduje Worker

Klasy 11

                
                    class Worker {

                        constructor() {
                            console.log('Buduje Worker');
                        }
                    }

                    let worker  = {};
                    Worker.call(worker);

💡 Co pojawi się w konsoli ?

Klasy 11

                
                    class Worker {

                        constructor() {
                            console.log('Buduje Worker');
                        }
                    }

                    let worker  = {};
                    Worker.call(worker);

💡 Co pojawi się w konsoli ?

                    
                        Uncaught TypeError: Class constructor Worker cannot be invoked without 'new'

Klasy 12

                
                    function Solider() {}
                    console.log(window.Solider === Solider);

💡 Co pojawi się w konsoli ?

Klasy 12

                
                    function Solider() {}
                    console.log(window.Solider === Solider);

💡 Co pojawi się w konsoli ?

                    
                        true

Klasy 13

                
                    class Solider {}
                    console.log(window.Solider === Solider);

💡 Co pojawi się w konsoli ?

Klasy 13

                
                    class Solider {}
                    console.log(window.Solider === Solider);

💡 Co pojawi się w konsoli ?

                    
                        false

Klasy 13

                
                    class Solider {}
                    console.log(window.Solider === Solider);

💡 Co pojawi się w konsoli ?

                    
                        false

Dziedziczenie

Klasy 14

                
                    class Solider {
                        constructor() {
                            console.log('Buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                    
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

Klasy 14

                
                    class Solider {
                        constructor() {
                            console.log('Buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                    
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

                    
                        Buduje Solider

Klasy 15

                
                    class Solider {
                        constructor(name) {
                            console.log('buduje ' + name);
                        }
                    }
                    class SoftwareSolider extends Solider {
                    
                    }

                    let s = new SoftwareSolider('Czesława');

💡 Co pojawi się w konsoli ?

Klasy 15

                
                    class Solider {
                        constructor(name) {
                            console.log('buduje ' + name);
                        }
                    }
                    class SoftwareSolider extends Solider {
                    
                    }

                    let s = new SoftwareSolider('Czesława');

💡 Co pojawi się w konsoli ?

                    
                        Buduje Czesława

Klasy 16

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

Klasy 16

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

                    
                        buduje Solider,buduje SoftwareSolider

Klasy 17

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

Klasy 17

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

                    
                        Must call super constructor in derived class before accessing

Klasy 18

                
                    class Solider {
                        // constructor() {
                        //     console.log('buduje Solider');
                        // }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

Klasy 18

                
                    class Solider {
                        // constructor() {
                        //     console.log('buduje Solider');
                        // }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

                    
                        Must call super constructor in derived class before accessing

Klasy 19

                
                    class Solider {
                        // constructor() {
                        //     console.log('buduje Solider');
                        // }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

Klasy 19

                
                    class Solider {
                        // constructor() {
                        //     console.log('buduje Solider');
                        // }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            //super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

                    
                        Must call super constructor in derived class before accessing

Klasy 20

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

Klasy 20

                
                    class Solider {
                        constructor() {
                            console.log('buduje Solider');
                        }
                    }
                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                            console.log('buduje SoftwareSolider');
                        }
                    }

                    let s = new SoftwareSolider();

💡 Co pojawi się w konsoli ?

                    
                        buduje Solider,buduje SoftwareSolider

Klasy 22

                
                    class Solider {

                        getAttackPoints() {
                            return 15;
                        }
                    }
                    class SoftwareSolider extends Solider {
                    
                    }

                    let s = new SoftwareSolider();
                    console.log(s.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 22

                
                    class Solider {

                        getAttackPoints() {
                            return 15;
                        }
                    }

                    class SoftwareSolider extends Solider {
                    
                    }

                    let s = new SoftwareSolider();
                    console.log(s.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 23

                
                    class Solider {

                        getAttackPoints() {
                            return 15;
                        }
                    }

                    class SoftwareSolider extends Solider {
                        getAttackPoints() {
                            return 30;
                        }
                    }

                    let s = new SoftwareSolider();
                    console.log(s.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 23

                
                    class Solider {

                        getAttackPoints() {
                            return 15;
                        }
                    }

                    class SoftwareSolider extends Solider {
                        getAttackPoints() {
                            return 30;
                        }
                    }

                    let s = new SoftwareSolider();
                    console.log(s.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 24

                
                    class Solider {

                        getAttackPoints() {
                            return 15;
                        }
                    }

                    class SoftwareSolider extends Solider {
                        getAttackPoints() {
                            return super.getAttackPoints() + 16;
                        }
                    }

                    let s = new SoftwareSolider();
                    console.log(s.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 24

                
                    class Solider {

                        getAttackPoints() {
                            return 15;
                        }
                    }

                    class SoftwareSolider extends Solider {
                        getAttackPoints() {
                            return super.getAttackPoints() + 16;
                        }
                    }

                    let s = new SoftwareSolider();
                    console.log(s.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 25

                
                    let Solider ={
                        getAttackPoints() {
                            return 15;
                        }
                    };
                    
                    let SoftwareSolider = {
                        getAttackPoints() {
                            return super.getAttackPoints() + 16;
                        }
                    };
                    
                    Object.setPrototypeOf(SoftwareSolider,Solider);
                    console.log(SoftwareSolider.getAttackPoints());

💡 Co pojawi się w konsoli ?

Klasy 25

                
                    let Solider ={
                        getAttackPoints() {
                            return 15;
                        }
                    };
                    
                    let SoftwareSolider = {
                        getAttackPoints() {
                            return super.getAttackPoints() + 16;
                        }
                    };
                    
                    Object.setPrototypeOf(SoftwareSolider,Solider);
                    console.log(SoftwareSolider.getAttackPoints());

💡 Co pojawi się w konsoli ?

Właściwości i instancje klas

Właściwości i instancje klas 1

                
                    class Solider {
                        constructor() {
                            this.name = "Czesław";
                        }
                    }

                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                        }
                    }
                    
                    let s = new SoftwareSolider();
                    console.log(s.name);

💡 Co pojawi się w konsoli ?

Właściwości i instancje klas 1

                
                    class Solider {
                        constructor() {
                            this.name = "Czesław";
                        }
                    }

                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                        }
                    }
                    
                    let s = new SoftwareSolider();
                    console.log(s.name);

💡 Co pojawi się w konsoli ?

                    
                        Czesław

Właściwości i instancje klas 2

                
                    class Solider {
                        constructor() {
                            let name = "Czesław";
                        }
                    }

                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                        }
                    }
                    
                    let s = new SoftwareSolider();
                    console.log(s.name);

💡 Co pojawi się w konsoli ?

Właściwości i instancje klas 2

                
                    class Solider {
                        constructor() {
                            let name = "Czesław";
                        }
                    }

                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                        }
                    }
                    
                    let s = new SoftwareSolider();
                    console.log(s.name);

💡 Co pojawi się w konsoli ?

                    
                        undefined

Właściwości i instancje klas 3

                
                    class Solider {
                        constructor() {
                            this.name = "Czesław";
                        }
                    }

                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                            this.name = this.name +  " Pfu";
                        }
                    }
                    
                    let s = new SoftwareSolider();
                    console.log(s.name);

💡 Co pojawi się w konsoli ?

Właściwości i instancje klas 3

                
                    class Solider {
                        constructor() {
                            this.name = "Czesław";
                        }
                    }

                    class SoftwareSolider extends Solider {
                        constructor() {
                            super();
                            this.name = this.name +  " Pfu";
                        }
                    }
                    
                    let s = new SoftwareSolider();
                    console.log(s.name);

💡 Co pojawi się w konsoli ?

                    
                        Czesław Pfu

Właściwości i instancje klas 4

                
                    class Solider {

                        constructor() {
                            this.name = "Czesław";
                        }
                    
                        getName() {
                            return this.name; 
                        }
                    
                        setName(val) {
                            this.name = val;
                        }
                    }

Właściwości i instancje klas 5

                
                    class User {
                        name = "Anonymous";
                      
                        sayHi() {
                          console.log(`Hello, ${this.name}!`);
                        }
                }

                new User()

💡 Co pojawi się w konsoli ?

Właściwości i instancje klas 5

                
                    class User {
                        name = "Anonymous";
                      
                        sayHi() {
                          console.log(`Hello, ${this.name}!`);
                        }
                }
                
                new User()

💡 Co pojawi się w konsoli ?

                    
                        Hello, Anonymous!

Czy klasa to rzeczywiście tylko funkcja

                
                    // przepisanie klasy User na czystą funkcję

                    // 1. stworzenie konstuktora funkcji
                    function Worker(name) {
                      this.name = name;
                    }
                    
                    // 2. Dodajemy metode do prototypu
                    Worker.prototype.sayHi = function() {
                      console.log(this.name);
                    };
                    
                    // Użycie
                    let worker = new Worker("John");
                    worker.sayHi();

💡 Co pojawi się w konsoli ?

Czy klasa to rzeczywiście tylko funkcja

                
                    // przepisanie klasy User na czystą funkcję

                    // 1. stworzenie konstuktora funkcji
                    function Worker(name) {
                      this.name = name;
                    }
                    
                    // 2. Dodajemy metode do prototypu
                    Worker.prototype.sayHi = function() {
                      console.log(this.name);
                    };
                    
                    // Użycie
                    let worker = new Worker("John");
                    worker.sayHi();

💡 Co pojawi się w konsoli ?

                    
                        John

Statyczne pola

                
                    class Solider {
                        static getDefaultAttack() {
                            return 1;
                        }
                    }
                    
                    console.log(Solider.getDefaultAttack());

💡 Co pojawi się w konsoli ?

Statyczne pola

                
                    class Solider {
                        static getDefaultAttack() {
                            return 1;
                        }
                    }

                    console.log(Solider.getDefaultAttack());

💡 Co pojawi się w konsoli ?

Statyczne pola 2

                
                    class Solider {
                        static getDefaultAttack() {
                            return 1;
                        }
                    }

                    let s = new Solider();
                    console.log(s.getDefaultAttack());

💡 Co pojawi się w konsoli ?

Statyczne pola 2

                
                    class Solider {
                        static getDefaultAttack() {
                            return 1;
                        }
                    }

                    let s = new Solider();
                    console.log(s.getDefaultAttack());

💡 Co pojawi się w konsoli ?

                    
                        Error : Object doesn't support property or method getDefaultAttack()

Statyczne pola 3

                
                    class Solider {
                        static let attack = 0;
                    }

💡 Co pojawi się w konsoli ?

Statyczne pola 3

                
                    class Solider {
                        static let attack = 0;
                    }

💡 Co pojawi się w konsoli ?

                    
                        Error

Statyczne pola 4

                
                    class Solider {
                        static attack = 0;
                    }

💡 Co pojawi się w konsoli ?

Statyczne pola 6

                
                    class Solider {
     
                    }

                    Solider.attack = 0;
                    console.log(Solider.attack);

💡 Co pojawi się w konsoli ?

Statyczne pola 6

            
                class Solider {
 
                }

                Solider.attack = 0;
                console.log(Solider.attack);

💡 Co pojawi się w konsoli ?

1. Idziemy dalej do tablic

2. Idziemy dalej do Modułów

3. Idziemy dalej do Klas

4. Idziemy dalej do Map,Set

5. Extensions

6. Symbols

7. Object Extensions

8. Iteratory

0. Początek