1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. 22 Outline JavaScript Objects Inheritance Next class: Built-in functions

3. Two features of Objects Property – Data – Variables Behavior (action) – Functions – Methods 3

4. JavaScript Objects var myCar = new Object(); myCar.make = "Ford"; myCar.model = “Taurus"; myCar.year = 2001; 4

5. JavaScript Objects Objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it. myCar["make"] = "Ford"; myCar["model"] = " Taurus "; myCar["year"] = 2001; or property name as a variable var propertyName1 = “make”; myCar[propertName1] = “Ford”; 5

6. Creating New Objects 1)Using object initializer. 2)Create a constructor function, then instantiate an object using that function and the new operator. 3)Object.create(): creates new object with specified prototype object and properties. 6

7. 1)Using object initializer. var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}}; Note that the engine property is also an object with its own properties. 7 Creating New Objects

8. 2) Using a constructor function  Create a constructor function, use a capital initial letter  Instantiate an object using the new operator. 8

9. 9 function Car(mk, mdl, yr) { this.make = mk; this.model = mdl; this.year = yr; } var mycar = new Car(“Ford", "Taurus ", 2001); alert(mycar.make+”,”+mycar[“model”]+”,”+mycar.year);

10. Prototypal Inheritance in JavaScript Objects inherit from objects In JavaScript, objects are not based on classes. JavaScript does not use the classical inheritance paradigm that is found in C++, Java, and C#. JavaScript uses prototypal inheritance. A new object can inherit the properties and methods of an existing object. Existing object: prototype for the new object. “New object is a clone of the existing object.” 10

11. Prototypal Inheritance in JavaScript Inheriting “Methods”: When an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.this

12. Creating New Objects 3) Using Object.create() subject object: prototype for subject instances. var subject = { code: "", desc: "", prog: [], info: {} }; Note: prog property: array info property : object 12

13. 13 Object.create(): creates new object with specified prototype object and properties. var bti220 = Object.create(subject); bti220.code = 'BTI220'; bti220.desc = 'Internet Architecture and Development'; bti220.prog = ['BSD']; bti220.info = { hours: 4, url:'http://scs.senecac.on.ca/course/bti220' }http://scs.senecac.on.ca/course/bti220 var ipc144 = Object.create(subject); ipc144.code = 'IPC144'; ipc144.desc = 'Introduction to Programming Using C'; ipc144.prog = ['CPD', 'CPA', 'CTY']; ipc144.info = { hours: 5, url:'http://scs.senecac.on.ca/course/ipc144' }http://scs.senecac.on.ca/course/ipc144 var btc140 = Object.create(subject); btc140.code = 'BTC140'; btc140.desc = 'Critical Thinking and Writing'; btc140.prog = ['BSD', 'IFS']; btc140.info = { hours: 3, url:'http://scs.senecac.on.ca/course/btc140' }http://scs.senecac.on.ca/course/btc140

14. 14 // Create a collection of all subject objects var all = [ipc144, btc140, bti220]; // Declare and initialize an accumulator var totalHours = 0; // Go through the collection, accumulate hours for (var i = 0; i < all.length; i++) { totalHours += all[i].info.hours; alert(all[i].prog); // display progs for each object }; // Report the total hours alert('Total hours is ' + totalHours);

15. Prototypal Inheritance in JavaScript Example: people create a person object, with some properties that are common to all persons – name, birthday, etc. create new objects that are based on the person prototype – student, and teacher. Each will have distinct properties AND the properties from the prototype. 15

16. 16 var person = { name: '', bday: new Date(), mail: '', prnt: function () { return 'Info for ' + this.name + ', born on ' + this.bday.toLocaleDateString() + ', email ' + this.mail; } }; //create student object using person as the prototype. var student = Object.create(person, { prog: { value: '' }, stid: { value: '' }}); var stu1 = Object.create(student); stu1.name = 'Stanley'; stu1.bday = new Date(1983, 10, 15); stu1.mail = 'stan@myseneca.ca'; stu1.prog = 'BSD'; stu1.stid = '012345678'; alert(stu1.name); var x =stu1.prnt(); alert(x);

17. 17 //create teacher object using person as the prototype. var teacher = Object.create(person, { offc: { value: "T2095" }, web: { value: " www.senecacollege.ca"}}); var tch1 = Object.create(teacher); tch1.name = "Sunny"; tch1.bday = new Date(1900,1,1); tch1.mail = "sunny.shi@senecacollege.ca"; alert(tch1.name+ ", " + tch1.offc); var x =tch1.prnt(); alert(x);

18. Another example from MDN var o = { a: 2, m: function(b){ return this.a + 1; } }; alert(o.m()); // 3 // When calling o.m in this case, 'this' refers to o var p = Object.create(o); // p is an object that inherits from o p.a = 12; // creates an own property 'a' on p alert(p.m()); // 13 // when p.m is called, 'this' refers to p. // So when p inherits the function m of o, // 'this.a' means p.a, the own property 'a' of p

19. Next Class JavaScript Build-in Objects 19

20. Thank you!