jshint expects the new 'prefix' for functions

CS_2013 picture CS_2013 · May 19, 2012 · Viewed 17.1k times · Source

CSiginIn, CSignUp, CTryIt, CBlocks are all functions declared as such

function CSignIn(){//stuff here}

yet JSHint says that I am missing the 'new' 'prefix'. What can I do to fix this?

They are just functions inside the module pattern. Also, it is asking me to remove semicolons I had placed at the end of the function which I have done.

var Control = ( function () 
{

    /**
     *Publik
     */

    var publik = function ( page )
    {
        // page 1 initialization

        if( page == 1 )
        {
            CSignIn();
            CSignUp();
            CTryIt();
            CBlocks();
        }

Function Example...

function CTryIt()
{
    // pull elements

    var tryit_button = document.getElementById( 'tryit_button' );

    // initialize access to Model

    tryit_button.addEventListener( "click", function( )
    { 
        new AjaxRequest().invoke( 'ajax_type=ControlTryIt', 
        function( server_response_text ) 
        { 
            new AjaxResponse( server_response_text, 'page_change' ); 
        } ); 

    }, false );
}

Answer

Felix Kling picture Felix Kling · May 19, 2012

If newcap is enabled, JSHint expects functions starting with a capital letter to be constructors and therefore to be called with the new keyword.

Solution: Either disable this option or rename your functions.

From the documentation:

This option requires you to capitalize names of constructor functions. Capitalizing functions that are intended to be used with new operator is just a convention that helps programmers to visually distinguish constructor functions from other types of functions to help spot mistakes when using this.

Not doing so won't break your code in any browsers or environments but it will be a bit harder to figure out—by reading the code—if the function was supposed to be used with or without new. And this is important because when the function that was intended to be used with new is used without it, this will point to the global object instead of a new object.

function MyConstructor() {
    console.log(this);
}

new MyConstructor(); // -> [MyConstructor]
MyConstructor();     // -> [DOMWindow]

For a more in-depth understanding on how this works, read Understanding JavaScript Function Invocation and "this" by Yehuda Katz.