Let's say I have a class named Human.
function Human(name, gender, age, personality){
this.name = name;
this.gender = gender;
this.age = age;
this.personality = personality;
}
and I have some functions for the class such as greeting and introduce. So I create them like this:
Human.prototype.introduce = function() {
var _gender = {"M": "Boy", "F": "Girl"};
switch(this.personality)
{
case "passionate":
alert("Hi, how are you? My name is " + this.name + ". I'm " + this.age + " years old " + _gender[this.gender] + ". ");
break;
case "aggressive":
alert("I'm " + this.name + ". What you want? ");
break;
}
}
Human.prototype.greeting = function() {
alert("Hi!");
}
Since introduce and greeting can be grouped by the same category (let's name it speak), how can I simply wrap this two functions with an object? I've tried this:
Human.prototype.speak = {};
Human.prototype.speak.greeting = function(){
alert("Hi!");
}
Human.prototype.speak.introduce = function(){
var _gender = {"M": "Boy", "F": "Girl"};
switch(this.personality)
{
case "passionate":
alert("Hi, how are you? My name is " + this.name + ". I'm " + this.age + " years old " + _gender[this.gender] + ". ");
break;
case "aggressive":
alert("I'm " + this.name + ". What you want? ");
break;
}
}
Now the question is, when a function is wrapped by an object, this in the introduce function is no longer referring to the instance. So how can I work this out?
I would like to call the function as this:
var eminem = new Human("Marshall Mathers", "M", 45, "aggressive");
eminem.speak.introduce();
Make Speak to a class, because logical grouping of variables and functionality in OOP are classes.
function Speak(human) {
this.human = human
}
Speak.prototype.greeting = function () {
// ...
}
Speak.prototype.introduce = function () {
// ..
}
function Human(name, gender, age, personality, greetWord) {
this.name = name;
this.gender = gender;
this.age = age;
this.personality = personality;
this.speak = new Speak(this)
}
function Human(name, gender, age, personality, greetWord) {
this.name = name;
this.gender = gender;
this.age = age;
this.personality = personality;
this.greetWord = greetWord;
this.speak = new Speak(this)
}
function Speak(human) {
this.human = human
}
Speak.prototype.greeting = function () {
alert(this.human.greetWord + "!");
}
Speak.prototype.introduce = function () {
var _gender = { "M": "Boy", "F": "Girl" };
switch (this.human.personality) {
case "passionate":
alert("Hi, how are you? My name is " + this.human.name + ". I'm " + this.human.age + " years old " + _gender[this.human.gender] + ". ");
break;
case "aggressive":
alert("I'm " + this.human.name + ". What you want? ");
break;
}
}
var peter = new Human('Peter', 'M', 35, 'aggressive', 'Hi')
peter.speak.greeting()
peter.speak.introduce()
An other way to solve the solution would be to use apply.
The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).
var peter = new Human('Peter', 'M', 35, 'aggressive')
console.log(peter.speak.introduce.apply(peter))
function Human(name, gender, age, personality){
this.name = name;
this.gender = gender;
this.age = age;
this.personality = personality;
}
Human.prototype.speak = {};
Human.prototype.speak.greeting = function(){
alert("Hi!");
}
Human.prototype.speak.introduce = function(){
var _gender = {"M": "Boy", "F": "Girl"};
switch(this.personality)
{
case "passionate":
alert("Hi, how are you? My name is " + this.name + ". I'm " + this.age + " years old " + _gender[this.gender] + ". ");
break;
case "aggressive":
alert("I'm " + this.name + ". What you want? ");
break;
}
}
var peter = new Human('Peter', 'M', 35, 'aggressive')
console.log(peter.speak.introduce.apply(peter))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With