16Object-Oriented Programming CS1101S: Programming Methodology - - PowerPoint PPT Presentation

▶
16 object oriented programming
SMART_READER_LITE
LIVE PREVIEW

16Object-Oriented Programming CS1101S: Programming Methodology - - PowerPoint PPT Presentation

Oct 30, 2023 393 likes •803 views

JavaScripts Native Data Structures Recap: Programming Techniques for Data Representation Object-Oriented Programming 16Object-Oriented Programming CS1101S: Programming Methodology Martin Henz October 17, 2012 Generated on Wednesday 17

slide-1
SLIDE 1

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

slide-2
SLIDE 2

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

slide-3
SLIDE 3

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 using a two−element array // 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

  • urselves when using “vectors”. This is called “array discipline”.

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-4
SLIDE 4

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 var my vector = [ ] ; // c r e a t i n g an empty ve c tor

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-5
SLIDE 5

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 ve c tor var my vector = [ ] ; // adding a f i e l d with key 42 my vector [ 42 ] = ”some s t r i n g ” ; // a c c e s s i n g the f i e l d a l e r t ( my vector [ 42 ] ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-6
SLIDE 6

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 ve c tor var my vector = [ ] ; // a c c e s s i n g using non−e x i s t e n t key a l e r t ( my vector [ 88 ] ) ; // shows ” undefined ”

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-7
SLIDE 7

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 ve c tor var my vector = [ ] ; // adding a f i e l d with key ” fortytwo ” my vector [ ” fortytwo ” ] = ”some s t r i n g ” ; // a c c e s s i n g the f i e l d a l e r t ( my vector [ ” fortytwo ” ] ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-8
SLIDE 8

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

slide-9
SLIDE 9

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 = [ ” somestring ” , ” someotherstring ” ] ; . . . my array [ 0 ] . . .

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-10
SLIDE 10

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 access e x p r e s s i o n . . . my object [ ” m y f i e l d ” ] . . . // f i e l d assignment statement my object [ ” m y o t h e r f i e l d ” ] = 42;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-11
SLIDE 11

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” ] ) ; my object [ ”b” ] = 42; a l e r t ( my object [ ”b” ] ) ; a l e r t ( my object [ ”c” ] ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-12
SLIDE 12

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 . m y f i e l d . . . instead of . . . my object [ ” m y f i e l d ” ] . . .

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-13
SLIDE 13

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 . m y f i e l d = . . . ; instead of my object [ ” m y f i e l d ” ] = . . . ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-14
SLIDE 14

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

slide-15
SLIDE 15

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

slide-16
SLIDE 16

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

Objects as pairs

function make stack () { var stack = p a i r ( ” stack ” , [ ] ) ; return stack ; } function push ( stack , x ) { s e t t a i l ( stack , p a i r ( x , t a i l ( stack ) ) ) ; } //

  • ther

f u n c t i o n s var my stack = make stack ( ) ; push ( my stack , 4 ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-17
SLIDE 17

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 balance = i n i t i a l ; return function ( message , amount ) { i f ( message === ” withdraw ” ) { balance = balance − amount ; return balance ; } else { // message === ” d e p o s i t ” balance = balance + amount ; return balance ; } } var my account = make account (100); my account ( ” withdraw ” , 50);

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-18
SLIDE 18

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 balance = i n i t i a l ; return function ( message ) { i f ( message === ” withdraw ” ) { return function ( amount ){ balance = balance −amount ; return balance ; }; } else { // message === ” d e p o s i t ” return . . . ; }; } var my account = make account (100); ( my account ( ” withdraw ” ) ) ( 5 0 ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-19
SLIDE 19

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

slide-20
SLIDE 20

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

slide-21
SLIDE 21

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

var myVehicle = {max speed : 85};

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-22
SLIDE 22

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

function n e w v e h i c l e (ms){ return { max speed : ms}; } var my vehicle = n e w v e h i c l e ( 8 5 ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-23
SLIDE 23

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

function new car (mp) { var c = n e w v e h i c l e ( 9 5 ) ; c . max passengers = mp; return c ; } var my car = new car ( 5 ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-24
SLIDE 24

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

slide-25
SLIDE 25

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

slide-26
SLIDE 26

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

slide-27
SLIDE 27

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 () { } var peter = new Student ( ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-28
SLIDE 28

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”

function Student ( number ) { t h i s . matric number = number ; t h i s . y e a r o f s t u d y = 1; } var peter = new Student ( ”A0014234X” ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-29
SLIDE 29

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 . y e a r o f s t u d y = y ; } var peter = new Student ( ”A0014234X” ) ; s e t y e a r ( peter , 2 ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-30
SLIDE 30

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 function Student ( number ) { t h i s . matric number = number ; t h i s . y e a r o f s t u d y = 1; } function s e t y e a r ( y ) { t h i s . year = y ; } var peter = new Student ( ”A001342X” ) ; peter . s e t y e a r ( 2 ) ; // w i l l t h i s work?

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-31
SLIDE 31

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 ) { t h i s . 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 ) { t h i s . year = y ; };

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-32
SLIDE 32

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

var peter = new Student ( ”A001342X” ) ; peter . s e t y e a r ( 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

slide-33
SLIDE 33

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) { t h i s . s u p e r v i s o r = s ; Student . c a l l ( this , n ) ; } GraduateStudent . I n h e r i t s ( Student ) ; var paul = new GraduateStudent ( ” Prof Leong” , ”A0014234X” ) ;

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-34
SLIDE 34

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

slide-35
SLIDE 35

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

slide-36
SLIDE 36

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)

application method self or

  • bject application

control M3 M2 M1 M3 M2 M1 methods O2 O1

  • bjects

time

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-37
SLIDE 37

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 , 50 )

code lookup method lookup class arguments identifier method

  • bject

execution code address class CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-38
SLIDE 38

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

procedure application procedure execution executing code early binding

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-39
SLIDE 39

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

application

  • bject

application "this" execution method binding late "this" setting method method binding early application execution executing code

CS1101S: Programming Methodology 16—Object-Oriented Programming

slide-40
SLIDE 40

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