42. It’s easy...
var person = new Object();
person.name = "Scott";
person.say = function(){
return "I am " + this.name;
};
console.log(person.say());
43. but wrong! :-(
var person = new Object();
person.name = "Scott";
person.say = function(){
return "I am " + this.name;
};
console.log(person.say());
{antipattern}
44. var person = {};
person.name = "Scott";
person.say = function(){
return "I am " + this.name;
};
console.log(person.say());
{pattern}
45. What if we need similar objects...
var person = {};
person.name = "Scott";
person.say = function(){
return "I am " + this.name;
};
console.log(person.say()); // I am Scott
var otherPerson = {};
otherPerson.name = "Tiger";
otherPerson.say = function(){
return "I am " + this.name;
};
console.log(otherPerson.say()); // I am Tiger
46. A lot of duplication
var person = {};
person.name = "Scott";
person.say = function(){
return "I am " + this.name;
};
console.log(person.say()); // I am Scott
var otherPerson = {};
otherPerson.name = "Tiger";
otherPerson.say = function(){
return "I am " + this.name;
};
console.log(otherPerson.say()); // I am Tiger
48. Custom Constructor Functions
var Person = function(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
}
}
var person = new Person("Scott");
console.log(person.say()); // I am Scott
{pattern}
49. Behind the scenes...
var Person = function(name){
// var this = {};
// this.prototype = {constructor: this}
this.name = name;
this.say = function(){
return "I am " + this.name;
};
// return this;
};
{pattern}
50. So, at the end...
var Person = function(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
};
};
var scott = new Person('Scott');
var tiger = new Person('Tiger');
console.log(scott.say());
console.log(tiger.say());
{pattern}
52. this will point to global object
var Person = function(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
};
};
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(typeof scott); //object
console.log(scott.name); // Scott
console.log(typeof adam); //'undefined'
console.log(window.name); // Adam
53. this will point to global object
var Person = function(name){
this.name = name;
this.say = function(){
return "I am " + this.name;
};
};
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(typeof scott); //object
console.log(scott.name); // Scott
console.log(typeof adam); //'undefined'
console.log(window.name); // Adam
55. var Person = function(name){
var that = {};
that.name = name;
that.say = function(){
return "I am " + that.name;};
return that;
};
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(typeof scott); //Object
console.log(scott.name); // Scott
console.log(typeof adam); //Object
console.log(adam.name); // Adam
{pattern}
56. var Person = function(name){
var that = {};
that.name = name;
that.say = function(){
return "I am " + that.name;};
return that;
};
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(typeof scott); //Object
console.log(scott.name); // Scott
console.log(typeof adam); //Object
console.log(adam.name); // Adam
{pattern}
57. Drawback: we loose prototype reference :-(
var Person = function(name){
var that = {};
that.name = name;
that.say = function(){
return "I am " + that.name;
};
return that;
};
Person.prototype.iamhumanbeing = true;
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(scott.iamhumanbeing); // undefined
console.log(adam.iamhumanbeing); // undefined
58. Drawback: we loose prototype reference :-(
var Person = function(name){
var that = {};
that.name = name;
that.say = function(){
return "I am " + that.name;
};
return that;
};
Person.prototype.iamhumanbeing = true;
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(scott.iamhumanbeing); // undefined
console.log(adam.iamhumanbeing); // undefined
68. Behind the scenes...
var Person = function(name){
// this.prototype = {constructor: this}
var that = {};
that.name = name;
that.say = function(){
return "I am " + that.name;
};
return that;
};
69. Self invoking constructor
var Person = function(name){
if (this instanceof Person) {
this.name = name;
this.say = function(){
return "I am " + that.name;
}
}
else {
return new Person(name);
}
};
Person.prototype.iamhumanbeing = true;
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(scott.name); // Scott
console.log(adam.name); // Adam
console.log(scott.iamhumanbeing); // true
console.log(adam.iamhumanbeing); // true
{pattern}
70. Self invoking constructor
var Person = function(name){
if (this instanceof Person) {
this.name = name;
this.say = function(){
return "I am " + that.name;
}
}
else {
return new Person(name);
}
};
Person.prototype.iamhumanbeing = true;
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(scott.name); // Scott
console.log(adam.name); // Adam
console.log(scott.iamhumanbeing); // true
console.log(adam.iamhumanbeing); // true
{pattern}
71. Self invoking constructor
var Person = function(name){
if (this instanceof Person) {
this.name = name;
this.say = function(){
return "I am " + that.name;
}
}
else {
return new Person(name);
}
};
Person.prototype.iamhumanbeing = true;
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(scott.name); // Scott
console.log(adam.name); // Adam
console.log(scott.iamhumanbeing); // true
console.log(adam.iamhumanbeing); // true
{pattern}
72. Self invoking constructor
var Person = function(name){
if (this instanceof Person) {
this.name = name;
this.say = function(){
return "I am " + that.name;
}
}
else {
return new Person(name);
}
};
Person.prototype.iamhumanbeing = true;
var scott = new Person('Scott')
var adam = Person('Adam')
console.log(scott.name); // Scott
console.log(adam.name); // Adam
console.log(scott.iamhumanbeing); // true
console.log(adam.iamhumanbeing); // true
{pattern}
82. function Gadget(){
this.name = 'iPod';
this.stretch = function(){
return 'iPad';
}
};
var toy = new Gadget();
console.log(toy.name); // `iPod`
toy.name = 'Zune'
console.log(toy.name); // `Zune` is public
console.log(toy.stretch()); // stretch() is public
{antipattern}
83. Create private member
function Gadget(){
var name = 'iPod';
this.getName = function(){
return name;
}
};
var toy = new Gadget();
console.log(toy.getName()); // `iPod`
toy.name = 'Zune'
console.log(toy.getName()); // `iPod`
{pattern}
84. Create private member
function Gadget(){
var name = 'iPod';
this.getName = function(){
return name;
}
};
var toy = new Gadget();
console.log(toy.getName()); // `iPod`
toy.name = 'Zune'
console.log(toy.getName()); // `iPod`
{pattern}
85. Create private member
function Gadget(){
var name = 'iPod';
this.getName = function(){
return name;
}
};
var toy = new Gadget();
console.log(toy.getName()); // `iPod`
toy.name = 'Zune'
console.log(toy.getName()); // `iPod`
{pattern}
86. Create private member
function Gadget(){
var name = 'iPod';
this.getName = function(){
return name;
}
};
var toy = new Gadget();
console.log(toy.getName()); // `iPod`
toy.name = 'Zune'
console.log(toy.getName()); // `iPod`
{pattern}
87. for methods too
function Gadget() {
var name = 'iPod';
var upgrade = function(){
return 'iPhone';
}
this.getName = function () {
return name;
}
this.pay = function() {
return upgrade();
}
};
var toy = new Gadget();
console.log(toy.pay()); // `iPhone`
console.log(toy.upgrade()); // `error`
{pattern}
111. Dom access: write
for (var i = 0; i < 100; i += 1) {
document.getElementById("result").innerHTML += i + ", ";
}
{antipattern}
112. Dom access: update local variable
var i, content = "";
for (i = 0; i < 100; i += 1) {
content += i + ",";
}
document.getElementById("result").innerHTML += content;
{pattern}
113. Dom access: read
var padding = document.getElementById("result").style.padding,
margin = document.getElementById("result").style.margin;
{antipattern}
114. Dom access: read with local variable
var style = document.getElementById("result").style,
padding = style.padding,
margin = style.margin;
{pattern}
115. Dom manipulation
// appending nodes as they are created
var p, t;
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
document.body.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
document.body.appendChild(p);
{antipattern}
116. Dom manipulation
// appending nodes as they are created
var p, t;
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
document.body.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
document.body.appendChild(p);
{antipattern}
117. Dom manipulation
var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);
{pattern}
118. Dom manipulation
var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);
{pattern}
119. Dom manipulation
var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);
{pattern}
120. Dom manipulation
var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);
{pattern}
121. The place of <script> element
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="jquery.js"></script>
<script src="jquery.quickselect.js"></script>
<script src="jquery.lightbox.js"></script>
<script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>
Worst
{antipattern}
122. The place of <script> element
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20110127.js"></script>
</head>
<body>
...
</body>
</html>
{antipattern}
123. The place of <script> element
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20110127.js"></script>
</body>
</html>
{pattern}