Object Oriented Programming

with ECMAScript 2015

Navigation: ← ↑ → ↓ f ESC

Introduction

Concepts

Keywords

Conventions

Organization

Concepts

Abstraction via Encapsulation

Inheritance and Polymorphism

Keywords

        class
        extends
        export
        import
        new
        constructor
        this
        get
        set
        seal
        super
        static
					

Conventions

Class identifiers begin with a capital letter

class Html5 {...}

Instances begin with a lower case letter

var html5 = new Html5();

Properties begin with a lower case letter

html5.selfClosing = false;

Methods begin with a lower case letter

if (html5.isSelfClosing()) {...}

Organization

Classes are each defined in their own file

/path/to/html5.class.js

Class definitions are presented to the world by exporting

export default class Html5 {...}

Class definitions are made accessible by importing

import Html5 from '/path/to/html5.class';

Loaders assume that modules have a ".js" file extension

Abstraction via Encapsulation

Abstraction is simply the process of finding patterns in our work and codifying them

Encapsulation is the act of assembing the properties and methods of a pattern into a package (a class)

class Html5 {...}

Inheritance

Inheritance defines an "isA" relationship between two patterns

class Edupub extends Html5 {...}

Where Edupub is a sophisticated type of Html5

Polymorphism

Polymorphism is when an invocation of a generic object's method makes a "no fuss" invocation to an inherited object's method instead

        class Html5 {
            openTag()      { return `<${this.tag}>`; }
            printElement() { return this.openTag() ... };
        }
        
        class Edupub extends Html5 {
            openTag()      { return `<*{this.tag} epub:type="${type}">`; }
        }
        
        var obj = new Edupub('section', 'chapter');
        obj.printElement();
					

        → <section epub:type="chapter"> 
					

class

A class is an encapsulation of the properties and methods of an abstract pattern

        class Html5 {
            constructor() {
                // property
                this.tag;
            }
            
            // method
            openingTag() {
                console.log(`<${this.tag}>`);
            }
        }
					

new

An object is instantiated using the new keyword

    
        var html5 = new Html5();
					

constructor

A new object is promulgated with the class's constructor

        constructor() {
            this.tag = '';
            this.selfClosing = false;
        }
					

The constructor implicitly returns a reference to the new object

    
        var html5 = new Html5();
					

The caller's variable is assigned the implicit reference

constructor

The constructor's highest responsibility is to place the new object into a known good state

        constructor(tag, selfClosing) {
            this.tag = tag;
            this.selfClosing = selfClosing;
        }
					

        var html5 = new Html5('span', false);
        assert(html5.tag == 'span');
        assert(html5.selfClosing === false);
					

this

Use the this keyword within the constructor to define object properties

        constructor() {
            this.selfClosing = false;
        }
					

Use the this keyword within class methods to access object properties

        isSelfClosing() {
            return this.selfClosing;
        }
					

accessibility

Properties and methods are always publicly accessible

        var html5 = new Html5('span', false);
        console.log("1. " + html5.tag);
        console.log("2. " + html5.openingTag());
					

        → 1. span
        → 2. <span> 
					

set

Property syntax can be used to set a property value with validation or transformation

        class Html5 {
            ...
            set tag(value) {
                this._tag = value.toLowerCase();
            }
        }
        
        html5.tag = 'SPAN';
        console.log(html5._tag);
					

        → span
					

get

Property syntax can be used to format a return value

        class Html5 {
            ...
            get tag() {
                return `<${this._tag}>`;
            }
        }

        html5.tag = 'SPAN';
        console.log(html5.tag);
					

        → <span> 
					

seal

Best practice: use seal at the end of every constructor

        class Html5 {
            constructor(tag, selfClosing) {
                this.tag = tag;
                this.selfClosing = selfClosing;
                Object.seal(this);
            }
        }
					

        html5.tag = 'span';
        html5.slfClsing = true;
        // TypeError: Can't add property slfClsing, object is not extensible
					

super

Calling the base class constructor from the derived class constructor

        class Edupub extends Html5 {
        
            constructor(tag, selfClosing, type) {
                super(tag, selfClosing);
                this.type = type;
            }
        }
					

super

Calling a base class method from a derived class method

        class Html5 {
            constructor(tag, selfClosing) {...}
            isEmpty() { return !(this.tag); }
        }
        
        class Edupub extends Html5 {
            constructor(tag, selfClosing, type) {...}
            isEmpty() { return super.isEmpty() && !(this.type); }
        }
					

static

Classes can be used as namespaces when static is added to methods

        class HtmlHelper {
            static isSectioning(tag) {
                var a = 'div,section,article,aside,nav,
                            header,footer,blockquote,
                            figure,dl,details,hr,table'.split();
                return (a.indexOf(tag) != -1);
            }
            static isEmbedded(tag) {
                var a = 'span,a,b,i,em,strong,q,sup,sub,
                            s,u,small,mark,code,kbd,var,
                            abbr,ins,del,img,data,time'.split();
                return (a.indexOf(tag) != -1);
            }
        }
        assert( HtmlHelper.isSectioning('article') );
        assert( HtmlHelper.isEmbedded('strong') );
					

Polymorphism (1 of 2)

        class Html5 {
            constructor(tag, innerText) {...}
            
            openTag()      { return  }
            text()         { return this.innerText; }
            closeTag()     { return `</${this.tag}>`; }
            printElement() { return this.openTag()
                             + this.text() + this.closeTag() };
        }
					

        var obj = new Html5('section', 'Hello World!');
        obj.printElement();
        → <section>Hello World!</section> 
					

Polymorphism (2 of 2)

        class Edupub extends Html5 {
            constructor(tag, innerText, type) {...}
            
            openTag() { return  }
        }            
            
            
        
        
					

        var obj = new Edupub('section', 'Hello World!', 'chapter');
        obj.printElement();
        → <section epub:type="chapter">Hello World!</section> 
					

Programming Paradigms

Procedural

Functional

Lambda

Object Oriented

Procedural

Object oriented programming plays nicely with procedural programming

Classic procedural iteration where item is an Html5 object:

        var collection = new Html5Collection('meta', 'title');
        for (let item of collection) {
            if (item.isSelfClosing())
                console.log(`<${item.tag} >`);
            else
                console.log(`<${item.tag}>${item.text}</${item.tag}>`);
        }
					

        → <meta > 
        → <title>Hello World!</title> 
					

Functional

Object oriented programming plays nicely with functional programming

        function writeTag(item) {
            if (item.isSelfClosing())
                console.log(`<${item.tag}>`);
            else
                console.log(`<${item.tag}>${item.text}</${item.tag}>`);
        }
        var collection = new Html5Collection('meta', 'title');
        collection.forEach(writeTag);
					

        → <meta > 
        → <title>Hello World!</title> 
					

Lambda

Object oriented programming plays nicely with lambda programming

        var collection = new Html5Collection('meta', 'title');
        console.log( collection.forEach(
          item => item.isSelfClosing()
                          ? `<${item.tag}>`
                         : `<${item.tag}>${item.text}</${item.tag}>`
          );
					

        → <meta > 
        → <title>Hello World!</title> 
					

OOP

Object oriented programming equivalent

Where writeTags() iteratively calls Html5.writeTag()

        var collection = new Html5Collection('meta', 'title');
        collection.writeTags();
        
        
					

        → <meta > 
        → <title>Hello World!</title> 
					

Closing Remarks

Object oriented programming

• nicely encapsulates patterns
• ensures partial safety
• brings clarity to complex code
• reads well

Object Oriented Programming

with ECMAScript 2015

- 30 -