#ravenclawstudent | Explore Tumblr posts and blogs

freyayuki · 6 years ago

Text

freeCodeCamp Object Oriented Programming Notes Part 2

I’m currently going through the new freeCodeCamp learning curriculum. I just finished the first part, which was the Responsive Web Design Certification course. Part of this course was to make responsive web design projects.

Check out the following articles for the notes I took while going through said course:

Flexbox Notes

CSS Grid Notes

Now that I’m done with the Responsive Web Design Certification course, the next course is the Javascript Algorithms And Data Structures Certification course. Check out this post for a list of all the notes I took while going through the first 5 parts of this course.

The sixth part of the JavaScript course is Basic Algorithm Scripting. Check out the notes I took while going through this course:

Part 1

Part 2

The seventh part of the JavaScript course is Object Oriented Programming. This is part 2 of the notes I took while going through said course. You can check out part 1 here.

You can find the Object Oriented Programming course here: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming

Remember to Set the Constructor Property when Changing the Prototype

Define the constructor property on the Dog prototype.

Understand Where an Object’s Prototype Comes From

an object inherits its prototype directly from the constructor function that created it. For example, here the Bird constructor creates the duck object:

function Gryffindor(name) { this.name = name; } let ron = new Gryffindor("Ron Weasley"); Gryffindor.prototype.isPrototypeOf(ron); console.log(Gryffindor.prototype.isPrototypeOf(ron)); //returns true

Use isPrototypeOf to check the prototype of beagle.

function Dog(name) { this.name = name; } let beagle = new Dog("Snoopy"); Dog.prototype.isPrototypeOf(beagle); console.log(Dog.prototype.isPrototypeOf(beagle)); //returns true

Understand the Prototype Chain

Modify the code to show the correct prototype chain.

Your code should show that Object.prototype is the prototype of Dog.prototype

function Dog(name) { this.name = name; } let beagle = new Dog("Snoopy"); Dog.prototype.isPrototypeOf(beagle); // => true Object.prototype.isPrototypeOf(Dog.prototype); //returns true

function RavenclawStudent(name) { this.name = name; } console.log(typeof RavenclawStudent.prototype); //returns object console.log(Object.prototype.isPrototypeOf(RavenclawStudent.prototype)); //returns true console.log(RavenclawStudent.hasOwnProperty("name")); //returns true var luna = new RavenclawStudent("Luna Lovegood"); console.log(luna.hasOwnProperty("name")); //returns true

Use Inheritance So You Don't Repeat Yourself

The eat method is repeated in both Cat and Bear. Edit the code in the spirit of DRY by moving the eat method to the Animalsupertype.

Inherit Behaviors from a Supertype

create a supertype called Animal that defines behaviors shared by all animals:

how to reuse Animal's methods inside Bird and Dog without defining them again. It uses a technique called inheritance.

the first step: make an instance of the supertype (or parent).

you can create an instance of Animal using the new operator:

let animal = new Animal();

There are some disadvantages when using this syntax for inheritance. Here's an alternative approach without those disadvantages:

Use Object.create to make two instances of Animal named duck and beagle.

Set the Child's Prototype to an Instance of the Parent

the first step for inheriting behavior from the supertype(or parent) Animal: making a new instance of Animal.

the next step: set the prototype of the subtype(or child)—in this case, Bird—to be an instance of Animal.

Modify the code so that instances of Dog inherit from Animal.

Reset an Inherited Constructor Property

Fix the code so duck.constructor and beagle.constructor return their respective constructors.

Add Methods After Inheritance

Add all necessary code so the Dog object inherits from Animal and the Dog's prototype constructor is set to Dog. Then add a bark()method to the Dog object so that beagle can both eat()and bark(). The bark()method should print "Woof!" to the console.

function Student() {} Student.prototype.info = () => `Young witch or wizard learning magic in school.`; function HogwartsStudent(name) { this.name = name; } HogwartsStudent.prototype = Object.create(Student.prototype); HogwartsStudent.prototype.constructor = HogwartsStudent; HogwartsStudent.prototype.school = () => `Witch or wizard studying in Hogwarts School of Witchcraft and Wizardry.`; var dean = new HogwartsStudent("Dean Thomas"); console.log(dean.info()); //returns Young witch or wizard learning magic in school. console.log(dean.school()); //returns Witch or wizard studying in Hogwarts School of Witchcraft and Wizardry. console.log(dean instanceof HogwartsStudent); //returns true

Override Inherited Methods

an object can inherit its behavior (methods) from another object by cloning its prototype object:

Here's an example of Bird overriding the eat()method inherited from Animal:

Override the fly()method for Penguin so that it returns "Alas, this is a flightless bird."

Use a Mixin to Add Common Behavior Between Unrelated Objects

behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like Bird and Airplane. They can both fly, but a Bird is not a type of Airplane and vice versa.

Create a mixin named glideMixin that defines a method named glide. Then use the glideMixin to give both bird and boat the ability to glide.

Use Closure to Protect Properties Within an Object from Being Modified Externally

Here getHachedEggCount is a privileged method, because it has access to the private variable hatchedEgg. This is possible because hatchedEgg is declared in the same context as getHachedEggCount. In JavaScript, a function always has access to the context in which it was created. This is called closure.

Change how weight is declared in the Bird function so it is a private variable. Then, create a method getWeight that returns the value of weight.

function Bird() { let weight = 15; this.getWeight = function() { return weight; } }

function HogwartsFounders() { var founders = "The 4 Hogwarts Founders are: Slytherin, Hufflepuff, Ravenclaw, and Gryffindor."; this.getFounders = () => founders; } var rowena = new HogwartsFounders(); console.log(rowena.getFounders()); //returns The 4 Hogwarts Founders are: Slytherin, Hufflepuff, Ravenclaw, and Gryffindor. var helga = new HogwartsFounders(); console.log(helga.getFounders()); //returns The 4 Hogwarts Founders are: Slytherin, Hufflepuff, Ravenclaw, and Gryffindor.

Understand the Immediately Invoked Function Expression (IIFE)

Rewrite the function makeNest and remove its call so instead it's an anonymous immediately invoked function expression (IIFE).

function makeNest() { console.log("A cozy nest is ready"); } makeNest();

Answer:

(function () { console.log("A cozy nest is ready"); })(); //this function immediately outputs or returns A cozy nest is ready

More examples:

(function() { console.log("The Chamber of Secrets has been opened. Enemies of the heir beware."); }) (); //this function is anonymous //this function is immediately called or executed //returns "The Chamber of Secrets has been opened. Enemies of the heir beware." right away

(() => `I solemnly swear that I am up to no good!`)(); //this function immediately returns "I solemnly swear that I am up to no good!"

(() => { var x = 20; var y = 20; var answer = x + y; console.log(answer); })(); //immediately returns 40

Use an IIFE to Create a Module

Create a module named funModule to wrap the two mixinsisCuteMixin and singMixin. funModule should return an object.

funModule.isCuteMixin should access a function.

funModule.singMixin should access a function.

let isCuteMixin = function(obj) { obj.isCute = function() { return true; }; }; let singMixin = function(obj) { obj.sing = function() { console.log("Singing to an awesome tune"); }; };

Answer:

//or, using arrow functions let funModule = (() => { return { isCuteMixin: (obj) => { obj.isCute = () => true; }, singMixin: (obj) => { obj.sing = () => `Singing to an awesome tune`; } } }) ();

More examples:

#object oriented programming #how to code #freecodecamp #learning resources #javascript #learn programming #my notes #learn js #learn how to code #resources #js #learn to code #learn javascript #programming #coding #javascript object oriented programming

0 notes