Intro to OOP

class: center, middle

.title[
Front-end training
# Intro to OOP
]

---

# OOP

The OOP programming style consist of three fundamental features:

- ### Encapsulation
A language mechanism for restricting access to some of the object's components.
- ### Polymorphism
Is the ability to create a variable, a function, or an object that has more than one form.
- ### Inheritance
Is a way to reuse code of existing objects, or to establish a subtype from an existing object, or
both, depending upon programming language support.

---

# OOP in JS

Javascript (ECMAScript) is the *** object-oriented *** programming language with the *** prototype
based*** implementation.

*** Prototype *** is an object, which is used either as an original copy for other objects, or as a
helper object to which characteristics other objects can delegate in case if these objects do
not have the necessary characteristic themselves.

*** Mutations *** (full convertibility: not only values, but also all of characteristics) are directly
related with dynamics of the language.
    Such objects can independently store all their characteristics (properties, methods) and do
not need the class.

Moreover, because of dynamics, they can easily change (add, delete, modify) their
characteristics.

---

# OOP models

*** Prototype based model (Javascript) ***
- the basic concept is an object;
- objects do not have the strict classes which describe
their structure and behavior; objects do not need
classes;
- objects are fully dynamic and mutable (and in the
theory can completely mutate from one type into
another);
- however, not having classes, objects can have
prototypes to which they can delegate if cannot answer
the message themselves;
- the object prototype can be changed at any moment at
runtime;
- in delegation based model changing prototype’s
characteristics will affect on all objects related with this
prototype;
- instances can have unique behavior (properties and
methods).

---

# Constructor

Constructor is a function that creates and initializes the newly created object according to the
template.

<pre class="brush: jscript">
function Animal(name) {
    this.name = name;
    this.canWalk = true;
}

var dog = new Animal("dog");

// dog = {
//     name: "dog",
//     canWalk: true
// }
		</pre>

The names of the functions that are designed to create objects, as a rule, begin with a capital letter.

---

# "Classes" in JS

Objects with identical methods of behavior creates class or object type (javascript). Class retains
constructive plan of own objects.

Each object - a member of a class, is an instance of class or object.

<pre class="brush: jscript">
    function Clock(hours, minutes) {
        this.hours = hours;
        this.minutes = minutes;
        this.setTime = function(hours, minutes) {
			this.hours = hours;
			this.minutes = minutes;
		}
        this.displayTime = function () {
			alert(this.hours + ":" + this.minutes);
		}
    }

var clock = new Clock(12, 30);
	var secondClock = new Clock(11, 45);
	clock.setTime(12, 45);
	clock.displayTime(); // 12:45
	secondClock.displayTime(); // 11:45
	console.log(clock instanceof Clock); // true
</pre>

---

# "Classes" in ES6

ES6 classes are a simple sugar over the prototype-based OOP pattern.

<pre class="brush: jscript">
	class Clock {
		constructor (hours, minutes) {
			this.hours = hours;
			this.minutes = minutes;
		}
		setTime (hours, minutes) {
			this.hours = hours;
			this.minutes = minutes;
		}
		displayTime () {
			alert(this.hours + ":" + this.minutes);
		}
	}

---

# Encapsulation in JS
Encapsulation is an increasing of abstraction, but not a paranoid hiding from “malicious hackers”
which, “want to write something directly into fields of your classes”.

It is a big (and widespread) mistake to use hiding for the sake of hiding.
ECMAScript 5, does not define private, protected, and private modifiers how it is in other OOP languages.
However, on practice it is possible to see something that is named “imitation of encapsulation in JS”.

<pre class="brush: jscript">
	function Clock(hours, minutes) {
		var _hours = hours;
		var _minutes = minutes;

this.setHours(hours) {
			_hours = hours;
		}

this.getHours() {
			return _hours;
		}
	}
    var clock = new Clock(12, 30);
    alert(clock._hours); // undefined, "private"
    alert(clock.getHours()); // 12
</pre>

---

# Encapsulation in ES6

<pre class="brush: jscript">
	let _hours;
	let _minutes;

class Clock {
		constructor (hours, minutes) {
			_hours = hours;
			_minutes = minutes;
		}
		set hours(hours) {
			_hours = hours;
		}
		get hours () {
			return _hours;
		}
	}
    var clock = new Clock(12, 30);
    alert(clock.hours); // 12
	clock.hours = 10;
	alert(clock.hours); // 10
	alert(clock._hours); // undefined
</pre>

---

# Polymorphism in JS

Objects in ECMAScript are polymorphic in several meanings.

For example, one function can be applied to different objects, just like it would be the native
characteristic of an object (because *** this *** value determinate on entering the execution context):

<pre class="brush: jscript">
function test(o) {
    alert(this.a, this.b);
}

var o1 = {a: 10, b: 20};
var o2 = {a: 100, b: 200};

test.call(o1); // 10, 20
test.call(o2); // 100, 200

var a = 1;
var b = 2;
test(); // 1, 2
</pre>

---
# Inheritance

There are  several ways for inheritance in JS,
one of the simple way is via Object.create

<pre class="brush: jscript">
var user = {
    title: 'user',
	greeting: function(){
		return 'Hi, i am ' + this.title
	}
}
user.greeting(); // Hi, i am user

var developer = Object.create(user);
developer.title = 'developer';
developer.greeting()' // Hi, i am developer

</pre>
---

# Context "this"

***This*** value is called the context of the call and will be determined at the time of the function call.

Function "showName" does not yet know what will be the value of ***this***. It will be known when the
program run.

<pre class="brush: jscript">
var user = { firstName: "Petya" };
var admin = { firstName: "Vasya" };

function showName() {
    alert( this.firstName );
}

user.a = showName;
user.a(); // Petya
showName.call(admin); // Vasya
showName(); // undefined
</pre>

---

# Context "this"

There are 4 invocation patterns in JS:
*  Method invocation
<pre class="brush: jscript">
a.func(); // this refers to the object, i.e., a.
</pre>
*  Function invocation
<pre class="brush: jscript">
func(); // this is bond to the global object.
</pre>
*  Apply invocation pattern
<pre class="brush: jscript">
func.apply(thisArg, argArray); // this is bond
                                   // to the first argument
</pre>
*  Constructor invocation
<pre class="brush: jscript">
var func = new Func(); // this refers to func
                           // while in Func constructor)
</pre>

---

# Context "this"

How to keep bond?

<pre class="brush: jscript">
var init = function () {
	this.clickCounter = 0;

var that = this;

var clickHandler = function () {
		that.clickCounter++;
	}

var element = document.getElementById('button');
	element.addEventListener('click', clickHandler);
}
</pre>

---

# Must see

- https://youtu.be/Qn3Qah7W6Vs

---

class: center, middle

.title[
## Thanks
## The End
]