julian on javascript: objects julian m bucknall, cto

Download Julian on JavaScript: Objects Julian M Bucknall, CTO

Post on 17-Dec-2015




4 download

Embed Size (px)


  • Slide 1
  • Julian on JavaScript: Objects Julian M Bucknall, CTO
  • Slide 2
  • Ubiquitous objects Everything thats not a boolean, number, string, null or undefined is an object Namely: Arrays are objects Functions are objects And objects are objects
  • Slide 3
  • An object is A hash table, or A collection of key/value pairs The keys are strings The values can be any type If theyre data theyre known as properties If functions, theyre known as methods Passed as a reference not a value NOT an instance of a class
  • Slide 4
  • 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
  • Slide 5
  • Creating an empty object var o = {}; Preferred var o = new Object(); Its beginner stuff, no one does it this way var o = Object.create(Object.prototype); Just dont
  • Slide 6
  • 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
  • Slide 7
  • Object literals Are great since you can use them wherever a value is needed
  • Slide 8
  • 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
  • Slide 9
  • Inheritance Objects are NOT instances of some class There are no classes in JavaScript Objects can inherit from each other Done through the prototype
  • Slide 10
  • Prototypes: reading manager officeNumber (prototype link) manager officeNumber (prototype link) employee name (prototype link) employee name (prototype link)
  • Slide 11
  • Prototypes: writing manager officeNumber (prototype link) manager officeNumber (prototype link) employee name (prototype link) employee name (prototype link)
  • Slide 12
  • Object.create Object.create() makes a new object that inherits from (has as prototype) an existing one
  • Slide 13
  • 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
  • Slide 14
  • Prototypal inheritance Works by Defining some interesting object Then creating other objects with that as prototype Object.create Then customizing those new objects
  • Slide 15
  • Prototypal inheritance The end of the prototypal chain is always Object.protoype So all objects have some inherited methods toString() hasOwnProperty()
  • Slide 16
  • 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 Dont use for.. in with arrays, use for The prototype is Array.prototype
  • Slide 17
  • How do you identify an array? typeof obj returns object Rats! obj instanceof Array Pretty good, but doesnt work if object is from another iframe ECMAScript 5? Array.isArray(obj) Object.prototype.toString(obj) returns "[object Array]"
  • Slide 18
  • Creating an array var a = new Array(); Its beginner stuff, people var a = []; Much better, no need to declare initial size var a = [1, 2, "3", true]; Much easier to read
  • Slide 19
  • Array methods Defined on the Array prototype Examples: push/pop shift/unshift concat/join slice/splice sort
  • Slide 20
  • 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
  • Slide 21
  • Thank You Julian M Bucknall CTO DevExpress @jmbucknall julianb@devexpress.com http://devexpress.com/julian