Ian 20150116 java script oop

 JavaScript Objects Are Dictionaries
 In JavaScript, objects are just collections of name/value
pairs—think of a JavaScript object as a dictionary with
string keys.
 We can get and set the properties of an object using
either the familiar "." (dot) operator, or the "[]"
operator, which is typically used when dealing with a
dictionary.

 var userObject = new Object();
 var userObject = {};
 userObject.lastLoginTime = new Date();
 userObject["lastLoginTime"] = new Date();
 alert(userObject.lastLoginTime);
 alert(userObject["lastLoginTime"]);

 This is how we usually define a function in JavaScript.
 function func(x) { alert(x); }
 func("blah");
 You can create an anonymous function object, and assign it to
variable func
 var func = function(x) { alert(x); };
 func("blah2");
 Or
 var func = new Function("x", "alert(x);");
 func("blah3");
 This shows that a function is really just an object that supports a
function call operation.

 function test() {
 Return “Hello”;
 }
 console.log(test);
 console.log(test());

 var add = function(x, y) {
return x + y;
};
 alert(add(1, 2)); // Displays "3”
 var result = (function(x, y) {
return x + y;
})(1, 2);
alert(result); // Displays "3"

 function displayQuote() {
 alert(this.memorableQuote);
 }
 var oscarWilde = {
 "memorableQuote": "True friends stab you in the front. "
 };
 displayQuote.call(oscarWilde);
 Remember, a function in JavaScript is an object. Every function object has a
method named call, which calls the function as a method of the first argument.
 That is, whichever object we pass into call as its first argument will become the
value of "this" in the function invocation.

 Constructor Functions but No Classes
 function DogConstructor(name) {
 this.name = name;
 this.respondTo = function(name) {
 if(this.name == name) {
 alert("Woof");
}
};
 }
 var spot = new DogConstructor("Spot");
spot.respondTo("Rover"); // …
 spot.respondTo("Spot"); // Woof

 var spot = new DogConstructor("Spot");
 First, it creates a new empty object. Then, the function
call that immediately follows is executed, with the new
empty object set as the value of "this" within that
function.
 // create an empty object
 var spot = {};
 // call the function as a method of the empty object
DogConstructor.call(spot, "Spot");

 In fact, usually in JavaScript the name of the constructor
function is the name of the class you're simulating.
 // Think of this as class Dog
 function Dog(name) {
 // instance variable
 this.name = name;
 // instance method? Hmmm...
 this.respondTo = function(name) {
 if(this.name == name) { alert(“Woof”); }
 };
 }
 var spot = new Dog(“Spot”);

 The name comes from the idea that in JavaScript, an
object is created as a copy of an existing example (that
is, a prototype) object.
 Any properties and methods of this prototype object
will appear as properties and methods of the objects
created from that prototype's constructor.
 You can say that these objects inherit their properties
and methods from their prototype.

 var buddy = new Dog(“Buddy“);
 the object referenced by buddy inherits properties and
methods from its prototype
 Although it's probably not obvious from just that one
line where the prototype comes from.

 In JavaScript, every function has a property named
"prototype" that refers to a prototype object.
 This prototype object in turn has a property named
"constructor," which refers back to the function itself.
It's sort of a circular reference;

 function GreatDane() { }
 var rover = new GreatDane();
 var spot = new GreatDane();
 GreatDane.prototype.getBreed = function() {
 return "Great Dane";
 };
 alert(rover.getBreed()); // Great Dane

 spot.getBreed = function() {
 return "Little Great Dane";
 };
 alert(spot.getBreed()); // Little Great Dane
 alert(rover.getBreed()); // Great Dane

 function DateTime() { }

 // set static method now()
 DateTime.now = function() {
 return new Date();
 };

 A closure is a runtime phenomenon that comes about when an
inner function (or in C#, an inner anonymous method) is bound
to the local variables of its outer function.
 <script>
 var add = (function () {
 var counter = 0;
 return function () {return counter += 1;}
 })();
 function myFunction(){
 document.getElementById("demo").innerHTML = add();
 }
 </script>

 function Person(name, age) {
 this.getName = function() { return name; };
 this.setName = function(newName) { name = newName; };
 this.getAge = function() { return age; };
 this.setAge = function(newAge) { age = newAge; };
 }
 var ray = new Person("Ray", 31);

 // class Pet
 function Pet(name) {
 this.getName = function() { return name; };
 this.setName = function(newName) { name = newName; };
 }
 Pet.prototype.toString = function() {
 return "This pet’s name is: " + this.getName();
 };
 // end of class Pet
 var parrotty = new Pet("Parrotty the Parrot");
 alert(parrotty);

 // class Dog : Pet
 // public Dog(string name, string breed)
 function Dog(name, breed) {
 // think Dog : base(name)
 Pet.call(this, name);
 this.getBreed = function() { return breed; };
 // Breed doesn't change, obviously! It's read only.
 // this.setBreed = function(newBreed) { name =
newName; };
 }

 // this makes Dog.prototype inherits
 // from Pet.prototype
 Dog.prototype = new Pet();
 // remember that Pet.prototype.constructor
 // points to Pet. We want our Dog instances'
 // constructor to point to Dog.
Dog.prototype.constructor = Dog;

 // Now we override Pet.prototype.toString
Dog.prototype.toString = function() {
 return "This dog's name is: " + this.getName() +
 ", and its breed is: " + this.getBreed();
 };
 // end of class Dog

 var dog = new Dog("Buddy", "Great Dane");
 // test the new toString()
 alert(dog); // This dog's name is: Buddy, and its breed is: Great Dane
 // Testing instanceof (similar to the is operator)
 // (dog is Dog)? yes
 alert(dog instanceof Dog);
 // (dog is Pet)? yes
 alert(dog instanceof Pet);
 // (dog is Object)?
 yes alert(dog instanceof Object);

 var MSDNMagNS = {};
 MSDNMagNS.Pet = function(name) { // code here };
MSDNMagNS.Pet.prototype.toString = function() {
 // code
 };
 var pet = new MSDNMagNS.Pet("Yammer");

 var MSDNMagNS = {};
 // nested namespace "Examples"
 MSDNMagNS.Examples = {}; MSDNMagNS.Examples.Pet
= function(name) {
 // code
 };
 MSDNMagNS.Examples.Pet.prototype.toString =
function() {
 // code
 };
 var pet = new MSDNMagNS.Examples.Pet("Yammer");

 // MSDNMagNS.Examples and Pet definition...
 // think "using Eg = MSDNMagNS.Examples;"
 var Eg = MSDNMagNS.Examples;
 var pet = new Eg.Pet("Yammer");
 alert(pet);

Ian 20150116 java script oop

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Ian 20150116 java script oop (20)

More from LearningTech (20)

Recently uploaded (20)

Ian 20150116 java script oop

Editor's Notes