View
667
Download
2
Category
Tags:
Preview:
DESCRIPTION
Simple Introduction to Object Oriented Programing in JavaScript.
Citation preview
Object Oriented Programingin
Akshay Mathur
@akshaymathu 2
Akshay Mathur
• Founding Team Member of– ShopSocially (Enabling “social” for retailers)– AirTight Neworks (Global leader of WIPS)
• 15+ years in IT industry– Currently Principal Architect at ShopSocially– Mostly worked with Startups• From Conceptualization to Stabilization• At different functions i.e. development, testing, release• With multiple technologies
JS Objects
@akshaymathu 4
Objects
• Everything in JS is an object (instance)“string”.length // 6“str”.length.toFixed(2) // “3.00”[‘hell’, ‘o!’].join(‘’) // ‘hello!’
• Custom objects can also be defined
@akshaymathu 5
Custom Objects
• JavaScript Object has a key and a value• Key is always string• Value can be of any type– Including another JSON object
A = {key1: value1, key2: value2};or
A = new Object();A[‘key1’] = value1;A.key2 = value2;
@akshaymathu 6
Object as Namespace
• It is a good practice to group variables and functions together in an object rather than keeping them global
var user = {};user.name = “Akshay”;user.greet = function(){ alert(‘Hello!‘.concat(user.name);};
@akshaymathu 7
Object as Named Argument• Objects can be passed to a function as an argument• They proxy for named arguments
Say_hello = function (options){ if (typeof options === ‘Object’){ options.msg = (options.msg)?options.msg : ’Hello!’; } alert(options.msg + ‘ ‘ + options.name);}
Say_hello({name: ‘Akshay’});
@akshaymathu 8
JS Functions
@akshaymathu 10
Function
• Code block that executes on ‘call’//define the functionfunction say_hello(name){ alert(‘Hello! ‘ + name);}
//call the functionsay_hello(‘Akshay’);
@akshaymathu 11
Function Arguments
• Any number of arguments can be passed without declaring
• Named arguments are not supported
say_hello(1); // Hello! 1say_hello(); // Hello! undefinedsay_hello(‘Akshay’, ‘Mathur’);
//Hello! Akshay
@akshaymathu 12
Naming a Function
function my_func(){}
• A function may not have a name
function(){};
my_func = function(){};
@akshaymathu 13
Variable Scope
• By default all variables are global• Variables defined with ‘var’ keyword are local to the
function• It is assumed that all variables are defined in the first
linefunction(){
var my_var = ‘Hello’;console.log(msg);var2 = 6;
}
@akshaymathu 14
Return Values
• Anything can be returned from a function using return statement
function sqr(x){var sq = x * x;
return sq;}
var four_sq = sqr(4);
@akshaymathu 15
Other Facts
• A function can be assigned to a variable• A function can be defined within another function• A function can return a functionfunction sqr(){ sq = function (x){
return x * x * x; }; return sq;}My_sqr = sqr(); // functionMy_sqr(3); // 27
16@akshaymathu
JavaScript Classes
@akshaymathu 18
Class
• Class is a reserved keyword in JS– But not implemented– Same effect is achieved via prototype
• CofeeScript allows to write classes– Generates JS code using prototype
@akshaymathu 19
Using Functions as Objects
• Functions are actually First Class objectsSo we can change
User= {}User.name = ‘Akshay’User.greet = function(){
alert(‘Hello ’ + User.name)}
toUser = function(){
this.name = ‘Akshay’this.greet = function(){
alert(‘Hello ’ + this.name)}
}
@akshaymathu 20
Creating Instances
• Now the object instance can be created using new keyword
user1 = new User; user1.name //Akshay user1.greet() //Hello Akshay
@akshaymathu 21
Object Constructor
• The main object function can take arguments for initializing properties
User = function(name){this.name = name;this.greet = function(){
alert(‘Hello ’ + this.name)}
}user1 = new User(‘Cerri’);user1.greet() //Hello Cerri
@akshaymathu 22
Extending a Class
• More functions and properties can be defined extending the prototype of the class
User.prototype.setGender = function(gender){
this.gender = gender;};
User.prototype.sayGender = function(){
alert(this.name + ‘ is ’ + this.gender);
};
Further Reading
• Introduction to Object-Oriented JavaScript on Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
@akshaymathu 24
Thanks
@akshaymathu
http://www.quora.com/Akshay-Mathur
Recommended