JAVAscript Programming, Lecture Slides - Computer Science, Slides of Computers and Information technologies

Download JAVAscript Programming, Lecture Slides - Computer Science and more Slides Computers and Information technologies in PDF only on Docsity!

JavaScript

Ian Holyer Ian Holyer

JavaScript

● This chapter assumes that you know JavaScript or youThis chapter assumes that you know JavaScript or you

can learn it for yourself: there is a chapter in Web Tech: can learn it for yourself: there is a chapter in Web Tech:

● (^) http://www.cs.bris.ac.uk/Teaching/Resources/COMSM0104/lectures/http://www.cs.bris.ac.uk/Teaching/Resources/COMSM0104/lectures/

● It just has a few comments on object orientedIt just has a few comments on object oriented

programming, based on the Stage case study programming, based on the Stage case study

● JavaScript has objects with fields, and the fields canJavaScript has objects with fields, and the fields can

come and go, so maybe JavaScript (or Python or your come and go, so maybe JavaScript (or Python or your

favourite scripting language) is a better match for the favourite scripting language) is a better match for the

Stage project than Java - we'll see Stage project than Java - we'll see

● We'll tackle the Entity class againWe'll tackle the Entity class again

More Name Clashes

● An Entity needs methodsAn Entity needs methods link/unlink/find...link/unlink/find...

● MMethods are linked to JS objects as fieldsethods are linked to JS objects as fields

beach

tree

spade spade

link

south

link()

● This risks name clashes between link names, and ourThis risks name clashes between link names, and our

own implementation method names own implementation method names

● We can't afford these risks, because the program will beWe can't afford these risks, because the program will be

offered to unknown authors in the future offered to unknown authors in the future

● So an entity needs a separate data structure for the links,So an entity needs a separate data structure for the links,

just like Java just like Java

The Solution

● There is no map (hash table) data structure in JavaScript,There is no map (hash table) data structure in JavaScript,

other than using a plain object as a map other than using a plain object as a map

● So giving an entity a separate map solves half theSo giving an entity a separate map solves half the

problem, avoiding clashes with method names problem, avoiding clashes with method names

● The built-in names are still a problem, and are platformThe built-in names are still a problem, and are platform

dependent and difficult to find out about because they dependent and difficult to find out about because they

don't appear in don't appear in forfor x in objectx in object loopsloops

● The solution chosen was to use prefixes on the linkThe solution chosen was to use prefixes on the link

names names

● Although it is a slightly dirty way of handling hiddenAlthough it is a slightly dirty way of handling hidden

links, it cleans up the name clash problem! links, it cleans up the name clash problem!

Problems 1

● Although JavaScript doesn't have proper types andAlthough JavaScript doesn't have proper types and

classes, you can say that any object created by the classes, you can say that any object created by the

Counter() Counter() constructor is aconstructor is a CounterCounter objectobject

● Problems with approach 1 are:Problems with approach 1 are:

● (^) the functions get and count can be called from anywhere, not just as methods on counter objects ● (^) the fields are public ● (^) the methods must put this. in front of the fields all the time ● (^) each object has its own method pointers, so if there are a lot of methods, and a lot of objects, there could be space problems

Classes in JavaScript 2

● Here's how to make sure methods are just methods andHere's how to make sure methods are just methods and

not public functions not public functions

function Counter() { this.n = 0 this.get = get this.count = count function get() { return this.n; } function count() { this.n++; } } ... var c = new Counter();

function Counter() { this.n = 0 this.get = get this.count = count function get() { return this.n; } function count() { this.n++; } } ... var c = new Counter();

Problems 3

● There are two problems with private fields in JSThere are two problems with private fields in JS

● (^) it is an obscure and little-known technique involving closures that is difficult to find out about in books or tutorials ● (^) there is a potential space problem, because each object has another closure object associated with it behind the scenes

● However, once you know it, it is very effective, andHowever, once you know it, it is very effective, and

worth doing just because it gets rid of worth doing just because it gets rid of this.this. prefixesprefixes

Classes in JavaScript 4

● Here's how to share methods between objectsHere's how to share methods between objects

function Counter() { this.n = 0 if (Counter.classCreated) return Counter.classCreated = true Counter.prototype.get = get Counter.prototype.count = count function get() { return this.n; } function count() { this.n++; } } ... var c = new Counter();

function Counter() { this.n = 0 if (Counter.classCreated) return Counter.classCreated = true Counter.prototype.get = get Counter.prototype.count = count function get() { return this.n; } function count() { this.n++; } } ... var c = new Counter();

Personal Choice

● My personal choice is not to worry about any of this inMy personal choice is not to worry about any of this in

small scripts for "normal" web page tasks small scripts for "normal" web page tasks

● In a larger program like Stage, I prefer approach 3,In a larger program like Stage, I prefer approach 3,

because (a) the fields are truly private and (b) they have because (a) the fields are truly private and (b) they have

natural names and (c) they have no natural names and (c) they have no this.this. prefixes andprefixes and

(d) there is no ugly prototype stuff (d) there is no ugly prototype stuff

Other Issues

● TheThe constconst keyword is a non-standard extension ofkeyword is a non-standard extension of

Firefox etc., and so shouldn't be used Firefox etc., and so shouldn't be used

● JavaScript has no overloading, but one method can beJavaScript has no overloading, but one method can be

used with different numbers of arguments used with different numbers of arguments

● In the Java version, to give entities names in save files, aIn the Java version, to give entities names in save files, a

map from entities to names was used map from entities to names was used

● (^) That appears to work in JavaScript, but doesn't really, because an object doesn't have any identity (such as its pointer address) that can be used as a hash value ● (^) So, in the JavaScript implementation, an Entity has an explicit name (id) plus a comment to say it is only for load/save/debug