JavaScript Objects
Views (690)
Like
Share
ReportObjects - an object is an associative array (called hash). It stores key-value pairs.
Creating objects
Nested objects
for(key in obj) {
... obj[key] ...
}
//0,1,name, height, title, width
//width, height, title, 0, name, 1
Reference
The “new” constructor function , the resulting this is returned.
function Menu(title) {
this.title = title
this.width = 300
}
var menu = new Menu("Constr") => var menu = {height: 200, title: "Constr"}
alert(menu.title)
If the function returns an object, `this` is ignored
String conversion
toString - all objects have their own toString implementation
Custom toString
Numeric conversion
valueOf - objects do not have valueOf
If valueOf method exists and returns a primitive, then return it.
else, if toString method exists and returns a primitive, then return it.
else, throw an exception.
2)second tires arr.toSting() and returns 1,2,3
Creating objects
o = new Object() OR o = { }
var obj = {}
obj.site = 'Dns' OR obj['site'] = 'Dns' //key 'site' and value 'Dns'
alert(obj.site) OR alert(obj[site]) //Dns
delete obj.site OR delete obj[site]
var menu= {
width: 300,
height: 200,
title: "Menu"
}
// same as:
var menu = {}
menu.width = 300
menu.height = 200
menu.title = 'Menu'
var obj = {}
obj.site = 'Dns' OR obj['site'] = 'Dns' //key 'site' and value 'Dns'
alert(obj.site) OR alert(obj[site]) //Dns
delete obj.site OR delete obj[site]
var menu= {
width: 300,
height: 200,
title: "Menu"
}
// same as:
var menu = {}
menu.width = 300
menu.height = 200
menu.title = 'Menu'
Nested objects
var menu= {
width: 300,
height: 200,
title: "Menu"
size: {
top:10,
middle:20
}
}
alert( menu.size.top )
menu.toSource() //works FF
Key Exists - if the property does not exist, then undefined is returnedwidth: 300,
height: 200,
title: "Menu"
size: {
top:10,
middle:20
}
}
alert( menu.size.top )
menu.toSource() //works FF
var obj = {}
obj.nonexistant //undefined
if (obj.site !== undefined) //undefined
var obj = { key: undefined }
alert("key" in obj) //true
alert("site" in obj) //false
Iteratingobj.nonexistant //undefined
if (obj.site !== undefined) //undefined
var obj = { key: undefined }
alert("key" in obj) //true
alert("site" in obj) //false
for(key in obj) {
... obj[key] ...
}
var menu = {
width: 300,
height: 200,
title: "Menu",
"0":0,
"name": "Right",
"1":1
}
for(var key in menu) {
var val = menu[key];
alert("Key: "+key+" value:"+val);
}
order of iteration over object properties is not guaranteedwidth: 300,
height: 200,
title: "Menu",
"0":0,
"name": "Right",
"1":1
}
for(var key in menu) {
var val = menu[key];
alert("Key: "+key+" value:"+val);
}
//0,1,name, height, title, width
//width, height, title, 0, name, 1
Reference
var obj = menu;
obj.title ="Top Menu";
alert(obj.title) //Top Menu
function increment(obj) {
obj.width++;
}
increment(menu);
alert(menu.width) //301
Properties and methodsobj.title ="Top Menu";
alert(obj.title) //Top Menu
function increment(obj) {
obj.width++;
}
increment(menu);
alert(menu.width) //301
var menu = {
width: 300,
height: 200,
title: "Menu",
getTitle: function() {
this.title = prompt("Enter title?")
},
setTitle: function() {
alert(this.title)
}
}
menu.getTitle();
menu.setTitle();
width: 300,
height: 200,
title: "Menu",
getTitle: function() {
this.title = prompt("Enter title?")
},
setTitle: function() {
alert(this.title)
}
}
menu.getTitle();
menu.setTitle();
The “new” constructor function , the resulting this is returned.
function Menu(title) {
this.title = title
this.width = 300
}
var menu = new Menu("Constr") => var menu = {height: 200, title: "Constr"}
alert(menu.title)
function Menu() {
this.title = "Menu"
return { title: "Top" }
}
alert(new Menu().title) OR new Menu.title // Top
var menu = new Menu, menu.title // Top - omit braces if no arguments
this.title = "Menu"
return { title: "Top" }
}
alert(new Menu().title) OR new Menu.title // Top
var menu = new Menu, menu.title // Top - omit braces if no arguments
String conversion
toString - all objects have their own toString implementation
alert( {key: 'value'} ) // toString for Objects outputs: [object Object]
alert( [1,2] ) // toString for Arrays lists elements "1,2"
alert( new Date ) // toString for Dates outputs the date as a string
alert( [1,2] ) // toString for Arrays lists elements "1,2"
alert( new Date ) // toString for Dates outputs the date as a string
Custom toString
var menu = {
title: "Menu",
toString: function() {
return this.title;
}
}
alert(menu) // Menu
title: "Menu",
toString: function() {
return this.title;
}
}
alert(menu) // Menu
Numeric conversion
valueOf - objects do not have valueOf
If valueOf method exists and returns a primitive, then return it.
else, if toString method exists and returns a primitive, then return it.
else, throw an exception.
var menu = {
weight: 100,
valueOf: function() {
return this.weight;
}
}
alert(+menu) //100
var menu = {
weight: 100,
toString: function() {
return this.weight;
}
}
alert(menu/2) //50
var arr = [1,2,3]
alert( arr + '' ) //1,2,3
1)first tires arr.valueOf(), but arrays do not have valueOfweight: 100,
valueOf: function() {
return this.weight;
}
}
alert(+menu) //100
var menu = {
weight: 100,
toString: function() {
return this.weight;
}
}
alert(menu/2) //50
var arr = [1,2,3]
alert( arr + '' ) //1,2,3
2)second tires arr.toSting() and returns 1,2,3
This was originally posted here.
*This post is locked for comments