CODEWITHSUNDEEP
javascriptfunction
Kevin Addison
Kevin Addison

Reputation: 43

Why is my function call not working?

<script type="text/javascript">
    function CustomAlert() {
        this.render = function() {
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogOverlay = document.getElementById('dialogOverlay');
            var dialogbox = document.getElementById('dialogbox');

            dialogOverlay.style.display = "block !important ";
            dialogOverlay.style.height = winH+"px !important ";
            dialogbox.style.left = (winW/2) - (550 * .5) + "px !important ";
            dialogbox.style.top = "100px !important ";
            dialogbox.style.display = "block !important";
        }

        this.ok = function () {
        }
    }

    function HighScore( arg )
    {
        CustomAlert().render();
    }
</script>

Why is it telling me that CustomAlert is undefined? I also attempted to assign CustomAlert() to a var but then the console tells me that the var is now undefined.

Upvotes: 3

Views: 107

Answers (2)

Christos
Christos

Reputation: 53958

Why is it telling me that CustomAlert is undefined? I also attempted to assign CustomAlert() to a var but then the consol tells me that the var is now undefined??

Because you should create an object of this 

var customerAlert = new CustomAlert();

and then call the render method of it.

Or in one statement:

function HighScore( arg )
{
    new CustomAlert().render();
}

This is called the Constructor Invocation Pattern.

Actually in JavaScript functions can be invoked with one of the following ways:

  • The method invocation pattern
  • The function invocation pattern
  • The constructor invocation pattern
  • The apply invocation pattern

Method Invocation pattern

This method of invocation is used when the function is stored as a property of an object. Hence we call this function a method, like in other object oriented languages. When we call the function this is bound to the that object. For instance:

var app = {
    render: function() {
                var winW = window.innerWidth;
                var winH = window.innerHeight;
                var dialogOverlay = document.getElementById('dialogOverlay');
                var dialogbox = document.getElementById('dialogbox');

                dialogOverlay.style.display = "block !important ";
                dialogOverlay.style.height = winH+"px !important ";
                dialogbox.style.left = (winW/2) - (550 * .5) + "px !important ";
                dialogbox.style.top = "100px !important ";
                dialogbox.style.display = "block !important";
        }
        ok : function () {

        }
};

In this case we would call the render method as below:

app.render();

Function Invocation Pattern

This is the case where the function is not the property of an object. In this case the function is bound to the global object -which usually is the window object in web applications-. 

var render = function(){
    var winW = window.innerWidth;
                var winH = window.innerHeight;
                var dialogOverlay = document.getElementById('dialogOverlay');
                var dialogbox = document.getElementById('dialogbox');

                dialogOverlay.style.display = "block !important ";
                dialogOverlay.style.height = winH+"px !important ";
                dialogbox.style.left = (winW/2) - (550 * .5) + "px !important ";
                dialogbox.style.top = "100px !important ";
                dialogbox.style.display = "block !important";
};

Then we just call it as below:

render();

Constructor Invocation Pattern

This is the case where we invoke a function with the new prefix. In this case a new object will be created. It is a good way to create object with the same properties. These functions are called constructors and by convention their names starts with a capital letter.

Apply Invocation Pattern

The apply method give us the opportunity to construt an array of arguments that will be used for the invocation of the function. Furthermore, it give us the ability to choose the value of this.

For more information on the above, please refer to JavaScript: The Good Parts

Upvotes: 2

p.s.w.g
p.s.w.g

Reputation: 149020

When called as a normal function (CustomAlert()) your function doesn't return anything. However, you can invoke it as constructor function (new CustomAlert()), by using the new operator when calling your function. This will cause the this within the function to refer to the newly created object instance and automatically use that instance as the return value:

function HighScore( arg )
{
    new CustomAlert().render();
}

An alternative (but certainly not equivalent) solution is to return a new object directly from CustomAlert:

function CustomAlert() {
    var obj = {
        render: function () {
            ...
        },
        ok: function () {
            ...
        }
    };

    return obj;
}

And now you can call it as you would a normal function:

function HighScore( arg )
{
    CustomAlert().render();
}

Upvotes: 5

Related Questions