javascript: objects, methods,...
TRANSCRIPT
![Page 1: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/1.jpg)
Computer Science and Engineering College of Engineering The Ohio State University
JavaScript:Objects, Methods, Prototypes
Lecture 24
![Page 2: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/2.jpg)
Computer Science and Engineering The Ohio State University
What is an Object? Property: a key/value pair (aka “name”
/value) Object: a partial map of properties Keys must be unique
Creating an object, literal notationvar myCar = { make: "Acura",
year: 1996,plate: "NKR462" };
To access/modify an object's properties:myCar.make = "Ford"; //cf. RubymyCar["year"] = 2006;var str = "ate";myCar["pl" + str] == "NKR463";
![Page 3: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/3.jpg)
Computer Science and Engineering The Ohio State University
Object Properties
"Ford"
2006
"NKR463"
make
year
plate
myCar
![Page 4: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/4.jpg)
Computer Science and Engineering The Ohio State University
Arrays vs Associative Arrays
4
"hi"
3.14 true
true
false
0
1
2
0
1
2
3
4
"hi"
3.14 true
true
false
0
1
2
age
greeting
doors
pi
![Page 5: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/5.jpg)
Computer Science and Engineering The Ohio State University
Dynamic Size, Just Like Arrays
Objects can growmyCar.state = "OH"; // 4 propertiesvar myBus = {}; myBus.driver = true; // adds a propmyBus.windows = [2, 2, 2, 2];
Objects can shrinkdelete myCar.plate;// myCar is now {make: "Ford",// year: 2006, state: "OH"}
![Page 6: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/6.jpg)
Computer Science and Engineering The Ohio State University
Object Properties
"Ford"
2006
"NKR463"
make
year
plate
myCar
![Page 7: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/7.jpg)
Computer Science and Engineering The Ohio State University
Object Properties
"Ford"
2006
"NKR463"
"OH"
make
year
plate
state
myCar myCar.state = "OH";
![Page 8: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/8.jpg)
Computer Science and Engineering The Ohio State University
Object Properties
"Ford"
2006
"OH"
make
year
state
myCar delete myCar.plate;
![Page 9: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/9.jpg)
Computer Science and Engineering The Ohio State University
Testing Presence of Key
Boolean operator: inpropertyName in object
Evaluates to true iff object has the indicated property key
"make" in myCar //=> true"speedometer" in myCar //=> false"OH" in myCar //=> false
Property names are strings
![Page 10: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/10.jpg)
Computer Science and Engineering The Ohio State University
Iterating Over Properties
Iterate using for…in syntaxfor (property in object) {
…object[property]…}
Notice [] to access each propertyfor (p in myCar) {
document.write(p +": " + myCar[p]);}
![Page 11: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/11.jpg)
Computer Science and Engineering The Ohio State University
Methods The value of a property can be: A primitive (boolean, number, string, null…) A reference (object, array, function)
var temp = function(sound) {play(sound);return 0;
}myCar.honk = temp;
More succinctly:myCar.honk = function(sound) {play(sound);return 0;
}
![Page 12: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/12.jpg)
Computer Science and Engineering The Ohio State University
Example: Method
var myCar = {make: "Acura",year: 1996,plate: "NKR462",honk: function(sound) {
play(sound);return 0;
}};
![Page 13: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/13.jpg)
Computer Science and Engineering The Ohio State University
Object Properties
"Acura"
1996
"NKR462"
make
year
plate
honkplay(sound);return 0;
myCar
![Page 14: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/14.jpg)
Computer Science and Engineering The Ohio State University
Keyword “this” in Functions Recall distinguished formal parameter
x.f(y, z); //x is the distinguished argmt. Inside a function, keyword “this”
function report() {return this.plate + this.year;
} At run-time, “this” is set to the distinguished
argument of invocationmyCar = {plate: "NKR462", year: 1996};yourCar = {plate: 340, year: 2013};myCar.register = report;yourCar.info = report;myCar.register(); //=> "NKR4621996"yourCar.info(); //=> 2353
![Page 15: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/15.jpg)
Computer Science and Engineering The Ohio State University
Object Properties
"NKR462"
1996
plate
year
register
return this.plate + this.year;
myCar
report
340
2013
plate
year
info
yourCar
![Page 16: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/16.jpg)
Computer Science and Engineering The Ohio State University
Constructors Any function can be a constructor When calling a function with “new”:
1. Make a brand new (empty) object2. Call the function, with the new object as the
distinguished parameter3. Implicitly return the new object to caller
A “constructor” often adds properties to the new object simply by assigning them
function Dog(name) {this.name = name; // adds 1 property// no explicit return
}var furBall = new Dog("Rex");
Naming convention: Functions intended to be constructors are capitalized
![Page 17: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/17.jpg)
Computer Science and Engineering The Ohio State University
Examplefunction Circle(x, y, radius) { this.centerX = x; this.centerY = y; this.radius = radius; this.area = function() {return Math.PI * this.radius *
this.radius; }
}var c = new Circle(10, 12, 2.45);
![Page 18: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/18.jpg)
Computer Science and Engineering The Ohio State University
Creating a Circle Object
var c = new Circle(10, 12, 2.45);
this.centerX = x;this.centerY = y;... Etc ...
Circle
![Page 19: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/19.jpg)
Computer Science and Engineering The Ohio State University
Creating a Circle Object
var c = new Circle(10, 12, 2.45);
this.centerX = x;this.centerY = y;... Etc ...
Circle
![Page 20: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/20.jpg)
Computer Science and Engineering The Ohio State University
Creating a Circle Object
10
12
2.45
centerX
centerY
radius
return Math.PI * this.radius * this.radius
area
var c = new Circle(10, 12, 2.45);
this.centerX = x;this.centerY = y;... Etc ...
Circle
![Page 21: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/21.jpg)
Computer Science and Engineering The Ohio State University
Creating a Circle Object
10
12
2.45
centerX
centerY
radius
return Math.PI * this.radius * this.radius
c
area
var c = new Circle(10, 12, 2.45);
this.centerX = x;this.centerY = y;... Etc ...
Circle
![Page 22: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/22.jpg)
Computer Science and Engineering The Ohio State University
Creating a Circle Object
10
12
2.45
centerX
centerY
radius
return Math.PI * this.radius * this.radius
c
area
var c = new Circle(10, 12, 2.45);
this.centerX = x;this.centerY = y;... Etc ...
Circle
![Page 23: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/23.jpg)
Computer Science and Engineering The Ohio State University
Prototypes
Every object has a prototype A hidden, indirect property ([[Prototype]])
What is a prototype? Just another object! Like any other!
When accessing a property (i.e. obj.p) First look for p in obj If not found, look for p in obj's prototype If not found, look for p in that object's
prototype! And so on, until reaching the basic system
object
![Page 24: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/24.jpg)
Computer Science and Engineering The Ohio State University
Prototype Chaining
4"hi"
3.14
true
true
false
0
1
2
agegreeting
doors
pi
toString
hasOwnProperty
push
pop
etc…
![Page 25: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/25.jpg)
Computer Science and Engineering The Ohio State University
Class-Based Inheritance
static static static
interfaces
classes
objects
extends
extends
implements
instantiates
![Page 26: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/26.jpg)
Computer Science and Engineering The Ohio State University
Example
Consider two objectsvar dog = {name: "Rex", age: 3};var pet = {color: "blue"};
Assume pet is dog's prototype// dog.name is "Rex" // dog.color is "blue" (follow chain) pet.color = "brown"; // dog.color is "brown" (prop changed)dog.color = "green"; // pet.color is still "brown" (hiding)
![Page 27: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/27.jpg)
Computer Science and Engineering The Ohio State University
Delegation to Prototype
"brown""Rex"
3
colorname
age
"green"color
dog pet
![Page 28: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/28.jpg)
Computer Science and Engineering The Ohio State University
Prototypes Are Dynamic Too
Prototypes can add/remove properties Changes are felt by all children
// dog is {name: "Rex", age: 3}// dog.mood & pet.mood are undefinedpet.mood = "happy"; // add to pet// dog.mood is now "happy" toopet.bark = function() {
return this.name + " is " + this.mood;}dog.bark(); //=> "Rex is happy"pet.bark(); //=> "undefined is happy"
![Page 29: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/29.jpg)
Computer Science and Engineering The Ohio State University
Delegation to Prototype
"brown""Rex"
3
colorname
age
dog pet
"happy"mood
barkreturn this.name
+ " is "+ this.mood;
dog.bark();pet.bark();
![Page 30: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/30.jpg)
Computer Science and Engineering The Ohio State University
Connecting Objects & Prototypes
How does an object get a prototype?var c = new Circle();
Answer1. Every function has a prototype property Do not confuse with hidden [[Prototype]]!
2. Object's prototype link—[[Prototype]]—is set to the function's prototype property
When a function Foo is used as a constructor, i.e. new Foo(), the value of Foo's prototype property is the prototype object of the created object
![Page 31: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/31.jpg)
Computer Science and Engineering The Ohio State University
Prototypes And Constructors
area
constructor
prototype
this.centerX = x;this.centerY = y;... Etc ...
Circle
![Page 32: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/32.jpg)
Computer Science and Engineering The Ohio State University
Prototypes And Constructors
area
constructor
prototype
this.centerX = x;this.centerY = y;... Etc ...
Circle
c = new Circle()
![Page 33: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/33.jpg)
Computer Science and Engineering The Ohio State University
Prototypes And Constructors
area
constructor
prototype
this.centerX = x;this.centerY = y;... Etc ...
Circle
c = new Circle()
![Page 34: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/34.jpg)
Computer Science and Engineering The Ohio State University
Prototypes And Constructors
10
12
2.45
centerX
centerY
radius
area
constructor
prototype
this.centerX = x;this.centerY = y;... Etc ...
c
Circle
c = new Circle()
![Page 35: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/35.jpg)
Computer Science and Engineering The Ohio State University
Idiom: Methods in Prototypefunction Dog(n, a) {
this.name = n; this.age = a;
};
var canine = { bark: function (sound) {
return this.name + "says" + sound; }
};
Dog.prototype = canine;
![Page 36: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/36.jpg)
Computer Science and Engineering The Ohio State University
Idiom: Methods in Prototypefunction Dog(n, a) {
this.name = n; this.age = a;
};
var canine = { bark: function (sound) {
return this.name + "says" + sound; }
};
Dog.prototype = canine;
![Page 37: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/37.jpg)
Computer Science and Engineering The Ohio State University
Idiom: Methods in Prototypefunction Dog(n, a) {
this.name = n; this.age = a;
};
Dog.prototype = { bark: function (sound) {
return this.name + "says" + sound; }
}; // set prototype to new anonymous object
![Page 38: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/38.jpg)
Computer Science and Engineering The Ohio State University
Idiom: Methods in Prototypefunction Dog(n, a) {
this.name = n; this.age = a;
};
Dog.prototype.bark = function (sound) { return this.name + "says" + sound;
};
// better: extend existing prototype
![Page 39: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/39.jpg)
Computer Science and Engineering The Ohio State University
Methods in Prototype
"Rex"
6
name
age
bark
constructor
prototype
this.name = x;this.age = a;
Dog
return this.name+ "says" + sound;
prototype
r = new Dog() Dog.prototype
![Page 40: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/40.jpg)
Computer Science and Engineering The Ohio State University
Idiom: Classical Inheritancefunction Animal() { ... };function Dog() { ... };
Dog.prototype = new Animal();// create prototype for future dogs
Dog.prototype.constructor = Dog;// set prototype's constructor// properly (ie should point to Dog())
![Page 41: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/41.jpg)
Computer Science and Engineering The Ohio State University
Setting up Prototype Chains
constructor
prototype
Animal
constructor
prototype
Dog
new Animal()
"Rex"name
new Dog()
![Page 42: JavaScript: Objects, Methods, Prototypesweb.cse.ohio-state.edu/~sivilotti.1/teaching/current/3901/lectures/... · honk play(sound); return 0; myCar. Computer Science and Engineering](https://reader031.vdocuments.us/reader031/viewer/2022021821/5b0d608f7f8b9abc0a8d89dc/html5/thumbnails/42.jpg)
Computer Science and Engineering The Ohio State University
Summary
Objects as associative arrays Partial maps from keys to values Can dynamically add/remove properties Can iterate over properties
Method = function-valued property Keyword this for distinguished parameter
Constructor = any function Prototypes are "parent" objects Delegation up the chain of prototypes Prototype is determined by constructor Prototypes can be modified