Scribd
Upload
13K views74 pages

Object-Oriented Javascript: Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6, 2008

Stoyan Stefanov gave a presentation on object-oriented JavaScript. He discussed how everything in JavaScript is an object except for primitive types. He explained functions are objects that can be invoked, and have properties like length and name. Prototypes are properties of function objects that are used to inherit properties and methods. Constructor functions are meant to be called with new and return an object. Inheritance can be achieved through classical inheritance with constructors, prototypal inheritance by linking to the prototype, or by copying properties from one object to another.

Uploaded by

Samir Ranjan Mohapatra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
13K views74 pages

Object-Oriented Javascript: Stoyan Stefanov, Yahoo! Inc. Beijing, Dec 6, 2008

Stoyan Stefanov gave a presentation on object-oriented JavaScript. He discussed how everything in JavaScript is an object except for primitive types. He explained functions are objects that can be invoked, and have properties like length and name. Prototypes are properties of function objects that are used to inherit properties and methods. Constructor functions are meant to be called with new and return an object. Inheritance can be achieved through classical inheritance with constructors, prototypal inheritance by linking to the prototype, or by copying properties from one object to another.

Uploaded by

Samir Ranjan Mohapatra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 74

Object-Oriented

JavaScript
Stoyan Stefanov, Yahoo! Inc.
Beijing, Dec 6th, 2008
About the presenter
Yahoo! Performance
YSlow 2.0
smush.it tool
phpied.com blog
First off
the Firebug console
Firebug console as a
learning tool
Console features
Inspect the contents of objects by
clicking on them
Tab auto-complete, a.k.a cheatsheet
Arrows and
Fiddle with any page
Any page
Fiddle
Objects
JavaScript !== Java
C-like syntax
Classes
Data types
A. Primitive:
number 1, 3, 1001, 11.12, 2e+3
string "a", "stoyan", "0"
boolean true | false
null
undefined

B. Objects
everything else
Objects
hash tables
key: value
A simple object
var obj = {};
obj.name = 'my object';
obj.shiny = true;
A simple object
var obj = {
shiny: true,
isShiny: function() {
return this.shiny;
}
};

obj.isShiny(); // true
Methods
When a property is a function
we can call it a method
Object literal
notation

Key-value pairs
Comma-delimited
Wrapped in curly braces

{a: 1, b: "test"}
Arrays
Arrays are objects too
Auto-increment properties
Some useful methods
Arrays
>>> var a = [1,3,2];
>>> a[0]
1
>>> typeof a
"object"
Array literal notation
var array = [
"Square",
"brackets",
"wrap",
"the",
"comma-delimited",
"elements"
];
JSON
Object literals + array literals
JavaScript Object Notation

{"num": 1, "str": "abc",


"arr": [1,2,3]}
Constructors
Functions
functions are objects
they have properties
they have methods
can be copied, deleted,
augmented...
special feature: invokable
Function
function say(what) {
return what;
}
Function
var say = function(what) {
return what;
};
Function
var say = function say(what) {
return what;
};
Functions are objects
>>> say.length
1
>>> say.name
"boo"
Functions are objects
>>> var tell = say;
>>> tell("doodles")
"doodles"
>>> tell.call(null, "moo!");
"moo!"
Return values

All functions always return a value


Return values

If a function doesnt return a


value explicitly, it returns
undefined
Return values

Functions can return objects,


including other functions
Constructors
Constructor functions
when invoked with new, functions
return an object known as this
you can modify this before its
returned
Constructor functions
var Person = function(name) {
this.name = name;
this.getName = function() {
return this.name;
};
};
Using the constructor

var me = new Person("Stoyan");


me.getName(); // "Stoyan"
Constructors
are just functions
A naming convention
MyConstructor
myFunction
constructor property
>>> function Person(){};
>>> var jo = new Person();
>>> jo.constructor === Person
true
constructor property
>>> var o = {};
>>> o.constructor === Object
true
>>> [1,2].constructor === Array
true
Built-in constructors
Object
Array
Function
RegExp
Number
String
Boolean
Date
Error, SyntaxError, ReferenceError
Use this Not that
var o = {}; var o = new Object();

var a = []; var a = new Array();

var re = /[a-z]/gmi; var re = new RegExp(


'[a-z]', 'gmi');

var fn = function(a, b){ var fn = new Function(


return a + b; 'a, b','return a+b');
}
Prototype
Prototype
is a property of the function
objects
Prototype
>>> var boo = function(){};
>>> typeof boo.prototype
"object"
Augmenting prototype
>>> boo.prototype.a = 1;
>>> boo.prototype.sayAh =
function(){};
Overwriting the
prototype

>>> boo.prototype =
{a: 1, b: 2};
Use of the prototype
The prototype is used when a
function is called as a constructor
Prototype usage
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function(){
return this.name;
};
Prototype usage
>>> var dude = new Person('dude');
>>> dude.name;
"dude"
>>> dude.say();
"dude"
Prototype usage
say() is a property of the
prototype object
but it behaves as if it's a
property of the dude object

can we tell the difference?


Own properties vs.
prototypes

>>> dude.hasOwnProperty('name');
true
>>> dude.hasOwnProperty('say');
false
isPrototypeOf()

>>> Person.prototype.isPrototypeOf(dude);
true
>>> Object.prototype.isPrototypeOf(dude);
true
__proto__
The objects have a secret link to
the prototype of the constructor
that created them
__proto__ is not directly exposed
in all browsers
__proto__

>>> dude.__proto__.hasOwnProperty('say')
true

>>> dude.prototype
??? // Trick question

>>> dude.__proto__.__proto__.
hasOwnProperty('toString')
true
Prototype chain
Its a live chain

>>> typeof dude.numlegs


"undefined"
>>> Person.prototype.numlegs = 2;
>>> dude.numlegs
2
Inheritance
Parent constructor
function NormalObject() {
this.name = 'normal';
this.getName = function() {
return this.name;
};
}
Child constructor
function PreciousObject(){
this.shiny = true;
this.round = true;
}
The inheritance
PreciousObject.prototype =
new NormalObject();
A child object
var crystal_ball = new PreciousObject();
crystal_ball.name = 'Crystal Ball.';

crystal_ball.round; // true
crystal_ball.getName(); // "Crystal Ball."
Inheritance by copying
Two objects
var shiny = {
shiny: true,
round: true
};
var normal = {
name: 'name me',
getName: function() {
return this.name;
}
};
extend()
function extend(parent, child) {
for (var i in parent) {
child[i] = parent[i];
}
}
Inheritance
extend(normal, shiny);
shiny.getName(); // "name me"
Prototypal inheritance
Beget object
function object(o) {
function F(){}
F.prototype = o;
return new F();
}
Beget object
>>> var parent = {a: 1};
>>> var child = object(parent);
>>> child.a;
1
>>> child.hasOwnProperty(a);
false
Wrapping up
Objects
Everything is an object (except a
few primitive types)
Objects are hashes
Arrays are objects
Functions
Functions are objects
Only invokable
Methods: call(), apply()
Properties: length, name, prototype
Prototype
Property of the function objects
Its an object
Useful with Constructor functions
Constructor
A function meant to be called with
new
Returns an object
Class
No such thing in JavaScript
Inheritance
Classical
Prototypal
By copying
and many other variants
Stoyan Stefanov, http://phpied.com
stoyan@yahoo-inc.com

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy