A javascript function that has a defined function

Question

I am trying you get a better understanding of JavaScript, especially the prototype functionality. I am having trouble with this case:

I am trying to define a function someObject with a type function so that it will behave like the following:

var myTestObject = someObject();

If I call:

myTestObject() ===> "The object is initailType"

and then when this is called

myTestObject.type() ===> "InitialType"

Then if I make this call

myTestObject.type("newtype") 
myTestObject.type() ===> "newType"

A call to

myTestObject() ===> "The Object is newType".

I have tried both this How does JavaScript .prototype work?

and this How do you create a method for a custom object in JavaScript?

,but I am getting several different errors depending on how it is implemented, mostly this though (Uncaught TypeError: Object myTestObject has no method 'type'). I feel like I am making this harder then it should be.

edit: more code.

function box(){
    var _current = "initialType"
    Object.defineProperty(this, "current", {
        get: function(){return _current;},
        set: function(value){
            if(arguments.length === 1){
                _current = value;
            } }
    })
    return "The Object is " + this.type(this.current)
}

box.prototype.type = function(newValue){
    var type = null;
    if(arguments.length == 0){
        type = "initialType";
    }else {
        type = newValue
    }
    return type
}

You should post the full code. I'm guessing you should use myTestObject.prototype.type = function() { } to define type, but there could also be something wrong with the type function. — Alain Jacomet Forte
– Alain Jacomet Forte, Commented Mar 15, 2014 at 19:25

Oriol · Accepted Answer · 2014-03-16 00:29:17Z

2

I would use something like this:

function Box(){}
Box.prototype.type = "initialType";
Box.prototype.toString = function() {
    return "The Object is " + this.type + ".";
};

And use it like this:

var b = new Box();
b.type;               // "initialType"
b + '';               // "The Object is initialType."
b.type = 'otherType'; // "otherType"
b.type;               // "otherType"
b + '';               // "The Object is otherType."

edited Mar 16, 2014 at 0:29

answered Mar 16, 2014 at 0:21

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Reeves Over a year ago

this would be my preferred method of utilizing the box object. However, what if you needed to have the process of calling the methods as described in the example as well as allowing chaining. would this be a possibility.

Douglas · Accepted Answer · 2014-03-15 22:58:50Z

1

This does what you've asked, but I don't understand what you want to do with the prototype, so this code doesn't use that. For example, the sample code doesn't use new, so the return value of someObject won't use its prototype.

function someObject()
{
   var currentType = "initailType";
   var formatter = function() {
       return "The object is " + currentType;
   };
   formatter.type = function(value) {
       if (arguments.length == 0) {
           return currentType;
        } else {
           currentType = value;
        }
    };
    return formatter;
}

var myTestObject = someObject();
myTestObject();      // => "The object is initailType"
myTestObject.type(); // => "initialType"
myTestObject.type("newType");
myTestObject.type(); // => "newType"
myTestObject();      // => "The object is newType".

see demo

Edit: example using prototype and new.

function Box() { // class name starts with a capital letter
    this._type = "initialType"; // set up default values in constructor function
} // no "return" in constructor function, using "new" handles that

Box.prototype.type = function(value) { // adding method to the prototype
    if (arguments.length == 0) { // magic arguments local variable...
        return this._type; // initially returns the value set in the constructor
    } else {
        this._type = value; // update the stored value
    }
};

Box.prototype.format = function() // another method on the box, rather than a return from the constructor
{
    return "The object is " + this.type(); // could use this._type instead
};

var box = new Box();       // instance variable with lowercase name
console.log(box.type());   // read the default value
console.log(box.format()); // print the message with the initial value of type
box.type("another type");  // set the type property, no return value
console.log(box.format()); // print the new message

edited Mar 15, 2014 at 22:58

answered Mar 15, 2014 at 19:32

Douglas

37.8k9 gold badges80 silver badges91 bronze badges

7 Comments

Jared Reeves Over a year ago

Thank you for your help. I was trying to see if i could implement this same functionality using prototype. However upon further research it appears like it would nor be possible with out adjusting the call procedure. I added my non working code above that I was trying to implement.I will mark your answer as Correct.

Jared Reeves Over a year ago

I have one more question. Using your code why does this throw an error. var myTestObject = someObject().type("someType");

Douglas Over a year ago

That snippet should run fine by itself, but it won't set myTestObject any more. My example sets myTestObject to formatter, but that will set it to the return value of the .type method instead. When .type is called with a value it doesn't return anything, so myTestObject will get set to undefined, and it isn't possible to call methods on undefined. Perhaps that is the problem with your new example too, box() returns a string, but it looks like you want to use it as a constructor, so call new box() and not return anything.

Oriol Over a year ago

Wouldn't Box.prototype._type = "initialType" be better than this._type = "initialType"? No need to store it in each instance.

Douglas Over a year ago

Yes, that would work. It looked a little strange the first time I read your comment, but I can't think of a strong reason not to do it.

|

Collectives™ on Stack Overflow

A javascript function that has a defined function

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related