Last active
December 17, 2015 06:39
-
-
Save richardcornish/5566668 to your computer and use it in GitHub Desktop.
Basic notes on how to create and inherit objects the crazy-ass JavaScript way.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ------------------------------------------------------- | |
Old-school way to create child objects from parent objects | |
--------------------------------------------------------*/ | |
var Person = function (name, age, sex) { | |
this.name = name; | |
this.age = age; | |
this.sex = sex; | |
} | |
Person.prototype.sayGreeting = function () { | |
return 'Hi, my name is ' + this.name + ', my age is ' + this.age + ', and I\'m a ' + this.sex + '.'; | |
} | |
var mom = new Person('Kathy', 40, 'female'); | |
console.log(mom); | |
console.log(mom.sayGreeting()); | |
// Person {name: "Kathy", age: 40, sex: "female", sayGreeting: function} | |
// Hi, my name is Kathy, my age is 40, and I'm a female. | |
var Teenager = function () { } | |
Teenager.prototype = new Person('Suzy', 20, 'female'); | |
Teenager.prototype.sayCatchPhrase = function () { | |
return 'I\'m ' + this.age + ' and I can do what I want.'; | |
} | |
var daughter = new Teenager(); | |
console.log(daughter); | |
console.log(daughter.sayGreeting()); | |
console.log(daughter.sayCatchPhrase()); | |
// Teenager {name: "Suzy", age: "20", sex: "female"…} | |
// Hi, my name is Suzy, my age is 20, and I'm a female. | |
// I'm 20 and I can do what I want. | |
/* ------------------------------------------------------- | |
New-school way to create child objects from parent objects | |
--------------------------------------------------------*/ | |
if (typeof Object.create !== 'function') { | |
Object.create = function (o) { | |
function F() {} | |
F.prototype = o; | |
return new F(); | |
}; | |
} | |
var mom = { | |
name: 'Kathy', | |
age: 40, | |
sex: 'female', | |
sayGreeting: function () { | |
return 'Hi, my name is ' + this.name + ', my age is ' + this.age + ', and I\'m a ' + this.sex + '.'; | |
} | |
} | |
// Object {name: "Kathy", age: 40, sex: "female", sayGreeting: function} | |
// Hi, my name is Kathy, my age is 40, and I'm a female. | |
var suzy = Object.create(mom); | |
suzy.name = 'Suzy'; | |
suzy.age = 20; | |
suzy.sayCatchPhrase = function () { | |
return 'I\'m ' + this.age + ' and I can do what I want.'; | |
} | |
console.log(suzy); | |
console.log(suzy.sayGreeting()); | |
console.log(suzy.sayCatchPhrase()); | |
// Object {name: "Suzy", age: "20", name: "Kathy", age: 40, sex: "female"…} | |
// Hi, my name is Suzy, my age is 20, and I'm a female. | |
// I'm 20 and I can do what I want. | |
/* -------------------------------- | |
Finding an object's keys and values | |
---------------------------------*/ | |
for (var key in suzy) { | |
console.log(key); | |
} | |
// name | |
// age | |
// sayCatchPhrase | |
// sex | |
// sayGreeting | |
for (var key in suzy) { | |
console.log(suzy[key]); | |
} | |
// Suzy | |
// 20 | |
// function () { | |
// return 'I\'m ' + this.age + ' and I can do what I want.'; | |
// } | |
// female | |
// function () { | |
// return 'Hi, my name is ' + this.name + ', my age is ' + this.age + ', and I\'m a ' + this.sex + '.'; | |
// } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment