Objects
// Prototypes
// how prototypes allow us to organize our code so our objects can share information easier.
/* We can reuse common objects in our applications by using prototypes. We can create new objects based on other objects and extend them to have new properties while retaining the original properties. */
// Comon atributtes
var personPrototype = {
name: 'Anonymous',
greet: function(name, mood){
name = name || "You"; // || or
mood = mood || "good";
console.log("Hello" + name +
"I am " + this.name +
" and I am in a " + mood + "mood!");
},
species: 'Homo Sapien'
}
// Object Oriented Programming
// Programming based around creating and using objects
function Person (name){
this.name = name;
}
Person.prototype = personPrototype;
jim = new Person("Jim");
nick = new Person("Nick");
--
jim.greet();// Hello Jim
// change object
nick.species = "human";
//change all prototype
Person.prototype.species = "human"
// add favorite color
Person.prototype.favoriteColor = "red"
// We can reuse objects in our applications by using prototypes
/* We can create new objects based on other objects and extend them to have new properties while retaining the inherited properties. */
// Method
// Method is a function that is a property of an object
// Adding function to are object is something called a method.
var jim = {
name: "Jim",
skills: ["Javascript, Ruby"],
"Favorite Color": "pink",
greet: function(){
console.log("Hello, I am " + jim.name);
}
};
jim.name = "James";
// function into an object
jim.greet(); // Hello, I am Jim - jim(object) greet(function) ();call the function
--
// this
// this act like variable
// two person
var jim = {
name: "Jim",
skills: ["Javascript, Ruby"],
"Favorite Color": "pink",
greet: function(){
console.log("Hello, I am " + this.name);
}
};
var nick = {
name: "nick",
greet: jim.greet // this greet is the same as jim greet
};
jim.greet();
nick.greet();
---
var genericGreet = function() {
return "Hello, my name is " + this.name;
}
var andrew = {
name: "Andrew",
greet: genericGreet
}
var ryan = {
name: "Ryan",
greet: genericGreet
}
---
// This doesn't work - after we do this we lose the association of this with greet
var jimGreet = jim.greet; // save on variable
jimGreet(); // Doesn't work
function whatIsThis (){
console.log(this);
}
--
//console
// Be careful with - reading from the dom
whatIsThis (); // DOMWindow - Global object
window
// DOMWindow
window.jim
// object
window.name
// "" - empty string
var name = "The window"
// undefined
window.name
"The window"
jimGreet();
"Hello, Im the Window"
//Objects
//Objects are similar to arrays except they use curly braces {} for creating them and instead of using numbers to label values, you use strings. These strings are called keys. Objects are great for representing things from the real world in our code. Try it:
var country;
country = {
name: "Uruguay",
continent: "South America",
capital: "Montevideo"
};
console.log(country);
//You can access, add or change values in an object in two ways. The first is similar to arrays but using a string and the second is with a dot . between the object name and the key:
var country;
country = {
name: "Uruguay",
continent: "South America",
capital: "Montevideo"
};
console.log( country["name"] );
console.log( country.continent );
country["language"] = "Spanish";
country.population = 3324460;
country.name = "Eastern Republic of Uruguay";
console.log(country);
//Finally, you can loop over the keys in an object as well with a special for syntax called for ... in. Try it:
var country;
country = {
name: "Uruguay",
continent: "South America",
capital: "Montevideo"
};
for (key in country) {
console.log("This country's " + key + " is " + country[key] + ".");
}
//When you are using for ... in, remember to use the square brackets [] for accessing values in an object. Using the dot won't do what you expect because country.key will look for a value in the object that's literally called key.
// Call and Apply
// Control the value of this with the methods call and apply.
var jim = {
name: "Jim",
greet: function(){
console.log("Hello, I am " + this.name);
}
};
var nick = {
name: "nick",
greet: jim.greet
};
jim["greet"]();
nick.greet();
var jimGreet = jim.greet;
jimGreet.call() // () value bind - (nick) pass thenick object
// or
ar jimGreet = jim.greet;
jimGreet.call({name: "Amit"})
jim.greet.call(nick);// Hello I'm Nick
jim.greet.apply(nick);// Hello I'm Nick
--
var jim = {
name: "Jim",
greet: function(name, mood){
name = name || "You"; // || or
mood = mood || "good";
console.log("Hello" + name +
"I am " + this.name +
" and I am in a " + mood + "mood!");
}
};
var nick = {
name: "nick",
greet: jim.greet
};
jim["greet"]("Ryan", "awesome");
nick.greet();
var jimGreet = jim.greet;
jimGreet.call() // () value bind - (nick) pass thenick object
// or
ar jimGreet = jim.greet;
jimGreet.call({name: "Amit"}, "Matt", "bad");
jim.greet.apply(nick, "Matt", "bad"); // APply pass the argument in an array
var args = ["Michael", "Happy"];
jim.greet.apply(jim, args)
// var greeting = genericGreet.apply(andrews, args1);
// Javascript Objects
/* Objects are the foundation of JavaScript. They are very easy to learn, but can be a bit difficult to master. In this course we will look at simple JavaScript objects as well as how to use Prototypes to do object oriented programming. */
// Basic Objects
/* It stores any number of values associated with string "keys." JavaScript has a special object literal syntax that makes constructing new objects with keys and values easy. */
// Key value pair
// { "key": "value" }
var jim = {
name: "Jim"
}; // Basic object that has q key and 1 value
// To access - from the object Jim we going to retrieve the key name
console.log(jim.name);
// assign values to
jim.name = "James" // store the new string it change to James
var jim = {
name: "Jim",
skills: ["Javascript, Ruby"],
"Favorite Color": "pink" // if it has a space use quotation mark
};
jim["Favorite Color"] = "blue"; // change to blue
console.log(jim["name"]);
console.log(jim["Favorite Color"]);
/* Objects
Type of value that can store values in more flexible way
it has key value properties. Object is inside {} - assign the value to a key
first name (key) - priss (value)*/
var me = {
first_name: "Priss",
last_name: "Rodriguez",
"Employee number": = 1 //need "" string
}
me.first_name = "James" //change name same as
me["first_name"] = "James"
/* dot operator that means we going to take a property - we put the property and the value appear. dot shorthand to get the value
dot operator allows to have more types of value */
console.log(me.first_name);
console.log(me.last_name);
console.log(me["Employee Number"]); //subscript ?
console.log(me);
//console log with dot operator - console["log"](me);
var key = "first_name"
console.log(me[key]) //subscript operator