1. Object Oriented JavaScript

2. JavaScript Really only 4 types in JavaScript – number, string, boolean – Object (includes arrays) Remember that an object is really just a bunch of key-value pairs Ways to create an object – Object literal – Create a new blank object – Write a constructor function

3. Constructor functions Normal JavaScript function Called with new like Java Generally sets some properties and methods using “this” By convention, constructors start with uppercase letters Called with new // Constructs and returns a new Point object. function Point(xValue, yValue) { this.x = xValue; this.y = yValue; this.distanceFromOrigin = function() { return Math.sqrt(this.x * this.x + this.y * this.y); }; }

4. Prototypes every object contains a reference to its prototype – default: Object.prototype ; strings → String.prototype ; etc. a prototype can have a prototype, and so on – an object "inherits" all methods/data from its prototype(s) – doesn't have to make a copy of them; saves memory – prototypes allow JavaScript to mimic classes, inheritance

5. Prototypes Every function/object stores a prototype object property in it – When we define the Point function (constructor) a Point.prototype is created – Every object created will use the function prototype object as its prototype When new is called – A new object is created  this – Attaches the function prototype to the object – Returns the new object

6. The Prototype Chain When you ask for a property or method, JavaScript – sees if the object itself contains the property – recursively checks the objects prototype – continues up the prototype chain until the end and returns undefined if it cannot find it. x: 3 y: -4 __proto__ Point.prototype distanceToOrigin __proto__ Object.prototype toString __proto__

7. Using the Prototype for Methods Adding a property/method to a prototype will make it available to all objects that use that prototype Any prototype can be modified – Including built-in types // adding a method to the prototype function.prototype.name = function(params) { statements; }; Point.prototype.distanceFromOrigin = function() { return Math.sqrt(this.x * this.x + this.y * this.y); };

8. Inheritance using the Prototype To make a subclass, set its prototype to an object of the superclass Question: Why not this way? – SubClassName.prototype = SuperClassName.prototype; function SuperClassName(parameters) {... } function SubClassName(parameters) {... } //Connect the prototype chain SubClassName.prototype = new SuperClassName(parameters); // Reset the constructor SubClassName.prototype.constructor = SubClassName

9. Inheritance // Constructor for Point3D "subclass" function Point3D(x, y, z) { this.x = x; this.y = y; this.z = z; } // set it to be a "subclass" of Point Point3D.prototype = new Point(0, 0); // override distanceFromOrigin method to be 3D Point3D.prototype.distanceFromOrigin = function() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); };

10. Inheritance There is no equivalent of the super keyword – no easy way to call the superclass's constructor no built-in way to call an overridden superclass method – have to write it manually, e.g. var d = Point.prototype. distanceFromOrigin.apply(this); Or var d = Point.prototype. distanceFromOrigin.call(this); Apply requires an array for function args Call requires that function args are explicitly named

11. function A() // Define super class { this.x = 1; } A.prototype.DoIt = function() // Define Method { this.x += 1; } B.prototype = new A; // Define sub-class B.prototype.constructor = B; function B() { A.call(this); // Call super-class constructor (if desired) this.y = 2; } B.prototype.DoIt = function() // Define Method { A.prototype.DoIt.call(this); // Call super-class method (if desired) this.y += 1; } b = new B; document.write((b instanceof A) + ', ' + (b instanceof B) + ' '); b.DoIt(); document.write(b.x + ', ' + b.y);

12. Private Members Create private members using local variables and methods Closure allows access to the local variables function A() { var x = 7; this.GetX = function() { return x;} this.SetX = function(xT) { x = xT; } } obj = new A; obj2 = new A; document.write(obj.GetX() + ' ' + obj2.GetX()); obj.SetX(14); document.write(' ' + obj.GetX() + ' ' + obj2.GetX());

13. Namespaces In JavaScript, there are only two scopes – Local and global Problem: – In a large program, the namespace gets full – Using libraries complicates this more Solution – The JavaScript Module Pattern

14. The JavaScript Module Pattern Using global variables and self-executing functions, create the equivalent of a module Note: self-executing functions – Typically a function is just declared until called – Javascript allows us to declare the function and have it called immediately (function() { alert(“Hello World”); })(); OR (function() { alert(“Hello World”); }());

15. The JavaScript Module Pattern Global variable – cs340.module Everything else is private inside the module Protected namespace Returned object will run the constructor var cs340.module = (function () { // private variables and functions var foo = 'bar'; // constructor var module = function () { }; // prototype module.prototype = { constructor: module, something: function () { } }; // return the module return module; })(); var my_module = new cs340.module();

16. JavaScript Module Namespace catan.models.ClientModel = (function clientModelNameSpace(){ var ClientModel = (function ClientModelClass(){ var fullmodel = {}; function ClientModel(localConfig){ $("#debug").append(" In ClientModel Constructor"); } ClientModel.prototype.initFromServer = function(success){ … } ClientModel.prototype.getClientPlayerName = function(){ // TODO: Return the local player's correct name return "Sam"; } ClientModel.prototype.getClientPlayerColor = function(){ // TODO: Return the local player's correct color return "orange"; } return ClientModel; }()); return ClientModel; }()); var clientModel = new catan.models.ClientModel();