advance javascript for coders

11
OOP IN JAVASCRIPT Object-oriented programming concepts – Advance JavaScript for Coders: Learn OOP in JavaScript - A Course from Eduonix

Upload: paddy-lock

Post on 11-Feb-2017

137 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Advance Javascript for Coders

OOP IN JAVASCRIPT

Object-oriented programming concepts –

Advance JavaScript for Coders: Learn OOP in JavaScript - A Course from Eduonix

Page 2: Advance Javascript for Coders

IT ALL STARTS WITH AN "OBJECT" An object is a "thing": something that you use or interact with. For

example: a car It has properties (characteristics) and methods (capabilities):

Properties: like color, model, price…etc. Methods: like move forward, reverse, gear-up/down, stop…etc.

The object is the heart of object-oriented programming not only in JavaScript only; but also in all OOP-aware languages like Java, C++ and others.

Page 3: Advance Javascript for Coders

AN OBJECT COMES FROM A "CLASS" In order to make a new car, there must be some sort of a "blueprint" to

be used in the process. For example, a 4x4 Jeep manufacture process will differ than that of a

Mini-Cooper for example. There would be a different blueprint for each of them.

A class to an object is like a blueprint to make a car (or any otherproduct).

You can make multiple objects from one class, all share the same properties and methods.

In JavaScript, a class is not defined as in other OOP languages. JavaScript uses prototyping (discussed later)

Page 4: Advance Javascript for Coders

ENCAPSULATION

It refers to the ability of the object to execute its functionality without revealing any execution detail to the caller.

For example, you can use the gas pedal to make a car object move forward. The specific mechanism that was used by the vehicle to actually move is completely hidden from you, the driver (the caller).

In other OOP languages, encapsulation may refer to "access levels". An object may have an access level of public (everybody has access), protected (less access than public), and private (much less access). However, in JavaScript there are no access levels. Accordingly, other techniques are used to achieve the same effect (discussed later).

Page 5: Advance Javascript for Coders

OBJECT AGGREGATION

Aggregation refers to the use of multiple small objects to create a larger, more complex one.

For example, a car is an object. But deep inside it you can find hundreds of smaller, simpler objects that – together – make up the car. Think of the steering wheel, the gear box, the brakes, the tires and so on…

Page 6: Advance Javascript for Coders

INHERITANCE

Alright, we have the blueprint to manufacture a generic car, but later on we are requested to make a police car. It will have all the properties and methods of a generic car (color, model, move, stop…etc) plus some more specific ones. For example, it should have a certain color (blue), the horn method will produce a siren and so on.

Instead of re-creating a new car from scratch just to implelement those changes, we could create a child object from the car object. This child will inherit all the properties and methods of the parent one (inheritance).

The child object can not only add new properties and methods to the ones it already inherits, but it can also change (override) those originals. For example, the top speed property of a police car should be higher than that of a normal car.

Page 7: Advance Javascript for Coders

POLYMORPHISM

The term "poly" means "many" while the term "morphism", from "morph", means "change".

Suppose you have a car1 object, and car2 object. Car1 is a police car, and car2 is a sports car, but both of them inherit from the generic car object. Accordingly, both of them implement a method horn(). You can call the horn() method on any object of them, even if you have no idea whether the object is a police car or a sports car, either of them will execute its own implementation of the horn() method.

Page 8: Advance Javascript for Coders

USING THE BROWSER'S CONSOLE The console is an excellent way to try out JavaScript code. In all major browsers (Chrome, Safari, Firefox, and Internet Explorer) it can

be activated by right clicking anywhere in a page and choose inspect element as shown:

Page 9: Advance Javascript for Coders

OTHER CONSOLES

In Firefox (and lately in Chrome), you can install firebug (firebug lite in Chrome), which would provide a richer set of features than the built-in developer tools that ship with the browser, and it has its own console

Page 11: Advance Javascript for Coders

Thank Youwww.eduonix.com