DOC Type html>
<html>
<head>
<title>What are Prototypes and How Do They Work </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
//Hello Everyone lets do some Javascript
console.log("Hello World");
//Copy and paste this post to find out what prototypes are and how they work. Lets take an Object{} person, with firstname, lastname and a "get full name" function. These are attributes or protoypes of the Object "person"
var person = {
firstname: 'Default',
lastname: 'Default',
getFullName: function(){
return this.firstname + ' ' + this.lastname;
}
}
//Lets define another Object{} john with only a firstname and lastname. Again these are attributes or prototypes of the Object "john"
var john = {
firstname: 'John',
lastname: 'Doe'
}
//Now Don't EVER do this when programming it is for demo purposes only!!!!!
//We will change the attributes / prototypes of one Object to be equal to another. Using the proto method I can set the "john" prototype = to the "person" prototype by doing this:
john.__proto__ = person;
// A console.log (john.firstname); gives us what we would expect, "John"
console.log(john.firstname);
//However a console.log( john.firstname) now takes on the attributes/prototype of the object "person" which invokes the "getFullName" function. So now the object john has the attributes/prototype getFullName and prints the full name "John Doe"
console.log(john.getFullName());
//Now lets add a new Oject{ } "jane" which has only a firstname attribute/prototype
jane = {
firstname: 'Beyonce'
}
// However, I can again take the "jane" attribute/prototype and set it equal to the "person" prototype as before. But what happens when I console.log(jane.getFullName) when the Objecct "jane" does not have a lastname?
jane.__proto__ = person;
console.log(jane.getFullName());
//What do you expect will happen? Since the Object "jane" does not have a fullName attribute it will return "Beyonce" as the firstname then looking at the Object "jane" and since it cannot find a lastname value in the "jane" Object it will not return undefined for lastname but it will take the last name prototype from the Object "person" and give the lastname value as "Default".
//Next Lesson on prototypes and what they are
//Everything is an Object or Primitive in Javascript. Lets take a look. Lets define these variable a, b, and c as an Object, a Function and an Array
var a = { };
var b = function(){ };
var c = [ ];
// Perform these operations on the console once you have declared the above variables.
// a.__proto__ , this defines an Object{ } and gives access to methods by typing "a.__proto__. ",methods like: isPrototyeOf, toString, hasOwnProperty, valueOf, and many more methods attached to all Objects.
// a.__proto__.__proto__ lowest level is Object{ }; the prototype of the prototype is an Object
//b.__proto__ , this defines: function Empty(){ } and b.__proto__. give methods and properties like: apply(), argument(), bind(), call() and many other methods.
//b.__proto__.__proto__ ; the protoype of a prototype of a function is an Object{} You get the same protoypes as the Object. So functions are Objects in Javascript
//c.__proto__, defines an array [ ];
//c.__proto__. gives methods of an array that you can call using any array like: push(), reduce(), reduceright(), are built in methods and are avaliable as prototypes
//c.__proto__.__proto__; means the prototype of a prototype of an array is again an Object{ } Arrays are Objects in javascript
// How to use the property of Reflection in Java Script. Lets take the "for" / "in" method to loop over the Object "john" and list all its properties. When you console.log you get all the prototypes of the "person" Object that were set equal to the "john" Object to also include the getFull Name function.
for (var prop in john){
console.log(prop + ' :' + john[prop]);
}
// Now if we only want to list properties that are owned only by the "john" object and not those that are methods of the object prototype of "person" we can do an if statement and if true it will print only those properties associated with the "john" Object.
for (var prop in john){
if(john.hasOwnProperty(prop))
console.log(prop + ' :' + john[prop]);
}
//Ok lets play some more with passing prototypes to other Objects and even multiple objects being consolidated into one Object. Lets take two new Objects "jane" and "jim" and use what we call the extend function to add all the prototypes of all the functions in one Object
var jane ={
address: '111 Main St.',
getFormalFullName: function(){
return this.lastname + ' ,' + this.firstname;
}
}
var jim = {
getFirstName: function(){
return firstname;
}
}
//The extend function or method is called using the underscore.js library that you can see has been linked at the top of this page. It will extend the attributes/prototypes of the "john" Object to include both the "jane" prototypes and the "jim" prototypes. And when you console.log (john) you will get combined prototypes of all three Objects.
_.extend(john,jane, jim);
console.log(john);
//This is what Prototypes are and how they can be manipulated between Objects, Functions, and Arrays.
</script>
</body>
</html>
1 Like