JavaScript OOP

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезанияASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET

курсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране

Николай Костов - блог за програмиранеC# курс, програмиране, безплатно

JavaScript OOPThe way of Object-oriented Ninja

Doncho Minkov

Telerik Software Academyhttp://academy.telerik.com

Technical Trainerhttp://minkov.it

http://academy.telerik.com/

http://minkov.it/

http://forums.academy.telerik.com/

http://kursove-uroci-knigi-obuchenie-programirane-web-design-csharp.info/

http://www.telerik-kids.com/

http://seocourse.telerik.com/

http://html5course.telerik.com/

http://schoolacademy.telerik.com/

http://mvccourse.telerik.com/

http://clouddevcourse.telerik.com/

http://www.bgcoder.com/

http://www.nakov.com/

http://codecourse.telerik.com/

http://algoacademy.telerik.com/

http://aspnetcourse.telerik.com/


http://mobiledevcourse.telerik.com/

http://www.introprogramming.info/

http://www.minkov.it/

http://www.nikolay.it/

http://csharpfundamentals.telerik.com/












Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Table of Contents

Objects in JavaScript Object-oriented Design OOP in JavaScript Classical OOP Prototypes Object Properties Function Constructors































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Table of Contents (2)

Object Members Access Modifiers The this function object Inheritance Multiple Inheritance Namespaces
































Objects in JavaScript
































Object Types in JavaScript

Only six value types in JavaScript undefined, null, object, number,

string, boolean Four object types

Object, number, string and boolean String, boolean and number are

primitive types Object is the only reference type

Arrays, dates, HTML elements are of type object































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Objects in JavaScript

Objects in JavaScript are just a set of properties Property name/key and property

value Property key contains a string value Property value can contain any type

of object Strings, numbers, Booleans Arrays, dates, HTML elements Other objects
































Object-oriented Design
































Object-oriented Programming

OOP means that the application/program is constructed as a set of objects Each object has its purpose Each object can hold other objects

JavaScript is prototype-oriented language It uses prototype to define its

properties Does not have definition for class or

constructor
































OOP in JavaScript































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно OOP in JavaScript

JavaScript is loosely-typed language No such things as types and

polymorphism JavaScript is also highly expressive language Most things can be achieved in

many ways That is why JavaScript has many ways to support OOP Classical, Functional, Prototypal Each has its advantages and

drawbacks Usage depends on the case
































Classical OOP































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Classical OOP

JavaScript uses functions to create objects It has no definition for class or

constructor Functions play the role of object constructors Create/initiate object by calling the

function with new

function Person(){}var gosho = new Person(); //instance of Personvar maria = new Person(); //instance of Person































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Creating Objects

When using a function as an object constructor it is executed when called with new

Each of the instances is independent It has its own state and behavior

Function constructors can take parameters to give instances different state

function Person(){}var personGosho = new Person(); //instance of Personvar personMaria = new Person(); //instance of Person































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Creating Objects

Function constructor with parameters Just a regular function with

parameters, invoked with newfunction Person(name,age){ console.log("Name: " + name + ", Age: " + age);}var personGosho = new Person("Georgi",23);//logs://Name: Georgi, Age: 23var personMaria = new Person("Maria",18);//logs://Name: Maria, Age: 18
































Function ConstructorsLive Demo
































Prototypes































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно The prototype Object

JavaScript is prototype-oriented programming language Every object has a hidden property

prototype Its kind of its parent object

Prototypes have properties available to all their children The object type is the parent of all

objects Every object inherits object All objects has toString() method
































The prototype Object (2)

When adding properties to a prototype, all children objects will have these properties//adding a method to arrays to sum their number elementsArray.prototype.sum = function(){ var sum = 0; for(var i = 0; i < this.length; i++){ if(typeof this[i] === "number"){ sum += this[i]; } } return sum;}

var numbers = [1,2,3,4,5];console.log(numbers.sum());//logs 15

Here this means

the array
































PrototypesLive Demo































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Object Members

Objects can also define custom state Custom properties that only

instances of this type have Use the keyword this

To attach properties to objectfunction Person(name,age){ this.name = name; this.age = age;}var personMaria = new Person("Maria",18);console.log(personMaria.name);































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Object Members (2)

Property values can be either variables or functions Functions are called methodsfunction Person(name,age){ this.name = name; this.age = age; this.sayHello = function(){ console.log("My name is " + this.name + " and I am " + this.age + "-years old"); }}var maria = new Person("Maria",18);maria.sayHello();
































Object MembersLive Demo































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Attaching Methods

Yet there are performance differences when attaching methods Creating a method is a slow

operation Attaching methods inside the

function constructor is very slow Better attach them to the prototypefunction Person(name,age){ this.name = name; this.age = age;}Person.prototype.sayHello = function(){ console.log("My name is " + this.name + " and I am " + this.age + "-years old");}































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Attaching Methods (2)

Of course there are drawbacks A function constructor creates a

closure, so only objects within its scope can access its objects

Methods attached to the prototype cannot access private datafunction Person(name,age){

var name = name; var age = age;}Person.prototype.sayHello = function(){ console.log("My name is " + name + " and I am " + age + "-years old");}//ReferenceError: name is not defined

Using getters and setters can

solve this
































Attaching MethodsLive Demo
































Access Modifiers































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Access Modifiers

JS has only two kinds of access modifiers for properties Public members are accessible from

everywhere Private members are accessible

only from the objects in the closure scope

How to create private members? Just create an variable inside the

function constructor Public members are attached to this
































The this Function Object































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно this

As said before this is available everywhere where there is JavaScript Yet it has a different meaning

This can two different values Global scope (i.e. window)

When A concrete object

When using the new operator































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно this in Function Scope

When executed over a function, without the new operator this refers to the parent scopefunction Person(name) { this.name = name; this.getName = function getPersonName() { return this.name; }} var p = new Person("Gosho");var getName = p.getName;console.log(p.getName()); //Goshoconsole.log(getName()); //undefined

Here this means the Person

objectHere this means its parent scope

(window)
































this in Function Scope (2)

Hopefully this is easily fixed Just assign this to a variable (self) And use it instead of thisfunction Person(name) { var self = this; self.name = name; self.getName = function getPersonName() { return self.name; }} var p = new Person("Gosho");var getName = p.getName;console.log(p.getName()); //Goshoconsole.log(getName()); //Gosho
































The this function objectLive Demo































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Function Constructors

JavaScript cannot limit function to be used only as constructors That is because JavaScript was not

mean this wayfunction Person(name) { var self = this; self.name = name; self.getName = function getPersonName() { return self.name; }} var p = Person("Peter");

What will be the value of this?
































Function Constructors (2)

The only way to mark something as contructor is to name it PascalCase And hope that the user of you code

will be so nice to call PascalCase-named functions with this
































Inheritance































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Inheritance

Since JavaScript is prototype-oriented programing language, inheritance is done through prototypes To implement inheritance set the

prototype of an object to its parent Need to set the correct constructorfunction Person(name, age){ this.name = name; this.age = age; }function Student(name, age, grade){ this.name = name; this.age = age; this.grade = grade;}Student.prototype = new Person();Student.prototype.constructor = Student;var isStudentPerson = new Student() instanceof Person;

Repeating codeNot quite good

right?

Repeating codeNot quite good

right?
































Inheritance Using parent Constructors

Yet this is not fully-usable inheritance The parent constructor is not

reused Yes, but how?

Remember call and apply? Person is just a function, so it has

them

function Person(name, age){ this.name = name; this.age = age; }function Student(name, age, grade){ Person.apply(this, arguments); //Person.call(this, name, age); this.grade = grade;}Student.prototype = new Person();Student.prototype.constructor = Student;
































Simple InheritanceLive Demo































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Inheritance

The inheritance in the previous example seems quite ugly A method can be done to implement

better looking inheritance

Need to add the inherit method to function, since functions are used as contructors

Function.prototype.inherit = function(parent){ this.prototype = new parent(); this.prototype.constructor = parent;}

function Person (name, age){ … }function Student (name, age, grade) { … }Student.inherit(Person);
































Easier InheritanceLive Demo































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Multiple Inheritance

What about multiple inheritance? The ability to inherit more than one

prototype No such thing in JavaScript

Still it can be faked A JavaScript object is just a set of properties These properties can be added to

the needed object































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Multiple Inheritance

Creating an method to make multiple inheritance to the function prototypeFunction.prototype.extend = function(parent) { for (var i = 1; i < arguments.length; i += 1) { var name = arguments[i]; this.prototype[name] = parent.prototype[name]; } return this;}

MovableRect.extend(Movable, 'move');//gets the property move of Movable
































Multiple InheritanceLive Demo
































Namespaces































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Namespaces

It is always better to arrange your code Create modules that contain

objects, functions, etc… Like C# namespaces or Java

packages How can this be done with JavaScript? Maybe JS has the easiest solution Just define you objects and methods

in a closure and return an object that contains them































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Namespaces (2)

This is called the Module patternvar schoolNS = (function() { function Person(name, age) { } function Student(name, age, grade) {} function Teacher(name, age, specialty) {} function Class(name) {} function School(name) {} return { Person: Person, Student: Student, Teacher: Teacher, Class: Class, School: School };}());var student = new schoolNS.Person("Gosho",23);
































NamespacesLive Demo
































?

?? ? ?

??? ?

?

? ?

??

?

?

? ?

Questions?

JavaScript OOP

http://academy.telerik.com




















































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Homework

1. Write a hierarchy of classes to simulate vehicles All vehicles should have speed and

propulsion units (things which make them move) and a Accelerate method, which should update their speed by summing it with the acceleration of their propulsion units

Each propulsion unit can produce acceleration (change in speed). There should be three types of propulsion units - wheels, propelling nozzles and propellers

A wheel should have a radius and the acceleration it produces should be equal to its perimeter































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Homework (2)

1. (cont.) Write a hierarchy of classes to simulate vehicles A propelling nozzle should have power

and an afterburner switch. The acceleration the nozzle should produce as much acceleration as it has power, but if the afterburner is on it should produce double acceleration.

A propeller should have a number of fins and a spin direction. The acceleration a propeller produces should by default be equal to the number of fins it has. The spin direction should be clockwise and counter-clockwise. If the spin direction is counter-clockwise, the acceleration the propeller produces should be negative, if the spin direction is clockwise, the acceleration should be positive.
































1. (cont.) Write a hierarchy of classes to simulate vehicles There should be land, air and water

vehicles. Land vehicles should have 4 wheels, air vehicles should have 1 propelling nozzles and water vehicles should have a customizable number of propellers (passed in the constructor).

Air vehicles should have the ability to switch on/off their afterburners.

Water vehicles should have the ability to change the spin direction of their propellers.
































1. (cont.) Write a hierarchy of classes to simulate vehicles Implement one additional amphibious

vehicle. It should both have a propeller (so it can move on water) and wheels (so it can move on land). The amphibious vehicle should be able to switch between land and water mode and it's speed property and Accelerate method should respectively depend on its wheels in the first case and on its propeller in the second case




















JavaScript OOP

Documents

Transcript of JavaScript OOP