advanced javascript
DESCRIPTION
TRANSCRIPT
![Page 1: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/1.jpg)
Advanced JavaScript
Douglas Crockford
© 2006 Douglas Crockford
![Page 2: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/2.jpg)
Coming Up
• Inheritance
• Modules
• Debugging
• Efficiency
• JSON
![Page 3: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/3.jpg)
Inheritance
• Inheritance is object-oriented code reuse.
• Two Schools:
• Classical
• Prototypal
![Page 4: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/4.jpg)
Classical Inheritance
• Objects are instances of Classes.
• A Class inherits from another Class.
![Page 5: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/5.jpg)
Prototypal Inheritance
• Class-free.• Objects inherit from objects.• An object contains a secret link to another object.
• Mozilla calls it __proto__. var newObject = object(oldObject);
newObject
__proto__
oldObject
![Page 6: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/6.jpg)
Prototypal Inheritancevar oldObject = { firstMethod: function () {...}, secondMethod: function () {...}};
var newObject = object(oldObject);
newObject.thirdMethod = function () {...};
var myDoppelganger = object(newObject);
myDoppelganger.firstMethod();
![Page 7: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/7.jpg)
Prototypal Inheritance
• If an object has a foo property, then the chain will not be consulted when accessing member foo.
newObject.foo newObject['foo']
oldObjectnewObject
foo 2 foo 1
![Page 8: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/8.jpg)
Prototypal Inheritance
• If access of a member of newObject fails, then search for the member in oldObject.
• If that fails, then search for the member in Object.prototype.
newObject oldObject
![Page 9: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/9.jpg)
Prototypal Inheritance
• Changes in oldObject may be immediately visible in newObject.
• Changes to newObject have no effect on oldObject.
newObject oldObject
![Page 10: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/10.jpg)
Prototypal Inheritance
• oldObject can be the prototype for an unlimited number of objects which will all inherit its properties.
newObject oldObject
![Page 11: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/11.jpg)
Prototypal Inheritance
• newObject can be the prototype for an unlimited number of even newer objects.
• There is no limit to the length of the chain (except common sense).
oldObject
myDoppelganger = object(newObject);
newObject
![Page 12: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/12.jpg)
Augmentation
• Using the object function, we can quickly produce new objects that have the same state and behavior as existing objects.
• We can then augment each of the instances by assigning new methods and members.
![Page 13: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/13.jpg)
Pseudoclassical
• A prototypal inheritance language should have an operator like the object function, which makes a new object using an existing object as its prototype.
• JavaScript instead uses operators that look classical, but behave prototypally.
• They tried to have it both ways.
![Page 14: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/14.jpg)
Pseudoclassical
• Three mechanisms:
• Constructor functions.
• The new operator.
• The prototype member of functions.
![Page 15: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/15.jpg)
new operator
function Constructor() { this.member = initializer; return this; // optional}
Constructor.prototype.firstMethod = function (a, b) {...};Constructor.prototype.secondMethod = function (c) {...};
var newobject = new Constructor();
![Page 16: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/16.jpg)
Constructor
• When functions are designed to be used with new, they are called constructors.
• Constructors are used to make objects of a type or class.
• JavaScript's notation can get a little strange because it is trying to look like the old familiar classical pattern, while also trying to be something really different.
![Page 17: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/17.jpg)
new operator
• new Constructor() returns a new object with a link to Constructor.prototype.
var newObject = new Constructor();
Constructor.prototypenewObject
![Page 18: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/18.jpg)
new operator
• The Constructor() function is passed the new object in the this variable.
• This allows the Constructor function to customize the new object.
Constructor.prototypenewobject
![Page 19: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/19.jpg)
Warning
• The new operator is required when calling a Constructor.
• If new is omitted, the global object is clobbered by the constructor, and then the global object is returned instead of a new instance.
![Page 20: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/20.jpg)
prototype
•When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object.
![Page 21: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/21.jpg)
prototype
• You can add other members to a function's prototype. These members will be linked into objects that are produced by calling the function with the new operator.
• This allows for adding constants and methods to every object produced, without the objects having to be enlarged to contain them.
• Differential Inheritance.
![Page 22: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/22.jpg)
method method
Function.prototype.method =
function (name, func) {
this.prototype[name] = func;
return this;
};
Constructor.
method('first_method',
function (a, b) {...}).
method('second_method',
function (c) {...});
![Page 23: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/23.jpg)
Pseudoclassical Inheritance
• Classical inheritance can be simulated by assigning an object created by one constructor to the prototype member of another.
• This does not work exactly like the classical model.
function BiggerConstructor() {}; BiggerConstructor.prototype = new MyConstructor();
![Page 24: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/24.jpg)
Example
function Gizmo(id) {
this.id = id;
}
Gizmo.prototype.toString = function () {
return "gizmo " + this.id;
};
![Page 25: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/25.jpg)
Example
prototype
id string
function Gizmo(id) {
this.id = id;
}
Gizmo.prototype.toString = function () {
return "gizmo " + this.id;
};
constructor
toString function
prototype
constructor
toString function
new Gizmo(string)
Gizmo
Object
![Page 26: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/26.jpg)
Example
prototype
id string
function Gizmo(id) {
this.id = id;
}
Gizmo.prototype.toString = function () {
return "gizmo " + this.id;
};
constructor
toString function
prototype
constructor
toString function
new Gizmo(string)
Gizmo
Object
![Page 27: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/27.jpg)
Example
prototype
id string
function Gizmo(id) {
this.id = id;
}
Gizmo.prototype.toString = function () {
return "gizmo " + this.id;
};
constructor
toString function
prototype
constructor
toString function
new Gizmo(string)
Gizmo
Object
![Page 28: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/28.jpg)
Inheritance
• If we replace the original prototype object with an instance of an object of another class, then we can inherit another class's stuff.
![Page 29: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/29.jpg)
Example
function Hoozit(id) {
this.id = id;
}
Hoozit.prototype = new Gizmo();
Hoozit.prototype.test = function (id) {
return this.id === id;
};
![Page 30: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/30.jpg)
Example
prototype
prototype
function Hoozit(id) { this.id = id;}Hoozit.prototype = new Gizmo();Hoozit.prototype.test = function (id) { return this.id === id;};
test function
constructor
constructor
toString function
Gizmo
Hoozit
id string
new Hoozit(string)
![Page 31: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/31.jpg)
Example
prototype
prototype
function Hoozit(id) { this.id = id;}Hoozit.prototype = new Gizmo();Hoozit.prototype.test = function (id) { return this.id === id;};
test function
constructor
constructor
toString function
Gizmo
Hoozit
id string
new Hoozit(string)
![Page 32: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/32.jpg)
object function
• A prototypal inheritance language should have an operator like the object function, which makes a new object using an existing object as its prototype.
![Page 33: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/33.jpg)
object function
function object(o) { function F() {} F.prototype = o; return new F(); }
![Page 34: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/34.jpg)
object function
prototype
F
function object(o) { function F() {} F.prototype = o; return new F();
} newobject = object(oldobject)
constructor
![Page 35: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/35.jpg)
object function
prototype
F
function object(o) { function F() {} F.prototype = o; return new F();
} newobject = object(oldobject)
oldobject
constructor
![Page 36: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/36.jpg)
object function
prototype
F
newobject
function object(o) { function F() {} F.prototype = o; return new F();
} newobject = object(oldobject)
oldobject
![Page 37: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/37.jpg)
object function
newobject
function object(o) { function F() {} F.prototype = o; return new F();
} newobject = object(oldobject)
oldobject
![Page 38: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/38.jpg)
Public Method
• A Public Method is a function that uses this to access its object.
• A Public Method can be reused with many "classes".
![Page 39: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/39.jpg)
Public Methods
function (string) {
return this.member + string;
}
• We can put this function in any object at it works.
• Public methods work extremely well with prototypal inheritance and with pseudoclassical inheritance.
![Page 40: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/40.jpg)
Singletons
• There is no need to produce a class-like constructor for an object that will have exactly one instance.
• Instead, simply use an object literal.
![Page 41: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/41.jpg)
Singletons
var singleton = { firstMethod: function (a, b) { ... }, secondMethod: function (c) { ... }};
![Page 42: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/42.jpg)
Singletons
• The methods of a singleton can enjoy access to shared private data and private methods.
![Page 43: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/43.jpg)
Functions
Functions are used as
• Functions
• Methods
• Constructors
• Classes
• Modules
![Page 44: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/44.jpg)
Module
• Variables defined in a module are only visible in the module.
• Functions have scope.
• Variables defined in a function only visible in the function.
• Functions can be used a module containers.
![Page 45: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/45.jpg)
Global variables are evil
• Functions within an application can clobber each other.
• Cooperating applications can clobber each other.
• Use of the global namespace must be minimized.
![Page 46: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/46.jpg)
Singletonsvar singleton = function () { var privateVariable; function privateFunction(x) { ...privateVariable... }
return { firstMethod: function (a, b) { ...privateVariable... }, secondMethod: function (c) { ...privateFunction()... } };}();
![Page 47: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/47.jpg)
Applications are Singletons
YAHOO.MyProperty = function () { var privateVariable; function privateFunction(x) { ...privateVariable... }
return { firstMethod: function (a, b) { ...privateVariable... }, secondMethod: function (c) { ...privateFunction()... } };}();
![Page 48: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/48.jpg)
Privileged Method
• A Privileged Method is a function that has access to secret information.
• A Privileged Method has access to private variables and private methods.
• A Privileged Method obtains its secret information through closure.
![Page 49: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/49.jpg)
Power Constructor
• Put the singleton module pattern in constructor function, and we have a power constructor pattern.
1. Make a new object somehow.
2. Augment it.
3. Return it.
![Page 50: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/50.jpg)
function powerConstructor() { var that = object(oldObject), privateVariable; function privateFunction(x) {}
that.firstMethod = function (a, b) { ...privateVariable... }; that.secondMethod = function (c) { ...privateFunction()... }; return that;}
![Page 51: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/51.jpg)
Power Constructor
• Public methods (from the prototype) var that = object(my_base);
• Private variables (var)• Private methods (inner functions)• Privileged methods (that...)
• No need to use new myObject = power_constructor();
![Page 52: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/52.jpg)
Parasitic Inheritance
• A power constructor calls another constructor, takes the result, augments it, and returns it as though it did all the work.
![Page 53: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/53.jpg)
function symbol(s, p) { return { id: s, lbp: p, value: s };} function delim(s) { return symbol(s, 0);}
function stmt(s, f) { var x = delim(s); x.identifier = true; x.reserved = true; x.fud = f; return x;}
function blockstmt(s, f) { var x = stmt(s, f); x.block = true; return x;}
![Page 54: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/54.jpg)
Pseudoclassical Inheritance
function Gizmo(id) { this.id = id;}Gizmo.prototype.toString = function () { return "gizmo " + this.id;};
function Hoozit(id) { this.id = id;}Hoozit.prototype = new Gizmo();Hoozit.prototype.test = function (id) { return this.id === id;};
![Page 55: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/55.jpg)
Parasitic Inheritancefunction gizmo(id) { return { id: id, toString: function () { return "gizmo " + this.id; } };}
function hoozit(id) { var that = gizmo(id); that.test = function (testid) { return testid === this.id; }; return that;}
![Page 56: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/56.jpg)
Secretsfunction gizmo(id) { return { toString: function () { return "gizmo " + id; } };}
function hoozit(id) { var that = gizmo(id); that.test = function (testid) { return testid === id; }; return that;}
![Page 57: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/57.jpg)
Shared Secretsfunction gizmo(id, secret) { secret = secret || {}; secret.id = id; return { toString: function () { return "gizmo " + secret.id; }; };}
function hoozit(id) { var secret = {}, /*final*/ that = gizmo(id, secret); that.test = function (testid) { return testid === secret.id; }; return that;}
![Page 58: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/58.jpg)
Super Methodsfunction hoozit(id) { var secret = {}, that = gizmo(id, secret), super_toString = that.toString; that.test = function (testid) { return testid === secret.id; }; that.toString = function () { return super_toString.apply(that, []);
}; return that;}
![Page 59: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/59.jpg)
Inheritance Patterns
• Prototypal Inheritance works really well with public methods.
• Parasitic Inheritance works really well with privileged and private and public methods.
• Pseudoclassical Inheritance for elderly programmers who are old and set in their ways.
![Page 60: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/60.jpg)
Working with the Grain
• Pseudoclassical patterns are less effective than prototypal patterns or parasitic patterns.
• Formal classes are not needed for reuse or extension.
• Be shallow. Deep hierarchies are not effective.
![Page 61: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/61.jpg)
later method
• The later method causes a method on the object to be invoked in the future.
my_object.later(1000, "erase", true);
![Page 62: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/62.jpg)
later methodObject.prototype.later = function (msec, method) { var that = this, args = Array.prototype.slice. apply(arguments, [2]); if (typeof method === 'string') { method = that[method]; } setTimeout(function () { method.apply(that, args); }, msec); return that; };
![Page 63: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/63.jpg)
Multiples
• When assigning functions in a loop, be aware that all of the functions are bound to the same closure.
• This can be avoided by using a factor function to produce unique bindings.
![Page 64: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/64.jpg)
Multiplesfor (i ...) { var div_id = divs[i].id; divs[i].onmouseover = function () { show_element_id(div_id); };}
for (i ...) { var div_id = divs[i].id; divs[i].onmouseover = function (id) { return function () { show_element_id(id); }; }(div_id);}
![Page 65: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/65.jpg)
Debugging
• As programs get larger and more complex, debugging tools are required for efficient development.
![Page 66: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/66.jpg)
Debugging
• IE Microsoft Script Debugger
Office 2003 Visual Studio
• Mozilla Venkman Firebug
• Safari Drosera
![Page 67: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/67.jpg)
Microsoft Script Debugger
![Page 68: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/68.jpg)
Microsoft Script Debugger
![Page 69: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/69.jpg)
Microsoft Script Debugger
![Page 70: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/70.jpg)
Microsoft Script Debugger
![Page 71: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/71.jpg)
Venkman
![Page 72: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/72.jpg)
Venkman
![Page 73: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/73.jpg)
Venkman
![Page 74: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/74.jpg)
debugger
• The debugger statement can be used as a programmable breakpoint.
if (something === 'wrong') { debugger; }
![Page 75: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/75.jpg)
Performance
• Provide a good experience.
• Be respectful of our customer's time.
• Hoare's Dictum: Premature optimization is the root of all evil.
![Page 76: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/76.jpg)
Efficiency
• The first priority must always be correctness.
• Optimize when necessary.
• Consider algorithmic improvements O (n) v O (n log n) v O (n2)
• Watch for limits.
![Page 77: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/77.jpg)
Coding Efficiency
• Common subexpression removal
• Loop invariant removal
![Page 78: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/78.jpg)
Before
for (var i = 0; i < divs.length; i += 1) { divs[i].style.color = "black"; divs[i].style.border = thickness + 'px solid blue'; divs[i].style.backgroundColor = "white"; }
![Page 79: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/79.jpg)
After
var border = thickness + 'px solid blue',
nrDivs = divs.length;
for (var i = 0; i < nrDivs; i += 1) {
var ds = divs[i].style;
ds.color = "black";
ds.border = border;
ds.backgroundColor = "white";
}
![Page 80: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/80.jpg)
Strings
• Concatenation with + Each operation allocates memory
foo = a + b;
• Concatenate with array.join('') The contents of an array are concatenated into a single string
foo = [a, b].join('');
![Page 81: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/81.jpg)
Minification vs Obfuscation
• Reduce the amount of source code to reduce download time.
• Minification deletes whitespace and comments.
• Obfuscation also changes the names of things.
• Obfuscation can introduce bugs.• Never use tools that cause bugs if you can avoid it. http://www.crockford.com/javascript/jsmin.html
![Page 82: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/82.jpg)
JSON
• JavaScript Object Notation.• A Data Interchange Format.• Text-based.• Light-weight.• Easy to parse.• Language Independent.• A Subset of ECMA-262 ECMAScript Third Edition.
![Page 83: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/83.jpg)
Object
{ : }valuestring
object
,
![Page 84: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/84.jpg)
Array
[ ]value
array
,
![Page 85: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/85.jpg)
Value
number
string
value
object
false
null
array
true
![Page 86: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/86.jpg)
Stringstring
"Any U N ICO DE character except" or \ or control character
\ "
\
quotation m ark
reverse solidus
/solidus
bbackspace
form feed
new line
carriage return
horizontal tab
4 hexadecim al digits
f
n
r
t
u
"
![Page 87: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/87.jpg)
Number
number
digit 1 - 9
.0
digit
e
E
digit
-
digit
+
-
![Page 88: Advanced Javascript](https://reader033.vdocument.in/reader033/viewer/2022061203/547e1db3b4af9f67088b474f/html5/thumbnails/88.jpg)
Advanced JavaScript
Douglas Crockford
© 2006 Douglas Crockford