in Javascript
var greeting = {
place : 'Lancaster',
name : 'speaker',
sayHi: function(){
return 'Hello' + this.place + ' my name is ' + this.name + '!';
}
}
var yolixtly = Object.create(greeting);
yolixtly.name = 'Yoli';
yolixtly.sayHi();
yolixtly.aboutYou = function() {
return 'I am a full-stack web developer ' + this.toDo;
}
// Hello Lancaster my name is Yoli
yolixtly.toDo = 'student';
Content:
What is an Object?
Class vs Object
How to create Objects in Javascript
Everything in Javascript is an Object!???
Build-in Objects vs Primitive Data types
“An unordered collection of properties”
Key : Value pairs
name : 'John'
skill : talk()
color: 'Red'
feature: stop()
var person = {
name : 'John';
}
var person = {
talk: function(){
'Hello my Name is ' + this.name;
}
};
CLASS | OBJECT | |
---|---|---|
in Javascript | Building Blocks of JS |
No no no!
So... then how Do objects get created?
In Javascript Objects are instances of other Objects
PROTOTYPE
WHAT IS A PROTOTYPE?
CLASS | OBJECT | |
---|---|---|
static | BluePrints |
CLASS | OBJECT | |
---|---|---|
DEFINITION | 1 way | multiple ways |
var person = {
name : 'John', //string
age: 28, //number
children: null, // null
married: False, //boolean
}
Simplest Way - Object Literal:
person.sayHi = function(){ //function
return 'Hello my Name is ' + this.name
+ ', I am ' + this.age + ' !';
}
person.sayHi()
'Hello my Name is John, I am 28!'
Ways to Define an Object and create Instances
Object Literal |
||
---|---|---|
Object Constructor |
var Person = {
name: "Martha",
age: 56
}
var Mike = Object.create(Person);
function Person(name, age){
this.name = name;
this.age = age;
sayHi = function(){
return 'Hello my name is '
+ this.name + ' and I am '
+ this.age;
}
}
var Mike = new Person('Mike', 28);
var Carol = new Person('Carol', 40);
var Marcus = new Person('Marcus', 10);
Mike.name //Mike
Mike['name'] //28
object.Super-Fun!
object["Super-Fun!"]
Mike.name = 'Mike'
Mike.age = 28
STEP 1: Create an Object
What is Prototypal Inheritance?
var Person = {
name: "Yoli",
age: 56
}
STEP 2: Clone it
var Mike = Object.create(Person);
STEP 3: Extend it!
Mike.lastName = 'Smith';
Prototype and 'this' keyword
/* HUMAN PROTOTYPE */
function Human(name, nationality){
this.name = name;
this.nationality = nationality
}
var MexicanMom = new Human('Alicia', 'Mexican');
var AmericanMom = new Human('Amber', 'American');
//Instance of Human
Human { name: 'Alicia', nationality: 'Mexican' }
//Instance of Human
Human { name: 'Amber', nationality: 'American' }
MexicanMom.language = 'Spanish';
AmericanMom.country = 'United States';
//Extensions of Mexican:
Human {
name: 'Alicia',
nationality: 'Mexican',
language: 'Spanish'
}
//Extensions of American:
Human {
name: 'Amber',
nationality: 'American',
country: 'United States'
}
AmericanMom.language // undefined
MexicanMom.language // Spanish
/* Employee PROTOTYPE */
function Employee(name, title){
this.name = name;
this.title = title;
}
Prototype and 'this' keyword
/* HUMAN PROTOTYPE */
function Human(name, nationality){
this.name = name;
this.nationality = nationality
}
/* Employee PROTOTYPE */
function Employee(name, title){
this.name = name;
this.title = title;
}
/* Employee PROTOTYPE Refactor 1*/
function Employee(title){
Human.call(this);
this.title = title;
}
Connect????
Avoid Redundancy?
var FrenchMom = new Employee('Full Stack Web Developer');
Employee {
name: undefined,
nationality: undefined,
title: 'Full Stack Web Developer'
}
/* Employee PROTOTYPE Refactor 2 */
function Employee(name, title, nationality){
Human.call(this, name, nationality);
this.title = title;
}
var FrenchMom = new Employee('Adrianne', 'Full Stack Web Developer', 'French');
Employee {
name: 'Adrianne',
nationality: 'French',
title: 'Full Stack Web Developer'
}
/* Important Extra snippets : */
Employee.prototype = Object.create(Human.prototype);
Employee.prototype.constructor = Employee;
Human.prototype.speak = function(){
return 'Hello my name is '
+ this.name + ' and I am '
+ this.nationality;
}
FrenchMom.speak(); // Hello my name is Adrianne and I am French
Everything in JS is an OBJECT!!!???? Answer is: NO
TRUE: Objects are the building blocks upon which much of JS is built.But that is not all!
Data Types | Representation |
---|---|
string | "hello" |
number | 3, NaN |
boolean | true false |
null | null |
undefined | undefined |
Object | {} |
The Only object!
and our
Complex Primitive friend the: function
They are what they are:
Simple primitives!
The Build-In Objects of JS
Build-In Objects |
---|
String |
Number |
Boolean |
Object |
Function |
Array |
Date |
RegExp |
Error |
The Build-In Objects of JS
Build-In Objects | Methods and properties attached to build-In Constructors (some...) |
has conter-part primitive-form |
---|---|---|
String | length, lastIndexOf(), indexOf(), slice(), substring...etc | yes |
Number | yes | |
Boolean | yes | |
Object | call(), apply(), bind(), etc.. | no |
Function | no | |
Array | length, pop(), push(),shift(),splice() etc...!!! | no |
Date | no | |
RegExp | search(), replace(); | no |
Error | no |
//A simple string (data type)
var myStr = 'hello';
//hello
typeof myStr
//string
myStr.length
// 5
myStr.slice(0,2)
//he
//A build-in Object -> String
var myObj = new String('hello')
//[String: 'hello']
typeof myObj
//object
myObj.length
//5
myObj.slice(0,2);
//he
How a data type relates to its counter-part Object?
http://www.w3schools.com/js/js_objects.asp
http://www.htmlgoodies.com/html5/tutorials/javascript-prototypical-inheritance-explained.html#fbid=jOATVQ27MOt
http://raganwald.com/2013/02/10/prototypes.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model
http://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical
Books:
You don't know JS by Kyle Simpson
}
@yolixtly
yolixtly@gmail.com
Yolixtly Anderson
yolixtly.com