Felix Gondwe

keep looking, don't settle

JS: Prototypal Inheritance — November 19, 2015

JS: Prototypal Inheritance

Prototypal inheritance: modern way to do inheritance in javascript. Its alot cleaner way to achieve inheritance in javascript. Let’s get to it.

var employee = {
  location: "USA",
  getLocation: function(){
    console.log(this.location)
  },
  getName: function(){
    console.log(this.name)
  }

};

Inheritance

var contractor = Object.create(employee);
contractor.getBadgeId = function(){
  console.log(this.badgeId);
};

Create instances

var intern = Object.create(contractor);
intern.name = "felix gondwe"; //protoypal flexibility 😉
intern.badgeId = 10;

intern.getBadgeId(); //prints 10
intern.getLocation(); //prints USA
intern.getName(); //prints felix gondwe

In this example, you don’t have to work with the prototype object, for example: Person.prototype.SayMyName = bla bla
check code below

var Person = function(){

};
//you don'e have to work with this
Person.prototype.SayMyName = function(){console.log("my name is seth!")};

This is far easier way to understand inheritance in javascript. The whole prototype object thing can get confusing if you’re new to javascript OOP.

Let’s see more code to make this example a little more interesting

Assuming we wanted to pass limiteless amount of arguments to our constructor, lets see how we can do that.


first, we have to modify Object.create() function in our parent class

var employee = {
  location: "USA",
  getLocation: function(){
    console.log(this.location)
  },
  getName: function(values){
    console.log(this.name)
  },
  create: function(values){
     var instance = Object.create(this);
     Object.keys(values).forEach(function(){
      //maps object keys to their values in our newly created instance
        instance[key] = values[key]
     });
    return instance;
  }

};

Inheritance

var contractor = Object.create({
    name: "felix",
    title: "intern",
    location: "USA",
    office: "HQ",
    getInformation: function(){
        console.log("name: " + this.name);
        console.log("title: " + this.title);
        console.log("location: " + this.location);
        console.log("Office: " + this.office);
},
});
var emp = Object.create(contractor);
emp.getInformation();

The amazing thing about prototypal pattern is that you can change properties or override function on the fly as compare to C# for instance where you can’t modify properties or methods once an object has been instantiated

Advertisements
Javascript OOP —

Javascript OOP

Background

Javascript is a prototype based language. But what does that mean? First let’s work on some terminology here. Prototype basically means a model of something. I have a Java/C# background so this was pretty confusing to me at first that’s why we’re taking baby steps to understand what we’re dealing with here.

Anyone one who’s been working with Classical model of OOP thus folks doing Java/C++/C# or anything along those lines will find Javascript OOP a little weird. Let’s get to work.

We will attempt to create a class hierarchy using Employee object for instance. We will approach this from a classical model perspective and prototypical perspective to see how these two differ.

1. Classical model example: Java

public class Employee{
//properties
   private static String FirstName;
   private static String LastName;
   private static int Age;
   //constructor
  //special method btw 
   public Employee(String firstName,String lastName,int age){
      FirstName = firstName;
      LastName = lastName;
      Age = age
   }
//Methods or functions

//gets employee first name
   public string GetFirstName(){
      return FirstName;
   }
   public string GetLastName(){
      return FirstName;
   }
   public int GetAge(){
      return FirstName;
   }

}

Inheritance

public class Contractor Extends Employee{
   //properties
   private static int contractorBadgeId;
   //constructor
   //special method btw 
   public Contractor(){
      super("Seth","Johns",30);
      contractorBadgeId = 10;
   }
  //Methods or functions
   public int GetBadgeId(){
      return contractorBadgeId;
   }
}

Now create an instance of Contractor object

Contractor salesEngineer = new Contractor ();

That was a hierarchy example of classical model. Now let’s look at a similar example in javascript

2. Prototypal model: Javascript

By the way there’s no concept of public|private|protected in javascript. You could achieve similar thing but let’s save that for another day. As such we won’t be implementing getters and setters like we did in the Java example. Let’s jump to it 🙂

//Employee object
//Constructor function
function Employee(firstName,lastName,age){
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

Inheritance

//Contractor object
//Constructor function
function Contractor(){
   //properties
   //initialize object with Employee object 
   Employee.call(this)
   //properties
   this.contractorBadgeId = 10;
}
//inherit/associate Employee object
Contractor.prototype = Object.create(Employee.prototype)

Lets stop there for a second, I know things are getting weird now if you have Classical model kind of background. You’re not alone 🙂

In prototypal model inheritance works mainly by “association”,meaning, we’re not creating an Instance of Employee object but rather we’re associating Employee object to Contractor object. Let’s proceed.

Now let’s create sales engineer object

var salesEngineer = new Contractor();

Now we have created a hierarchy in prototypical model.

Summary
This example shows the difference between classical model and prototypical model to highlight concept of Inheritance in javascript.

We looked at inheritance in classical model and inheritance in prototypical model. Its important to understand the two especially for people like me getting deep into Javascript with a Java/C#/C++ background. Check out my next post on interacting with Javascript objects. Bye for now.

NB(update)
There’s a confusion about whether the above javascript code is “classical model” pattern or prototypal model pattern. This example is how you would do “classical model pattern” in javascript. For the actual prototypical pattern approach or the newer way to do inheritance in Javascript that most modern projects are using will be in the next post just to clear some of this confusion.

Cyberduck Mac Installation — November 15, 2015

Cyberduck Mac Installation

Setup
The setup for cyberduck is easy. Helps transferring files(ftp/ftps) to wherever you’re hosting your site

  1. Download cyberduck
    Google cyberduck download for Mac or download here
  2. Install cyberduckOnce installation is complete you can open cyberduck, you should see the following window or if you don’t see it open Cyberduck application in your applications folder.
    Screenshot 2015-11-14 19.30.45
  3. Get your FTP/FTPS server information
    Make sure you have FTP information from where you’re hosting your site. If you don’t, ask your host administrator
    ftp_connection
  4. Connect
    connected_ftp
    That was easy right, ask away if you face any issues. Setups can be annoying at times but we have to do them anyhow.
Malawi — November 14, 2015

Iterate through array
Powershell is very “powerful” and super weird when you’re used to writing code in C# or Java or anything that looks like code really. Anyhow this example demonstrates how to iterate through a an array in powershell.

Function SetNameList($dataList)
{
   #declare an empty array
   $arr = @()
   #add names from dataList to empty array
   foreach($name in $dataList)
   {
      $arr += $name 
   }
   return $arr
}