Object oriented javascript

Object oriented javascript

• 1.
  Object-Oriented JavaScript (OOP-JS) Presented By Md.Shah Jalal Software Engineer @ EVOKNOW jalalbd@mail.com jalalbd.wordpress.com 1
• 2.
  Presentation GOAL JavaScript has strong object-oriented programming capabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages. This presentation will starts with an Introduction to object-oriented programming. And presentation main objective is to create object and parse it in different way. 2
• 3.
  Terminology Class Definesthe characteristics of the Object. Object An Instance of a Class. Property An Object characteristic, such as color. Method An Object capability, such as walk. Constructor A method called at the moment of instantiation. Inheritance A Class can inherit characteristics from another Class. Encapsulation A Class defines only the characteristics of the Object, a method defines only how the method executes. Abstraction The conjunction of complex inheritance, methods, properties of an Object must be able to simulate a reality model. Polymorphism 3 Different Classes might define the same method or property.
• 4.
  JavaScript is anobject oriented language, but JavaScript does not use classes. JavaScript is prototype based, not class based. ? Prototype-based programming Prototype-based programming is a style of object-oriented programming in which classes are not present, and behavior reuse (known as inheritance in class-based languages) is accomplished through a process of decorating existing objects which serve as prototypes. This model is also known as class-less, prototype-oriented, or instance-based programming. 4
• 5.
  Core Objects JavaScript hasseveral objects included in its core; for example, there are objects like Math, Object, Array, and String. The example below shows how to use the Math object to get a random number by using its random() method. alert(Math.random()); https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects 5
• 6.
  Accessing Object Properties objectName.propertyName varmessage = "Hello World!"; //string Object var x = message.length; // 12 Accessing Objects Methods objectName.methodName() var message = " Hello world!"; var x = message.toUpperCase(); //HELLO WORLD! 6
• 7.
  Creating a DirectInstance var person = Object.create(null); Object.defineProperty(person, 'name', { value: 'Mikhail' , writable: true , configurable: true , enumerable: true }) Object.defineProperty(person, 'age', { value: 19 , writable: true , configurable: true , enumerable: true }) Object.defineProperty(person, 'gender', { value: 'Male' , writable: true , configurable: true , enumerable: true }) 7
• 8.
  Creating a DirectInstance var person = Object.create(null); person['name'] = 'Jyoti'; person['age'] = 25; person ['gender'] = 'Male'; alert("Name : "+ person.name+" Age : "+person.age+" Gender : "+person.gender); person.name = 'Jalal'; person.age = 26; person.gender = 'Male'; alert("Name : "+ person.name+" Age : "+person.age+" Gender : "+person.gender); alert(Object.getOwnPropertyNames(person)); // name,age,gender // array alert(Object.getOwnPropertyNames(person).length);// 3 8
• 9.
  Creating a DirectInstance person = new Object(); person.firstname = "John"; person.lastname = "Doe"; person.age = 50; person.eyecolor = "blue"; Alternative syntax (using object literals): person = { firstname :"John", lastname : "Doe", age : 50, eyecolor : "blue“ }; alert(person.firstname + " is " + person.age + " years old."); 9
• 10.
  Creating a DirectInstance var person = { first_name : 'Shah' , last_name : 'Jalal' , age : 19 , gender : 'Male' , get name() { return this.first_name + ' ' + this.last_name } , set name(new_name) { var names names = new_name.trim().split(/s+/) this.first_name = names['0'] || '' this.last_name = names['1'] || '' } } alert(person.name); person.name = 'Rushow Khan'; alert(person.name); 10
• 11.
  Custom Objects function Person(gender) { this.gender = gender; alert('Person instantiated'); } var person1 = new Person('Male'); var person2 = new Person('Female'); //display the person1 gender alert('person1 is a ' + person1.gender); // person1 is a Male alert('person2 is a ' + person2.gender); // person1 is a Female 11
• 12.
  Use The MethodsayHello() for the Person Class function Person(gender) { this.gender = gender; } Person.prototype.sayGender = function() { alert(this.gender); }; var person1 = new Person('Male'); var genderTeller = person1.sayGender; person1.sayGender(); // alerts 'Male' genderTeller(); // alerts undefined alert(genderTeller === person1.sayGender); // alerts true alert(genderTeller === Person.prototype.sayGender); // alerts true genderTeller.call(person1); //alerts 'Male' 12
• 13.
  Object.create method create afoo object that has a name property and a sayHello function: var foo = { name: "foo", sayHello: function() { alert("hello from " + this.name); } }; foo.sayHello(); // hello from foo 13
• 14.
  Use Object.create tomake a bar object that has foo as its prototype, and add a sayGoodbye function to it: Object.create method var bar = Object.create(foo); bar.sayGoodbye = function() { alert("goodbye from " + this.name); } bar.sayHello(); // hello from foo bar.sayGoodbye(); // goodbye from foo 14
• 15.
  Using an ObjectConstructor function person(firstname,lastname,age,eyecolor) { this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; } myFather = new person("John","Doe",50,"blue"); alert(myFather.firstname + " is " + myFather.age + " years old."); 15
• 16.
  JavaScript for...in Loop functionmyFunction() { var x; var txt=""; var person = {fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; alert(txt); } } myFunction(); 16
• 17.
  Multi dimensional person ={ firstname:"John", business:{ a:{ s:"software", h:"hardware", e:"electronics" }, b:"garments" c: ["A", "B", 2, 3] } }; alert(person.firstname); // Jhon alert(person.business.a.s); // software alert(person.business.b); // garments alert(person.business.c[2]); // 2 console.log(person); 17
• 18.
  Summary Javascriptobject is nothing but a special type of data which have property and method where property can be a special type of data who can hold object/array etc. 18
• 19.
  Reference: http://www.w3schools.com/js/js_objects.asp https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects https://developer.mozilla.org/en-US/docs/JavaScript/A_re-introduction_to_JavaScript http://www.adobe.com/devnet/html5/articles/javascript-object-creation.html http://killdream.github.com/blog/2011/10/understanding-javascript-oop/ 19