A guide to prototype-based class inheritance in JavaScript

<strong>Computer languages often provide a way for one object to be inherited from another object. The inherited object contains all properties from its parent object. In addition, it will also specify its own set of unique properties.</strong>

Computer languages often provide a way for one object to be inherited from another object. The inherited object contains all properties from its parent object. In addition, it will also specify its own set of unique properties.

Creating A Logical Hierarchy Of Objects

Cat and Dog are inherited from Pet which is inherited from Animal.

A Dog and a Cat share similar traits. Instead of creating two different classes,

we can simply create one class Pet and inherit Cat and Dog from it. But the Pet class itself can also be inherited from the class Animal.

Before We Start

Trying to understand prototypes is like crossing the river going from coding to computer language design. Two completely different areas of knowledge.

Technically, just the light knowledge of the class and extends keywords is enough to write software. Trying to understand prototype is like venturing into the darker corners of language design. And sometimes that can be insightful.

This tutorial alone won’t be enough. I’ve only focused on some important things that hopefully will guide you in the right direction.

Under The Hood

The idea behind object inheritance is to provide structure for a hierarchy of

similar objects. You can also say a child object is ”derived” from its parent.

How prototype chains are created in JavaScript.

Technically, this is what it looks like. Try not to think too much into this. Just know that at the very top of hierarchy there is the Object object. That’s why its own prototype points to null. There’s nothing else above it.

Prototype-based Object Inheritance

JavaScript supports object inheritance via something known as prototypes. There is an object property called prototype attached to each object.

Working with the class and extends keywords is easy but actually understanding how prototype-based inheritance works is not trivial. Hopefully this tutorial will lift at least some of the fog!

Object Constructor Functions

Functions can be used as object constructors. The name of a constructor function usually starts with an uppercase letter to draw the distinction between regular functions. Object constructors are used to create an instance of an object.

Some of the JavaScript built-in objects were already created following the same rules. For example Number, Array and String are inherited from Object. As we discussed earlier, this means that any property attached to Object becomes automatically available on all of its children.

Constructors

It’s impossible to understand prototype without understanding the anatomy of constructor functions.

So, what exactly happens when we create a custom constructor function? Two properties magically appear in our class definition: constructor and prototype.constructor.

They do not point to the same object. Let’s break them down:

Let’s say we define a new class Crane (using either function or class keyword.)

A custom constructor we just created is now attached to the prototype property of our custom Crane class. It’s a link that points to its own constructor. It creates circular logic. But that’s only one piece of the puzzle.

Let’s now take a look at Crane.constructor:

Crane.constructor itself points to the type of the object it was created from.

Because all object constructors are natively functions, the object Crane.constructor points to is an object of type Function, in other words the function constructor.

This dynamic between Crane.prototype.constructor and Crane.constructor is what enables prototype inheritance at a molecular level. You rarely even have to think about this when writing JavaScript code. But this is definitely an interview question.

Let’s briefly go over this again. Crane.prototype.constructor points to its own constructor. It’s almost like saying “I am me.”

Same exact thing happens when you define a class using class keyword:

But, the Crane.constructor property points to Function constructor.

And that’s how the link is established.

Now the Crane object itself can be the ”prototype” of another object. And that object can be the prototype of another object. And so on. The chain can go on forever.

Side Note: In the case of the ES5-style functions, the function itself is the

constructor. But the ES6 class keyword places the constructor inside of its scope. This is just a syntactic difference.

Prototype-Based Inheritance

We should always use the class and extends keywords to create and inherit objects. But they are only a candy wrapper for what actually goes on behind the scenes.

Even though creating object inheritance hierarchies using ES5-style syntax is long outdated and rarely seen among professional software developers, by understanding it you will gain a deeper insight into how it actually works.

Let’s define a new object Bird and add 3 properties: type, color and eggs. Let’s also add 3 methods: fly, walk and lay_egg. Something all birds can do:

Note that I intentionally grayed out the lay_egg method. Remember how we

discussed earlier that Bird.prototype points to its own constructor?

You could have alternatively attached the lay egg method directly to Bird.prototype as shown in the next example:

At first sight it may sound like there is no difference between attaching methods using the this keyword inside Bird and simply adding it directly to the Bird.prototype property. Because it still works right?

But this is not entirely true. I won’t go into the details as of just yet, because I don’t fully understand the distinction here. But I plan on updating this tutorial when I gather up some more insight on the subject.

(comments from prototype veterans are welcome!)

Not All Birds Are Made Alike

The whole point of object inheritance is to use one common class that defines all properties and methods that all children of that class will automatically inherit. This makes code shorter and saves memory.

(Imagine defining the same properties and methods on all of the children objects individually all over again. It would take twice as much memory.)

Let’s create several different types of birds. Even though all of them can still fly, walk and lay_eggs (because they are inherited from main Bird class,) each unique bird type will add its own methods unique to that class. For example, only parrots can talk. And only ravens can solve puzzles. Only a songbird can sing.

Parrot

Let’s create a Parrot and inherit it from Bird:

Parrot is a regular constructor function just like Bird.

The difference is that we call Bird’s constructor with Bird.call and pass the Parrot’s this context, before attaching our own methods. Bird.call simply adds all of its properties and methods to Parrot. In addition to that, we are also adding our own method: talk.

Now parrots can fly, walk, lay eggs and talk! But we never had to define fly walk and lay_eggs methods inside Parrot itself.

Raven

In the same way, let’s create Raven and inherit it from Bird:

Ravens are unique in that they can solve puzzles.

Songbird

Now, let’s create Songbird and inherit it from Bird:

Songbirds can sing.

Testing The Birds

We just created a bunch of different birds with unique abilities. Let’s see what

they’re capable of! Up until now we only defined classes and established their

hierarchical relationship.

In order to work with objects we need to instantiate them:

Let’s instantiate a sparrow using the original Bird constructor:

Sparrow can fly, walk and lay eggs, because it was inherited from Bird that defines all those methods.

But a sparrow cannot talk. Because it is not a Parrot.

Let’s create a parakeet from Parrot class:

Because Parrot is inherited from Bird, we get all of its methods. A parakeet has the unique ability to talk, but it cannot sing! The sing method is available only on objects of type Songbird. Let’s inherit starling from Songbird class:

Finally, let’s create a raven and solve some puzzles:

Using class and extendskeywords

The ES5-style constructors can be a bit cumbersome.

Luckily we now have class and extends keywords to accomplish exactly the same thing we just did in the previous section.

class replaces function

extends and super() replace Bird.call from the previous examples.

Note we must use super() which calls the constructor of the parent class.

This syntax looks a lot more manageable!

Now all we have to do is instantiate the object:

Overview

Class inheritance helps establish a hierarchy of objects.

Classes are the fundamental building blocks of your application design and architecture. They make working with code a bit more human.

Of course, Bird was just an example. In a real-world scenario, it could be anything based on what type of application you’re trying to build.

Vehicle class can be a parent of Motorcycle, Car, or Tank.

Fish can be used to inherit Shark, Goldfish, Pike and so on.

Inheritance helps us write cleaner code and re-purpose the parent object to save memory on repeating object property and method definitions.

By : JavaScript Teacher

*Originally published at *https://medium.freecodecamp.org

Learn More

The Complete JavaScript Course 2019: Build Real Projects!

Become a JavaScript developer - Learn (React, Node,Angular)

JavaScript: Understanding the Weird Parts

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

The Full JavaScript & ES6 Tutorial - (including ES7 & React)

JavaScript - Step By Step Guide For Beginners

The Web Developer Bootcamp

MERN Stack Front To Back: Full Stack React, Redux & Node.js

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20

How to Retrieve full Profile of LinkedIn User using Javascript

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Here we are fetching LinkedIn data like Username, Email and other fields using JavaScript SDK.

Here we have 2 workarounds.

  1. Configuration of linkedIn developer api
  2. Javascript Code to fetch records

Configuration of linkedIn developer api

In order to fetch records, first we need to create developer api in linkedin which will act as token/identity while fetching data from other linkedin accounts.

So to create api, navigate to https://linkedin.com/developer/apps and click on 'Create Application'.

After navigating, fill in details like name, description and other required fields and then submit.

As we submit, it will create Client ID and Client Secret shown below, which we will be using in our code while communicating to fetch records from other LinkedIn account.

Note: We need to provide localhost Url here under Oauth 2.0. I am using my localhost, but you can probably use other production URLs under Oauth 2.0 where your app is configured. It will make your api  consider the Url as trusted which fetching records.

Javascript Code to fetch records

For getting user details like first name, last name,User image can be written as,

<script type="text/javascript" src="https://platform.linkedin.com/in.js">  
    api_key: XXXXXXX //Client ID  
    onLoad: OnLinkedInFrameworkLoad //Method that will be called on page load  
    authorize: true  
</script>  
<script type="text/javascript">  
    function OnLinkedInFrameworkLoad() {  
        IN.Event.on(IN, "auth", OnLinkedInAuth);  
    }  
  
    function OnLinkedInAuth() {  
        IN.API.Profile("me").result(ShowProfileData);  
    }  
  
    function ShowProfileData(profiles) {  
        var member = profiles.values[0];  
        var id = member.id;  
        var firstName = member.firstName;  
        var lastName = member.lastName;  
        var photo = member.pictureUrl;  
        var headline = member.headline;  
        //use information captured above  
        var stringToBind = "<p>First Name: " + firstName + " <p/><p> Last Name: " + lastName + "<p/><p>User ID: " + id + " and Head Line Provided: " + headline + "<p/>"  
        document.getElementById('profiles').innerHTML = stringToBind;  
    }  
</script>    

Kindly note we need to include 'https://platform.linkedin.com/in.js' as src under script type as it will act on this Javascript SDK provided by Linkedin.

In the same way we can also fetch records of any organization with the companyid as keyword.

<head>  
    <script type="text/javascript" src="https://platform.linkedin.com/in.js">  
        api_key: XXXXXXX ////Client ID  
        onLoad: onLinkedInLoad  
        authorize: true  
    </script>  
</head>  
  
<body>  
    <div id="displayUpdates"></div>  
    <script type="text/javascript">  
        function onLinkedInLoad() {  
            IN.Event.on(IN, "auth", onLinkedInAuth);  
            console.log("On auth");  
        }  
  
        function onLinkedInAuth() {  
            var cpnyID = XXXXX; //the Company ID for which we want updates  
            IN.API.Raw("/companies/" + cpnyID + "/updates?event-type=status-update&start=0&count=10&format=json").result(displayCompanyUpdates);  
            console.log("After auth");  
        }  
  
        function displayCompanyUpdates(result) {  
            var div = document.getElementById("displayUpdates");  
            var el = "<ul>";  
            var resValues = result.values;  
            for (var i in resValues) {  
                var share = resValues[i].updateContent.companyStatusUpdate.share;  
                var isContent = share.content;  
                var isTitled = isContent,  
                    isLinked = isContent,  
                    isDescription = isContent,  
                    isThumbnail = isContent,  
                    isComment = isContent;  
                if (isTitled) {  
                    var title = isContent.title;  
                } else {  
                    var title = "News headline";  
                }  
                var comment = share.comment;  
                if (isLinked) {  
                    var link = isContent.shortenedUrl;  
                } else {  
                    var link = "#";  
                }  
                if (isDescription) {  
                    var description = isContent.description;  
                } else {  
                    var description = "No description";  
                }  
                /* 
                if (isThumbnailz) { 
                var thumbnailUrl = isContent.thumbnailUrl; 
                } else { 
                var thumbnailUrl = "http://placehold.it/60x60"; 
                } 
                */  
                if (share) {  
                    var content = "<a target='_blank' href=" + link + ">" + comment + "</a><br>";  
                    //el += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>";  
                    el += "<li><div>" + content + "</div></li>";  
                }  
                console.log(share);  
            }  
            el += "</ul>";  
            document.getElementById("displayUpdates").innerHTML = el;  
        }  
    </script>  
</body>  

We can get multiple metadata while fetching records for any any organization. We can get company updates as shown below.

Conclusion

We can also fetch any company specific data like company job updates/post, total likes, comments, and number of views along with a lot of metadata we can fetch which I have shown below.

Thank you for reading !

7 Best Javascript Iframe Libraries

7 Best Javascript Iframe Libraries

Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. I have compiled 7 best Javascript iframe libraries.

Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. I have compiled 7 best Javascript iframe libraries.

1. Zoid

A cross-domain component toolkit, supporting:

  • Render an iframe or popup on a different domain, and pass down props, including objects and functions
  • Call callbacks natively from the child window without worrying about post-messaging or cross-domain restrictions
  • Create and expose components to share functionality from your site to others!
  • Render your component directly as a React, Vue or Angular component!
    It's 'data-down, actions up' style components, but 100% cross-domain using iframes and popups!

Download


2. Postmate

Postmate is a promise-based API built on postMessage. It allows a parent page to speak with a child iFrame across origins with minimal effort.

Download


3. Iframe Resizer

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames

Demo

Download


4. Iframely

Embed proxy. Supports over 1800 domains via custom parsers, oEmbed, Twitter Cards and Open Graph

Demo

Download


5. React Frame component

This component allows you to encapsulate your entire React application or per component in an iFrame.

Demo

Download


6. Seamless.js

A seamless iframe makes it so that visitors are unable to distinguish between content within the iframe and content beside the iframe. Seamless.js is a JavaScript library (with no dependencies) that makes working with iframes easy by doing all the seamless stuff for you automatically.

Demo

Download


7. Porthole

A proxy to safely communicate to cross-domain iframes in javascript

Demo

Download


Thank for read!