|
| 1 | +## Classes |
| 2 | + |
| 3 | +> ES6 class, is just a syntatic sugar over the old way we used to handle it, so actually behind the scene, the method will be added to the class using the prototype! |
| 4 | +
|
| 5 | +```js |
| 6 | +class Person{ |
| 7 | + constructor(fname, lname){ // assigning properties in the constructor |
| 8 | + this.fname = fname; |
| 9 | + this.lname = lname; |
| 10 | + } |
| 11 | + |
| 12 | + getFullName(){ |
| 13 | + // return this.fname + ' ' + this.lname; |
| 14 | + return `${this.fname} ${this.lname}`; |
| 15 | + } |
| 16 | + |
| 17 | + |
| 18 | + // static method: only callable outside the class and cann't be referenced from inside (or another method) |
| 19 | + static register(...args) { // rest (accepts all arguments when registering a new user) |
| 20 | + return new Person(...args) //spread (pass all arguments to the constructors' arguments - which are already in an array format) |
| 21 | + } |
| 22 | +} |
| 23 | + |
| 24 | + |
| 25 | +let person1 = new Person('Ehsan','ZB'); |
| 26 | +console.log(person1.getFullName()); |
| 27 | + |
| 28 | +let person2 = new Person(); |
| 29 | +person2.fname = 'Massih'; |
| 30 | +person2.lname = 'Hazratoo'; |
| 31 | +console.log(person2.getFullName()); |
| 32 | + |
| 33 | +// note that while we are calling a static method, we won't need to create an instance of a class with new keyword! (just directly call the method) |
| 34 | +let person3 = Person. register( 'asghar', '[email protected]'); |
| 35 | +console.log(person3); |
| 36 | +``` |
| 37 | + |
| 38 | +#### ES5 (making a class) |
| 39 | + |
| 40 | +> remember about the side effect and downsides of defining the method inside the constructor function in which, it will be redefined (recreate) for each instance of the user (in this example, user) --> memory problem! instead, it's recommended to attach the method to the prototype, so every instance of the user will SHARE the method (rather than recreating it in memory) |
| 41 | +
|
| 42 | +```js |
| 43 | +// 1. define the constructor function |
| 44 | +function User(username, email) { |
| 45 | + this.username = username; |
| 46 | + this.email = email; |
| 47 | +} |
| 48 | + |
| 49 | +// 2. add a method to the class |
| 50 | +User.prototype.changeEmail = function(newEmail) { |
| 51 | + this.email = newEmail; |
| 52 | +} |
| 53 | + |
| 54 | +let user = new User( 'Ehsan', '[email protected]'); |
| 55 | +user. changeEmail( '[email protected]'); |
| 56 | + |
| 57 | +console.log(user); |
| 58 | +console.dir(user); |
| 59 | +``` |
| 60 | + |
| 61 | +> note that classes are FIRST CLASS CITIZEN in ES6! so we can pass them around anywhere. for example we call pass a class as an argument. (it can be passed though as an function argument) |
| 62 | +
|
| 63 | +```js |
| 64 | +function log(strategy) { |
| 65 | + strategy.handle(); |
| 66 | +} |
| 67 | + |
| 68 | + |
| 69 | +// way#1 |
| 70 | +log(new class { |
| 71 | + handle() { |
| 72 | + console.log('handling .....'); |
| 73 | + } |
| 74 | +}); |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | +// way#2 |
| 79 | +class ConsoleLogger { |
| 80 | + handle() { |
| 81 | + console.log('handling .....'); |
| 82 | + } |
| 83 | +} |
| 84 | + |
| 85 | +log(new ConsoleLogger); |
| 86 | +``` |
0 commit comments