Prototype and Prototypal Inheritance

Content List

  1. Introduction
  2. Function Constructors and Prototypes
  3. Prototype Properties
  4. Changing a functions prototype
  5. Multiple Inheritance
  6. Using Classes to create the prototype chain
  7. Extending built-in Objects

Introduction

In my previous post, i mentioned that ALL javascript objects have a prototype property. This prototype property is only a reference to another object (it does not live on the object). What happens is, if you ask javascript for a property on an object and it does not find it, the prototype object will be searched for that property. If it exists, that value will get returned. If you are familiar with the concept of inheritance, then this is how it works in javascript. Meaning an object in javascript inherits from its prototype (or prototype chain). This is why inheritance in javascript is called prototypal inheritance. Inheritance has a very simple meaning, it means one object gets access to the properties and methods of another object. In javascript that would be its prototype object. Read More

Javascript Objects

One can think of a javascript objects as containers with collections of data in it. Each data within the collection has a property name or key, with an assigned value (key-value pairs) to it. These values can be of primitive types, functions, objects, etc. When the value of a pair is a function, we call this a method. Behind the scenes, when an object is created and properties and values/methods are added to it, the object stores references to these for later access. This means that objects can store references to other objects.

There are a few ways we can create objects in javascript. We can use object literals, constructor functions, the Object.create method and we can use ES6 classes to create objects as well. Read More

Gulp – Getting Started With Javascript Build Automation

Gulp helps us automate tasks within your javascript projects. Why would we want to do this? Well it helps us to be more productive. Not only do frontend developers have to sit down and write code, there is a ton of other work we have to do. Things like minification, concatenation, writing vendor prefixes, using LESS to compile CSS, optimizing third-party code like jQuery, Angular etc, injecting files into HTML, unit testing, caching templates, file revisions and versioning, code analysis, and the list goes on and on. As you can already tell, frontend development is no joke when done right. And here is where Gulp comes in.

Read More

Getting Started With Webpack

On a basic level, webpack is a build tool.  A build can be described as converting source code files into standalone artifacts that can be run on a computer. What webpack does, is bundle modules used within a frontend application into a single file. So what does this have to do with javascript? When working with javascript, there are certain tasks that you do on a regular basis (especially if you are building a large scale application). Things like file concatenating and minification of javascript and CSS files, running tests, linting etc. The reasons why we do these is so our javascript applications are performant. By having a build step we can solve issues like multiple web requests, code file size, file order dependencies, code syntax checking(linting) and many more. Having a build step mitigates these problems related to development. Read More

Bower Fundamentals

As a frontend developer, there is one thing you cannot escape from. That is integrating third party libraries into your project. Need to use jQuery, Underscore, Bootstrap? You have to download their libraries. Our applications are a full of these imported libraries. They help us to get our day to day tasks done quickly and effectively. In this post we will be talking about Bower.

What Bower does is help us quickly get those libraries into our projects, which drastically reduces time needed to go to third party sites to download them (involves many manual steps). Using the command line, we can delegate that tasks to bower and it will get all the files we need into our project, ready to be used.  Read More