Prototype Based Programming

Theory First.

      Prototype-based programming is a style of object-oriented programming in which behaviour reuse (known as inheritance) is performed via a process of reusing existing objects via delegation at serve as prototypes.

OOP PIllars

  • Abstraction
  • Inheritance
  • Encapsulation
  • Polymorphism

Discuss
Each
in Details

Abstraction

Object Creation

  • O-O Model
  • Instance

    In JavaScript O-O Model role can play constructor function, which is used for instanciate classes.

class Car extends Vehicle {
  constructor(mark, model, year) {
    super();
    this.mark = mark;
    this.model = model;
    this.year = year;
  }
}

//Equivalent to

function Car(makr, model, year) {
  this.mark = mark;
  this.model = model;
  this.year = year;
}

Car.prototype = new Vehicle();
class Car extends Vehicle {
  static className = 'car';

  instanceProperty = 'data';
  
  #privateProperty = 'private-data';
  
  static getClassName() {
    return className;
  }
  
  method() {
    console.log(this);
  }

  #pivateMethod() {
    console.log('pivate' + this);
  }
  
  set someVal(val) {
    this.val = val;
  }

  get someVal() {
    return this.val;
  }

  #mark = 'datsun';
  
  constructor(mark, model, year) {
    super();
    this.#mark = mark;
    this.model = model;
    this.year = year;
  }
}

Execution Context

this == window;

functiom checkContext() {
    if (this == window) {
        return 'Context is global now';
    } else {
        return 'Context is some object';
    }
}

var obj = {
    method: function () {
        return this.value; // Here will be right usage of this
    },                     // as self refference
    value: 'someVal'
};
function TehConstructor(someArg) {
    this.someVal = someArg;// Without new this will reffer to global
}
//Incorrect usage, but will run and set undefined to a
var a = TehConstructor('text');
//Correct usage, instance created and assigned
var correct = new tehConstructor('data');

Inheritance

Parent

Child1

Child2

Prototype

    Prototype is special JavaScript object which is refferenced by <prototype> property of an object. According with that, prototype itself has a prototype.

    If Object hasn't querryed property or method it will be searched in prototype, and if not found - in prototype's prototype, etc. untill end of prototype chain will be reached.

    You can query or set prototype manually, in few ways.

In JavaScript inheritance mechanism is provided by Prototypes Chain

function Parent() {
    this.parentVal = 'Some val of Parent';
}

function Child() {
    this.childVal = 'Some val of child';
}
// Child extends Parent
Child.prototype = new Parent();

var parentObj = new Parent();
var childObj = new Child();

console.log(parentObj.parentVal);
console.log(parentObj.childVarl);

console.log(childObj.childVal);
console.log(childObj.parentVal);
/*
Setting prototype of constructed with literals
*/
var obj = {
    name: 'constructed object',
    count: 1,
    birthday: Date.now()
};

Object.setPrototypeOf(obj, {
    greet: function () {
        return this.greetings;
    },
    greetings: 'Helo my name is ' + obj.name //Can't use this
});

console.log(obj.greet());

console.log(Object.getPrototypeOf(obj));

// Using function.prototype
(function() {
    'use strict';
    function Cat(name) {
        this.name = name;
    }

    Cat.prototype = {
        meow: function () {
            return 'neow neow';
        },
        askEat: function () {
            return 'Hey Human, give me some food!';
        },
        greet: function () {
            return this.meow();
        }
    };

    var pinky = new Cat('Pinky');
    console.log(pinky.greet());
    console.log(pinky.askEat());
    console.log(pinky.meow());
}());
"use strict";
//New Syntax Example. Remember, that all only sugar
class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);

class Animal {
  #kind;

  getKind() {
    return this.#kind;
  }

  constructor(kind) {
    this.#kind = kind;
  }
}

class Cat extends Animal {
  #name;

  constructor(name) {
    super("cat");
    this.#name = name;
  }

  show() {
    return super.getKind() + " " + this.#name;
  }
}
class Animal {
  #kind;

  getKind() {
    return this.#kind;
  }

  constructor(kind) {
    this.#kind = kind;
  }
}

class Cat extends Animal {
  #name;

  constructor(name) {
    super("cat");
    this.#name = name;
  }

  show() {
    return super.getKind() + " " + this.#name;
  }
}

Encapsulation

/**
* Hiding realisation. Here example of encapsulation realisation
*/
var AClass = (function() {
    var aPrivateVal = 'some private value' //Private field;
    
    function aPrivateMethod() {
        console.log(aPrivateVal);
    }
        
    function aConstructor(aValue) {
        this.aValue = aValue; //Public field;
        
        this.aMethod = function () {
            aPrivateMethod(); // Can call private method;
            return "some behavior";
        }

        aPrivateVal = aValue;
    }

    return aConstructor;
}());

var anInstance = new AClass('1'); //Private is '1'
var newInstance = new AClass('2');//Private is '2'
class Animal {
  #kind;

  getKind() {
    return this.#kind;
  }

  constructor(kind) {
    this.#kind = kind;
  }
}

class Cat extends Animal {
  #name;

  constructor(name) {
    super("cat");
    this.#name = name;
  }

  show() {
    return super.getKind() + " " + this.#name;
  }
}
class PrivateFields {
  #field;
  
  #method() {
  	
  }

  publicMethod() {
    this.#method();
    return this.#field;
  }

  constructor(field) {
    this.#field = field;
  }
}

Polymorphism

Object model In JavaScript

Conclusion

Prototype Based Programming

By diodredd

Made with Slides.com

Prototype Based Programming

  • 504

More from diodredd