How is the javascript method referenced for the window object?

Question

When I declare a basic function in the on document ready listener, it cannot be used on any inline javascript code as shown below. However, when I call window.alertMeTwo() on the inline function, it works.

How can I reference a function of Window that hasn't been created yet?

How does this linking process possible work?

    var alertMeOne = function { alert();  }
    //works inline

    window.alertMeOne = function {alert()};
    //works inline

    jQuery(document).ready(function() {

       var alertMeTwo = function(){alert();}
        // does not work inline

       window.alertMeTwo = function(){alert()};
       //works inline????

    });

<head>
<!-- ref to js file here -->  
</head>
<body onclick="javascript:alertMeTwo()">
</body>

You need to go through this. http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 — rishabh dev, May 29 '16 at 18:03
"*How can I reference a function of Window that hasn't been created yet?*" `onclick` doesn't "validate" that `alertMeTwo()` exists when it's defined. It does that check after it's invoked, looking for `alertMeTwo` and retrieving its current value. Though, `onevent` attributes only search within the global scope. — Jonathan Lonowski, May 29 '16 at 18:07

score 0 · Accepted Answer · answered May 29 '16 at 18:06

alertMeOne() is defined in the global scope (which coincides with the scope under window).

The first alertMeTwo() is defined is the scope of the callback passed to jQuery().ready -- which is not the global scope.

The second one is defined inside a local scope but bound to the global scope (window.alertMeTwo).

If you access functions with the inline syntax you have to specify the scope or you'll fail back to the global one.

Also, in this specific case, since you're not exporting alertMeTwo to some namespace accessible from the global one, you can only call it from that scope (inside the .ready callback).

score 0 · Answer 2 · answered May 29 '16 at 18:07

0

try to assign an .on() event handler in jquery

window.alertMeTwo.on("load", function(){ 
//code goes here 
});

answered May 29 '16 at 18:07

Jeric Cruz

1,899
1
14
29

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

How can I reference a function of Window that hasn't been created yet?

How does this linking process possible work?

JavaScript functions, including those created from onevent attributes, don't link directly to variables or validate their existence when defined.

They reference a chain of scopes or Lexical Environments, leading up to the global scope, that can each store the variables you define in Environment Records.

While the function is executing, when it reaches alertMeTwo(), it'll only then begin searching through the environments and their records for alertMeTwo. A ReferenceError is only thrown when it runs through the chain of environments without finding the variable.

In the case of onevent attributes, these functions only search within the global scope/environment and Global Environment Record. In browsers, this object is the window object within browsers.

How is the javascript method referenced for the window object?

3 Answers3