julian on javascript: objects julian m bucknall, cto

21
Julian on JavaScript: Objects Julian M Bucknall, CTO

Upload: neil-williamson

Post on 17-Dec-2015

228 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Julian on JavaScript: Objects Julian M Bucknall, CTO

Julian on JavaScript: Objects

Julian M Bucknall, CTO

Page 2: Julian on JavaScript: Objects Julian M Bucknall, CTO

Ubiquitous objects− Everything that’s not a boolean, number,

string, null or undefined is … an object− Namely:

− Arrays are objects− Functions are objects− And objects are objects

Page 3: Julian on JavaScript: Objects Julian M Bucknall, CTO

An object is…− A hash table, or− A collection of key/value pairs

− The keys are strings− The values can be any type

− If they’re data they’re known as properties− If functions, they’re known as methods

− Passed as a reference not a value

− NOT an instance of a class

Page 4: Julian on JavaScript: Objects Julian M Bucknall, CTO

Extending objects− Objects are not fixed:

− You can add new properties/methods− You can remove a property/method

− delete(myObject.name);− You can redefine a property/method

Page 5: Julian on JavaScript: Objects Julian M Bucknall, CTO

Creating an empty object− var o = {};

− Preferred − var o = new Object();

− It’s beginner stuff, no one does it this way− var o = Object.create(Object.prototype);− Just don’t

Page 6: Julian on JavaScript: Objects Julian M Bucknall, CTO

Creating an object− Easy way: object literals

− Start with open brace, end with closing brace− Define set of key/value pairs

− Separate them with commas− Each key is a string or some identifier− Each value can be anything, including expressions− Separate key from value with colon

Page 7: Julian on JavaScript: Objects Julian M Bucknall, CTO

Object literals…− Are great since you can use them

wherever a value is needed

Page 8: Julian on JavaScript: Objects Julian M Bucknall, CTO

Object literals…− Are great for passing a set of data

(parameters) to a function as a single parameter

− Allows for default parameters− Needs an “extend” type function

Page 9: Julian on JavaScript: Objects Julian M Bucknall, CTO

Inheritance− Objects are NOT instances of some class

− There are no classes in JavaScript− Objects can inherit from each other

− Done through the “prototype”

Page 10: Julian on JavaScript: Objects Julian M Bucknall, CTO

Prototypes: readingmanager

− officeNumber− (prototype link)

employee− name− (prototype link)

Page 11: Julian on JavaScript: Objects Julian M Bucknall, CTO

Prototypes: writingmanager

− officeNumber− − (prototype link)

employee− name− (prototype link)

Page 12: Julian on JavaScript: Objects Julian M Bucknall, CTO

Object.create− Object.create() makes a new object that inherits

from (has as prototype) an existing one

Page 13: Julian on JavaScript: Objects Julian M Bucknall, CTO

Prototypal inheritance− C# has classes and classes inherit from

each other− JavaScript has objects and objects inherit

from each other through the prototype

− It does the same thing, but differently

Page 14: Julian on JavaScript: Objects Julian M Bucknall, CTO

Prototypal inheritance− Works by…

− Defining some interesting object− Then creating other objects with that as

prototype− Object.create

− Then customizing those new objects

Page 15: Julian on JavaScript: Objects Julian M Bucknall, CTO

Prototypal inheritance− The end of the prototypal chain is always Object.protoype

− So all objects have some inherited methods− toString()− hasOwnProperty()

Page 16: Julian on JavaScript: Objects Julian M Bucknall, CTO

Arrays− Are objects− Are wacky compared to C#

− Elements are key/value pairs− Key is the index as a string− length is always computed as “largest index”

plus 1− No single type for values− Don’t use “for .. in” with arrays, use for

− The prototype is Array.prototype

Page 17: Julian on JavaScript: Objects Julian M Bucknall, CTO

How do you identify an array?− typeof obj returns “object”

− Rats!− obj instanceof Array

− Pretty good, but doesn’t work if object is from another iframe

− ECMAScript 5? Array.isArray(obj)− Object.prototype.toString(obj)

returns "[object Array]"

Page 18: Julian on JavaScript: Objects Julian M Bucknall, CTO

Creating an array− var a = new Array();

− It’s beginner stuff, people− var a = [];

− Much better, no need to declare initial size− var a = [1, 2, "3", true];

− Much easier to read

Page 19: Julian on JavaScript: Objects Julian M Bucknall, CTO

Array methods− Defined on the Array prototype− Examples:

− push/pop− shift/unshift− concat/join− slice/splice− sort

Page 20: Julian on JavaScript: Objects Julian M Bucknall, CTO

Removing an element− delete myArray[index];

− Just sets the element to undefined− myArray.splice(index, 1);

− Removes the element− Reindexes the higher elements− Changes the length

Page 21: Julian on JavaScript: Objects Julian M Bucknall, CTO

Thank YouJulian M Bucknall ∙ CTO ∙ DevExpress

@[email protected]://devexpress.com/julian