Javascript - How do I invoke an anonymous method as a variable and access its properties and methods?

Question

I've read that we can invoke an anonymous function as a variable. However I'm trying to do that and in addition to it I want to access its properties and methods. Here is my code

var cooking = function(){
        this.dessert = "Ice Cream";
        this.numberOfPortions = 20;
        this.doubleLunch = function(){this.numberOfPortions = 40;
            document.write(this.numberOfPortions);};
        };

document.write(cooking.dessert);

But I don't get anything. Can you say me what am I doing wrong? Thanks

score 1 · Accepted Answer · answered Oct 07 '15 at 22:51

1

cooking is a function. When you call it, it defines a number of properties on whatever this is.

The structure implies that it is intended to be used as a constructor function, so you would create an instance of it using the new keyword.

Then you can interact with the instance.

var meal = new cooking();
document.write(meal.dessert);

NB: Convention dictates that constructor functions (and only constructor functions) should be named starting with a capital first letter, so you should rename it to Cooking.

answered Oct 07 '15 at 22:51

Quentin

914,110
126
1,211
1,335

There's also absolutely no point in assigning it to a variable. Just `function Cooking() { ... }` makes more sense. – Jan Oct 07 '15 at 22:54
Which also assigns it to a variable. In general I would recommend a function declaration over an anonymous function expression though. – Quentin Oct 07 '15 at 22:55
@Quentin Thank you for answer, but why is it necessary to create an instance of it. For example when I execute it shows me the number 7. Is it because this function is different from my first one? – GniruT Oct 07 '15 at 23:05
Umm. Yes. It is different. The big important difference is described in the first paragraph of the answer. – Quentin Oct 07 '15 at 23:08
I understand that the main reason is the way I declare my anonymous function isn't it? But the is still being a Function-Object? – GniruT Oct 07 '15 at 23:12
"I understand that the main reason is the way I declare my anonymous function isn't it?" — No. It is because the purpose of the function is to define properties on whatever `this` is. – Quentin Oct 07 '15 at 23:13
Then if I don't use this then my first function would be the same as the secod? I used "this" because I wanted to declare properties of a function-object. Am I wrong? Are there other ways without using "this"? – GniruT Oct 07 '15 at 23:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/91672/discussion-between-gnirut-and-quentin). – GniruT Oct 07 '15 at 23:18
"Which also assigns it to a variable". Well, the function object will be accessible in a similar manner that a variable would be, but I'd attribute that more to the "everything's an object" part of javascript rather than it "being a variable". The hoisting is entirely different when assigning it to a variable or declaring it as a function. And there's no point in manually assigning it to a variable unless you specifically want it not to be hoisted. Also especially confusing if it's to be used as a "class" since it's an extremely non-standard way of declaring a "class" function. – Jan Oct 08 '15 at 00:36

Miguel Mota · Answer 2 · 2015-10-07T23:22:23.187

1

this references to itself when the function is invoked as a constructor which you can do by using an immediately invoked function expression (IIFE).

var cooking = (function () {
    return new function () {
        this.dessert = "Ice Cream";
        this.numberOfPortions = 20;
        this.doubleLunch = function () {
            this.numberOfPortions = 40;
            document.write(this.numberOfPortions);
        };
    }
})();

document.write(cooking.dessert);

DEMO: http://jsfiddle.net/fk4uydLc/1/

However, you can achieve the same result by using a plain old JavaScript object (POJO).

var cooking = (function () {
    var obj = {};

    obj.dessert = "Ice Cream";
    obj.numberOfPortions = 20;
    obj.doubleLunch = function () {
        obj.numberOfPortions = 40;
        document.write(obj.numberOfPortions);
    };

    return obj;
})();

document.write(cooking.dessert);

DEMO: http://jsfiddle.net/vmthv1dm/1/

If you plan on using the constructor multiple times then the approach @Quentin mentioned is the way to go.

function Cooking() {
    this.dessert = "Ice Cream";
    this.numberOfPortions = 20;
    this.doubleLunch = function () {
        this.numberOfPortions = 40;
        document.write(this.numberOfPortions);
    };
}

var cooking = new Cooking();

document.write(cooking.dessert);

DEMO: http://jsfiddle.net/jsd3j46t/1/

edited Oct 07 '15 at 23:22

answered Oct 07 '15 at 23:03

Miguel Mota

20,135
5
45
64

thanks for the answer. I make the same appointment as in the other answer. Why is it necessary to create an instance of it. For example when I execute it shows me the number 7. Is it because this function is different from my first one? – GniruT Oct 07 '15 at 23:08
because of `this`. `this` refers to itself only when it's an instance, which why you need to use `new`. Otherwise `this` is the outer scope, in this case the `window` object. http://jsfiddle.net/jsd3j46t/ – Miguel Mota Oct 07 '15 at 23:09
I'm using "this" because I wanted to declare properties of a function-object. Am I wrong? Are there other ways? – GniruT Oct 07 '15 at 23:14
Thank you very much. Just one question: Is still being a function object? – GniruT Oct 07 '15 at 23:19
@GniruT not entire sure what you mean. All functions are objects. `var foo = function() {}` is a function expression. `function foo() {}` is a function declaration. `function Foo() {}; new Foo()` is a function invocation and the returned object is the instance. – Miguel Mota Oct 07 '15 at 23:28
Thank you for the answer. I thought a function is an object or not depending of its declaration. Now I understand it :) – GniruT Oct 07 '15 at 23:33

Javascript - How do I invoke an anonymous method as a variable and access its properties and methods?

2 Answers2