CODEWITHSUNDEEP
javascriptjquery
SB2055
SB2055

Reputation: 12892

How to build objects with functions in JavaScript

I don't think this is an opinion based question as I'm asking for "proper" technique, not "the best" technique or "your favorite" technique. The below options have objective tradeoffs and I'm wondering what the industry-standard approach to handling prototype definitions and function definitions is.

Say I have a lot of apple objects:

var newApple = function(){
   return  {
      id: new guid(),
      color: red
   }
}
var apple = newApple();

I often eat these apples and call the following: 

appleManager.eatApple(apple, fast)

But I'd like to do this: 

var newApple = function(){
   return {
      id: new guid(),
      color: red,
      eat: function(speed){
         // a bunch of logic here
      }
}

and then call

apple.eat(fast);

But in my mind, I'm thinking of all of those functions floating around taking up space, whereas before there was only one instance of the function.

I'm also wondering if defining eat on the object as eatApple(this, speed) would be a more appropriate option - this way the function is in one place and we just refer to it from the object.

What are the options and objective tradeoffs regarding the definition of behavior-specific functionality on javascript objects? Examples would be dandy.

Upvotes: 0

Views: 76

Answers (3)

Jerinaw
Jerinaw

Reputation: 5529

Here's an example of using the prototype chain as @Potter mentioned.

function Apple(){
    this.id = new guid();
    this.color = 'red';
}

Apple.prototype = {
   eat:function(speed) {
       //do something
   }
}

var apple = new Apple();

apple.eat('fast');
console.log(apple.color);//prints 'red'

The Apple function is a constructor function. Anything attached to the this pointer and put in the prototype will be "inherited" by each instance.

In JavaScript you can simulate classical inheritance with the prototype chain.

function Fruit(color) {
    this.color = color;
}

Fruit.prototype = {
    eat:function() {
      console.log('Eating some fruit.');
    }
};

function Apple(color) {
    Fruit.call(this, color);//Call the parent constructor function
    this.isOnATree = true; //Add some new properties
}
Apple.prototype = Object.create(Fruit); //Inherit all parent methods
Apple.prototype.eat = function() { //Override parent eat method
    console.log('Eating a' + this.color + ' apple');
};

var apple = new Apple('red');
apple.eat(); //Eating a red apple.

Also, I would recommend JavaScript the Good Parts.

Upvotes: 2

mehfatitem
mehfatitem

Reputation: 147

<!DOCTYPE html>
<html>
<body>

<p>Creating and using an object method.</p>

<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

May be you can use this script.

Upvotes: 0

Piyush Patel
Piyush Patel

Reputation: 1751

You could probably define your function on prototype object. That way your function would be placed at a central location and you will not end up consuming more memory.

function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;

}

Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;

};

Upvotes: 1

Related Questions