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
The Truth About JediScript Lists
// 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