KEMBAR78
Object Oriented JavaScript - II | PPTX
BEING A JS NINJA:
Object Oriented
JavaScript
Agenda
1. Functions & Objects
2. Prototype Based Programming
3. Class Based -Prototype Based
4. Method Overloading ?
5. Some hacks
6. Questions
7. Exercises!
Functions ( )
• A SimpleJS function:
• function multiply(a,b){
• return a *b;
• };
• A simple assert function
• Note: A method is a function defined inside an object as its property!
Functions ( )
• JavaScript only has Scope.
• A function has access to all the variables and functions in the scope in
which it isdefined.
• Lets see an example!
• http://jsfiddle.net/suroorwijdan/dr3Bb/2/
this & undefined
“JavaScript has two errors, thisand undefined and whenthisis undefined,
Oh Boy!” - Mikael Rogers
• http://jsfiddle.net/suroorwijdan/6gHjH/4/
Functions ( )
• Closures
• Closures are one of the most powerful weapons for a JS Ninja
• Closures allow a ninja to have access to a function scope with an
exported innerfunction
• http://jsfiddle.net/suroorwijdan/nz9bM/9/
Objects { }
• For a ninja almost everything is an object
• Creating an object:
• Using a Constructor -var obj =new Car();
• Using object initializer -var obj={};
• Using Object.create()
• http://jsfiddle.net/suroorwijdan/p5x2G/
Call and apply
• call() and apply() methods defined on functions allows a Ninja to
change the context in which the function is executed
http://jsfiddle.net/suroorwijdan/XzzU8/
Prototype {} - {} - {}
“Most Confused Upon Part for budding Ninjas”
http://jsfiddle.net/suroorwijdan/h74gd/
Class vs Prototype Based
Class Based(Java) PrototypeBased (JavaScript)
Class and instance are distinct entities All objects are instances
Define a class with a class definition; instantiate
a class with constructor methods
Define and create a set of objects with
constructor functions
Create a single object with the new operator Same
Construct an object hierarchy by using class
definitions to define subclasses of existing
classes
Construct an object hierarchy by
assigning an object as the prototype
associated with a constructor function.
Inherit properties by following the class chain. Inherit properties by following the
prototype chain
Class definition specifies all properties of all
instances of a class. Cannot add properties
dynamically atrun time
Constructor function or prototype
specifies an initial set of properties. Can
add or remove properties dynamically to
individual objects or to the entire set of
objects
Method Overloading ?
Can weimplementmethod overloading inJavaScript,
ifYes, thenHow?? :|
http://jsfiddle.net/suroorwijdan/3xLtY/
Some Hacks!
• Append new array to another array:
• var a =[4,5,6];
• var b =[7,8,9];
• Array.prototype.push.apply(a, b);
• Get TimeStamp with+
• +new Date();
• Access Strings with []just like charAt()
• var a =“This is mytrick”;
• a[0] ==‘T’ //true;
Some Hacks!
• Swap variable values:
• var a =10;
• var b =20;
• [a,b] =[b,a]
And many more :http://code.google.com/p/jslibs/wiki/JavascriptTips
Some More Concepts
• Memoization: “DIY”
• A memorize function is a higher order function which caches the result
returned by the function passed to it
Exercises
• Implement Basic Inheritance with the example of Employee
• Add a forEach method in the prototype of Array
• Implement a function which multiplies the largest number with the first
argument
Contact us
Our Office
Client
Location
We are experts in MEAN
stack framework to build
scalable web apps
Click Here To Know More!
Have more queries related to
MEAN?
Talk To Our Experts

Object Oriented JavaScript - II

  • 2.
    BEING A JSNINJA: Object Oriented JavaScript
  • 3.
    Agenda 1. Functions &Objects 2. Prototype Based Programming 3. Class Based -Prototype Based 4. Method Overloading ? 5. Some hacks 6. Questions 7. Exercises!
  • 4.
    Functions ( ) •A SimpleJS function: • function multiply(a,b){ • return a *b; • }; • A simple assert function • Note: A method is a function defined inside an object as its property!
  • 5.
    Functions ( ) •JavaScript only has Scope. • A function has access to all the variables and functions in the scope in which it isdefined. • Lets see an example! • http://jsfiddle.net/suroorwijdan/dr3Bb/2/
  • 6.
    this & undefined “JavaScripthas two errors, thisand undefined and whenthisis undefined, Oh Boy!” - Mikael Rogers • http://jsfiddle.net/suroorwijdan/6gHjH/4/
  • 7.
    Functions ( ) •Closures • Closures are one of the most powerful weapons for a JS Ninja • Closures allow a ninja to have access to a function scope with an exported innerfunction • http://jsfiddle.net/suroorwijdan/nz9bM/9/
  • 8.
    Objects { } •For a ninja almost everything is an object • Creating an object: • Using a Constructor -var obj =new Car(); • Using object initializer -var obj={}; • Using Object.create() • http://jsfiddle.net/suroorwijdan/p5x2G/
  • 9.
    Call and apply •call() and apply() methods defined on functions allows a Ninja to change the context in which the function is executed http://jsfiddle.net/suroorwijdan/XzzU8/
  • 10.
    Prototype {} -{} - {} “Most Confused Upon Part for budding Ninjas” http://jsfiddle.net/suroorwijdan/h74gd/
  • 11.
    Class vs PrototypeBased Class Based(Java) PrototypeBased (JavaScript) Class and instance are distinct entities All objects are instances Define a class with a class definition; instantiate a class with constructor methods Define and create a set of objects with constructor functions Create a single object with the new operator Same Construct an object hierarchy by using class definitions to define subclasses of existing classes Construct an object hierarchy by assigning an object as the prototype associated with a constructor function. Inherit properties by following the class chain. Inherit properties by following the prototype chain Class definition specifies all properties of all instances of a class. Cannot add properties dynamically atrun time Constructor function or prototype specifies an initial set of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects
  • 12.
    Method Overloading ? Canweimplementmethod overloading inJavaScript, ifYes, thenHow?? :| http://jsfiddle.net/suroorwijdan/3xLtY/
  • 13.
    Some Hacks! • Appendnew array to another array: • var a =[4,5,6]; • var b =[7,8,9]; • Array.prototype.push.apply(a, b); • Get TimeStamp with+ • +new Date(); • Access Strings with []just like charAt() • var a =“This is mytrick”; • a[0] ==‘T’ //true;
  • 14.
    Some Hacks! • Swapvariable values: • var a =10; • var b =20; • [a,b] =[b,a] And many more :http://code.google.com/p/jslibs/wiki/JavascriptTips
  • 15.
    Some More Concepts •Memoization: “DIY” • A memorize function is a higher order function which caches the result returned by the function passed to it
  • 16.
    Exercises • Implement BasicInheritance with the example of Employee • Add a forEach method in the prototype of Array • Implement a function which multiplies the largest number with the first argument
  • 17.
    Contact us Our Office Client Location Weare experts in MEAN stack framework to build scalable web apps Click Here To Know More! Have more queries related to MEAN? Talk To Our Experts