Created
January 27, 2020 19:51
-
-
Save igorvolnyi/9ea80806b33088ab9fb3195e143d5bac to your computer and use it in GitHub Desktop.
Inheritance vs composition in JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function createProgrammer(name) { | |
const programmer = { name }; | |
return { | |
...programmer, | |
...canCode(programmer) | |
}; | |
} | |
function canCode({ name }) { | |
return { | |
code: () => console.log(`${name} is coding...`) | |
}; | |
} | |
const programmer = createProgrammer('Fabriccio'); | |
programmer.code(); | |
function createFrontend(name) { | |
const programmer = createProgrammer(name); | |
return { | |
...programmer, | |
...canAngular(programmer) | |
}; | |
} | |
function canAngular({ name }) { | |
return { | |
angular: () => console.log(`${name} is creating Angular app...`) | |
}; | |
} | |
const frontend = createFrontend('Juan'); | |
frontend.code(); | |
frontend.angular(); | |
function createBackend(name) { | |
const programmer = createProgrammer(name); | |
return { | |
...programmer, | |
...canNodejs(programmer) | |
}; | |
} | |
function canNodejs({ name }) { | |
return { | |
nodejs: () => console.log(`${name} is writing on NodeJS...`) | |
}; | |
} | |
const backend = createBackend('Pedro'); | |
backend.code(); | |
backend.nodejs(); | |
function createFullstack(name) { | |
const programmer = createProgrammer(name); | |
return { | |
...programmer, | |
...canAngular(programmer), | |
...canNodejs(programmer) | |
}; | |
} | |
const fullstack = createFullstack('Masha'); | |
fullstack.code(); | |
fullstack.nodejs(); | |
fullstack.angular(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Programmer { | |
constructor(name) { | |
this.name = name; | |
} | |
code() { | |
console.log(`${this.name} is coding...`); | |
} | |
} | |
class Frontend extends Programmer { | |
angular() { | |
console.log(`${this.name} is creating Angular app...`); | |
} | |
} | |
class Backend extends Programmer { | |
nodejs() { | |
console.log(`${this.name} is programming on Node JS...`); | |
} | |
} | |
const programmer = new Programmer('Billy'); | |
programmer.code(); | |
const frontend = new Frontend('Radj'); // Dude from India | |
frontend.code(); | |
frontend.angular(); | |
const backend = new Backend('Huy'); // Dude from China | |
backend.code(); | |
backend.nodejs(); | |
// Now here is the problem. | |
class Fullstack extends Frontend { | |
// We have to duplicate nodejs() method of Backend here... | |
nodejs() { | |
console.log(`${this.name} is programming on Node JS...`); | |
} | |
} | |
// See composition.js for solution. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment