## 16 Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming 16—Object-Oriented Programming ...
Author: Steven Farmer
JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

16—Object-Oriented Programming CS1101S: Programming Methodology Martin Henz

October 17, 2012

Generated on Wednesday 17 October, 2012, 14:14

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

1

JavaScript’s Native Data Structures JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

2

Recap: Programming Techniques for Data Representation

3

Object-Oriented Programming

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

// p a i r c o n s t r u c t s a p a i r u s i n g a two−e l e m e n t a r r a y // LOW−LEVEL FUNCTION , NOT JEDISCRIPT function p a i r (x , xs ) { return [ x , xs ] ; } Terminology We call these things “vectors”. We are often impose limitations on ourselves when using “vectors”. This is called “array discipline”.

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Vectors in JavaScript

Definition Vectors in JavaScript are tables that enjoy special syntactic support. Creating an empty vector v a r m y v e c t o r = [ ] ; // c r e a t i n g an empty v e c t o r

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Adding Fields Syntax for adding fields We can add fields using the following syntax: // c r e a t i n g an empty v e c t o r var my vector = [ ] ; // a d d i n g a f i e l d w i t h k e y 42 m y v e c t o r [ 42 ] = ” some s t r i n g ” ; // a c c e s s i n g t h e f i e l d a l e r t ( m y v e c t o r [ 42 ] ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

What if the key has not been added yet?

Access using non-existing keys // c r e a t i n g an empty v e c t o r var my vector = [ ] ; // a c c e s s i n g u s i n g non−e x i s t e n t k e y a l e r t ( m y v e c t o r [ 88 ] ) ; // shows ” u n d e f i n e d ”

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

What can be used as key? Anything! We can use any data structure as a keys // c r e a t i n g an empty v e c t o r var my vector = [ ] ; // a d d i n g a f i e l d w i t h k e y ” f o r t y t w o ” m y v e c t o r [ ” f o r t y t w o ” ] = ” some s t r i n g ” ; // a c c e s s i n g t h e f i e l d a l e r t ( my vector [ ” fortytwo ” ] ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Array Convention for Vectors Array Convention If the keys of a vector are integers ranging from 0 to a given number, the vector is called an array. JediScript Week 10 All vectors in JediScript are arrays. JavaScript follows this convention The built-in functions on vectors assume that vectors are arrays. For example, my vector.length ignores fields that are not non-negative integers.

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Back to pair

function p a i r (x , xs ) { return [ x , xs ] ; } Literal arrays JavaScript supports the creation of a literal array, without a need to list the keys. var my array = [ ” s o m e s t r i n g ” , ” s o m e o t h e r s t r i n g ” ] ; . . . my array [ 0 ] . . .

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

What if we want keys that are not non-negative integers? JavaScript support for strings as keys JavaScript supports strings as keys in objects. Example If my object is an object that has a field with key ”my field”, you can use it like this: // f i e l d a c c e s s e x p r e s s i o n . . . my object [ ” my field ” ] . . . // f i e l d a s s i g n m e n t s t a t e m e n t my object [ ” m y o t h e r f i e l d ” ] = 42;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Creating Objects Syntax of creating objects An empty object is created using the syntax {}. Example Session var my object = {}; my object [ ”a” ] = 13; a l e r t ( my object [ ”a” ] ) ; m y o b j e c t [ ”b” ] = 4 2 ; a l e r t ( m y o b j e c t [ ”b” ] ) ; a l e r t ( my object [ ”c” ] ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Syntactical Support for Objects Objects will appear a lot in your programs. We need a syntax that avoids the quotation marks around the names of fields. Syntactic Convention 1 If the key of a field is a string that looks like a JavaScript identifier, you can write . . . my object . my field

...

instead of . . . my object [ ” my field ” ] . . .

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Syntactical Support for Objects (cont’d)

Syntactic Convention 2 If the key of a field is a string that looks like a JavaScript identifier, you can write my object . my field = . . . ; instead of my object [ ” my field ” ] = . . . ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

JavaScript’s “Arrays” (aka Vectors) Objects in JavaScript

Syntactical Support for Objects (cont’d)

Syntactic Convention 3 We can construct objects literally, using the syntax {...}, by listing the key-value pairs, separated by “:” and “,”. Example var my object = { m y f i e l d : 42 , m y o t h e r f i e l d : 88 } ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

1

JavaScript’s Native Data Structures

2

Recap: Programming Techniques for Data Representation

3

Object-Oriented Programming

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Objects as pairs

function make stack () { var s t a c k = p a i r ( ” s t a c k ” , [ ] ) ; return stack ; } f u n c t i o n push ( s t a c k , x ) { s e t t a i l ( stack , p a i r (x , t a i l ( stack ) ) ) ; } // o t h e r f u n c t i o n s var my stack = make stack ( ) ; push ( m y s t a c k , 4 ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Objects as functions function make account ( i n i t i a l ) { var b a l a n c e = i n i t i a l ; r e t u r n f u n c t i o n ( message , amount ) { i f ( message === ” w i t h d r a w ” ) { b a l a n c e = b a l a n c e − amount ; return balance ; } e l s e { // message === ” d e p o s i t ” b a l a n c e = b a l a n c e + amount ; return balance ; } } var my account = make account ( 1 0 0 ) ; my account ( ” withdraw ” , 5 0 ) ; CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Objects as functions, a variant function make account ( i n i t i a l ) { var b a l a n c e = i n i t i a l ; r e t u r n f u n c t i o n ( message ) { i f ( message === ” w i t h d r a w ” ) { r e t u r n f u n c t i o n ( amount ) { b a l a n c e = b a l a n c e −amount ; return balance ; }; } e l s e { // message === ” d e p o s i t ” return . . . ; }; } var my account = make account ( 1 0 0 ) ; ( my account ( ” withdraw ” ) ) ( 5 0 ) ; CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

1

JavaScript’s Native Data Structures

2

Recap: Programming Techniques for Data Representation

3

Object-Oriented Programming Knowledge Representation View of Objects Objects in JavaScript Software Development View

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Knowledge Representation View of Objects

Aggregation Classification Specialization

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Aggregation

v a r m y V e h i c l e = { m ax s p e e d : 8 5 } ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Classification

f u n c t i o n n e w v e h i c l e ( ms ) { r e t u r n { m ax s p e e d : ms } ; } var m y v e h i c l e = n e w v e h i c l e ( 8 5 ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Specialization

f u n c t i o n n e w c a r (mp) { var c = n e w v e h i c l e ( 9 5 ) ; c . m a x p a s s e n g e r s = mp ; return c ; } var my car = new car ( 5 ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Specialization

Usually, the concept of inheritance (class extension) achieves specialization in object-oriented languages.

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Philosophy of Objects in JavaScript/JediScript

Minimality: Introduce only three constructs (new, this, and Inherits ) Flexibility: Supports many object-oriented programming techniques, not just the traditional class/object scheme

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Constructor Functions

Constructors are ordinary functions Any function in JavaScript can serve to create an object. function Student () { }

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Creating Objects with “new”

Constructors are ordinary functions The keyword new creates an object, referred to by “this” in the function, and allows method invocation (see later) function Student () { } v a r p e t e r = new S t u d e n t ( ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Example using “this”

f u n c t i o n S t u d e n t ( number ) { t h i s . m a t r i c n u m b e r = number ; this . year of study = 1; } v a r p e t e r = new S t u d e n t ( ” A0014234X ” ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Functions operating on objects

function s e t y e a r ( student , y ) { student . year of study = y ; } v a r p e t e r = new S t u d e n t ( ” A0014234X ” ) ; s e t y e a r ( peter , 2);

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Alternative: Methods What are methods? Methods are functions that are defined with the intention of being applied to objects through object invocation f u n c t i o n S t u d e n t ( number ) { t h i s . m a t r i c n u m b e r = number ; this . year of study = 1; } function s e t y e a r ( y ) { this . year = y ; } v a r p e t e r = new S t u d e n t ( ” A001342X ” ) ; p e t e r . s e t y e a r ( 2 ) ; // w i l l t h i s work ? CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Connecting methods to objects Prototype field of Constructors The prototype field of constructors are used for object invocation. function s e t y e a r ( y ) { this . year = y ; } Student . prototype . s e t y e a r = s e t y e a r ; Student . prototype . s e t y e a r = function ( y ) { this . year = y ; };

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Invoking Methods

v a r p e t e r = new S t u d e n t ( ” A001342X ” ) ; peter . set year (y ); Invocation mechanism This special notation calls the function Student.prototype . set year using the argument 2 as y, and the implicit argument peter as “this”.

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Inheritance

function GraduateStudent ( s , n) { this . supervisor = s ; Student . c a l l ( this , n ) ; } GraduateStudent . I n h e r i t s ( Student ) ; v a r p a u l = new G r a d u a t e S t u d e n t ( ” P r o f Leong ” , ” A0014234X ” ) ;

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Overriding Methods

GraduateStudent . prototype . s e t y e a r = function ( y ) { i f ( y < 5) { a l e r t ( ”a very j u n i o r grad student ” ) ; } else { Student . prototype . s e t y e a r . c a l l ( this , n ) ; }; } }

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Control Flow in Procedural Languages (time) P1

P2

P3

control

time

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Control Flow in Object-oriented Languages (time) objects methods

O1 M1

M2

O2 M3

M1

M2

M3

control

object application

time

CS1101S: Programming Methodology

16—Object-Oriented Programming

self or method application

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Execution of Object Application window

.

move

(

100

method identifier

object

,

50

)

arguments

class lookup class method lookup code address code execution

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Early Binding in Procedural Languages executing code

procedure application

procedure execution

early binding CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Late Binding in Object-oriented Languages late binding

method execution

setting "this"

object application

"this" application

executing code

method application

method execution

early binding

CS1101S: Programming Methodology

16—Object-Oriented Programming

JavaScript’s Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming

Knowledge Representation View of Objects Objects in JavaScript Software Development View

Summary

Objects are possible and widely used already in JediScript Week 8 In JediScript Week 10, objects enjoy special support (new, this, Inherits)

CS1101S: Programming Methodology

16—Object-Oriented Programming