7

I have a javascript function that would not run and threw an error. It took about an hour to realize that my form had the same name as the function. It seemed odd that a form name would be in conflict with a function name, but I change the name anyway and everything worked fine. Does anyone know why this would even happen?

If you run this code it will fail, but if you change the form name it works, very strange.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function mytest(){alert("hello");}
</script>
</head>
<body>
<form name="mytest" ></form>
<a  href="#" onClick="mytest();">Click Me</a>
</body>
</html>

I am running this on IE6. What is strange to me is that one is Javascript code and the other is an attribute of HTML.

Live link where you can see this happening:
JSBin

1

2 Answers 2

7

To add some detail to what is happening here you need to understand javascript's scope chain.

Scope Object

A scope object is a hidden object created when a function is executed on which variables declared with var are placed as properties, also any named function inside the executing function are also placed as properties on the scope object.

When an identifier such as mytest is requested javascript searches for that name attached to the current scope object (btw the scope object is also known as the "execution context").

Scope Chain

When a function is declared inside a function the current scope object is attached to the function. When this inner function is executing (and therefore has its own scope object) the code executing has access to not only the current scope object but also the scope object in which the currently executing function was created. Stop Here, Re-read that last sentence. This is known as the scope chain, the chain will be as deep as there are functions inside of functions (this happens a lot when using frameworks like JQuery).

Hence when the search for an identifier fails on the current scope object it takes a look at the next scope object up the chain. It keeps walking up the chain until it hits the global object (functions declared at the global level have the global object as their scope object).

Event Attribute Weirdness

When browsers execute code inside the text of an attribute such as onclick it treats this code as if it were a function. However browsers will do odd things with the apparent scope chain attached to this "function". Typically they inject the current element and the document element (and maybe other elements in between) as if they were scope objects into the scope chain.

So for example change the onclick code in your example to "alert(href)". You will see the path to your page followed by # in the alert box. This is because the current element is in the scope chain and hence href is resolved by its href property.

In the case in the question the code arrives at the document in the scope chain (which is placed above the global window object) and finds the identifier "mytest" (which is reference to a form) and hence attempts to use the value of that as a function (and fails).

5
  • 1
    Nice explanation, Anthony. The only thing I would change is to rename what you call "scope object" to "Variable Object" (which is what it really is :)). Another thing that's misleading is that "named functions" are members of Variable object. They are not. Function declarations are, but, say, function expressions aren't, yet they could also be "named" (iow, have identifier). And finally, anyone interested in scoping issues of intrinsic event handler bodies, should read this article (jibbering.com/faq/names/event_handler.html) which delves into a plenty of details on the subject :)
    – kangax
    Sep 13, 2009 at 2:47
  • @Kangax: Thanks for you comments. Yes I agree that strictly speaking ECMA 262 uses the term "Variable Object" but it is IMO a dumb name since it implies that some "object" "varies" in some way. The term only makes sense in the context of the spec which is fine for implementors explaining this to a computer but rubbish for inter-human comprehension. The term "Scope Object" stands on its own and implies that there is some object related to Scope, its also easy to reason that it is likely to be associated with that other thing called a "scope chain". Sep 13, 2009 at 7:03
  • @Kangax: As far as "named functions" are concerned I'm not sure I follow your reasoning. You seem to be saying you could name a function expression without that name ending up on the Variable object but I'm not sure thats what you actually meant though. Sep 13, 2009 at 7:09
  • Anthony, yes that's what I'm saying. If by "named" you mean any function that has an Identifier, than you probably know that function expressions can have one too (and that their Identifier is only available to the inner scope of the function in question). Take a look at my article on the subject of function expressions vs function declarations if you're interested (yura.thinkweb2.com/named-function-expressions)
    – kangax
    Sep 13, 2009 at 16:30
  • @Kangax: Umm.. (coughs..) yes you're quite right, got caught to out by Microsofts implementation which doesn't conform to the Ecma Spec. In IE an identifier in the production of a function expression does end up on the current execution context instead of a separate object inserted in the scope chain to hold it as the Spec requires. Sep 13, 2009 at 20:34
6

The function is a member in the window object, and the form is a member of the forms collection in the document object. When the script looks for a match for the identifier "mytest", it first looks in the document object, and if it's not found there it looks in the window object.

You can access the function even with the conflicting form name if you specify that it's in the window object:

<a href="#" onClick="window.mytest();">Click Me</a>
2
  • 2
    It also depends on the browser. IE pollutes the global namespace with members for every element on the page that declares an ID or a NAME attribute. Needless to say it causes lots of problems. That said due to needing to support IE in most cases, you are best off to try and ensure that your function names will not collide with the name/id values of elements in your page.
    – scunliffe
    Sep 12, 2009 at 19:09
  • @Scunliffe: Actually in this case other browsers are affected. Also note that IE gives priority to names defined in javascript. Only when the standard javascript search for a name in scope turns up with nothing does IE attempt to resolve a name in the way you suggest. Hence the test case in the example would not have failed. Sep 12, 2009 at 21:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.