window
and document
and their numerous offspring are very important, but they are defined by the browser, not by the programmer.I myself have written JavaScript for more than three years without ever defining an object. The technique explained on this page is the first practical use of programmer-defined objects I've found.Since the only other programming languages I know are Commodore 64 Basic (which is not object oriented, to put it mildly) and Perl (which doesn't need to be object oriented) and since I don't have any formal training in programming I cannot write a general introduction to objects and object oriented programming. Therefore a quick overview will have to suffice.()
. When you call them, like object.method()
, something happens.object.property
, you get (or set) this value.write()
method of the document object. If you write your own functions you add methods to the window
object, the parent of all other JavaScript objects.Likewise, if you ask for the innerHeight
of a page, you access a property of the window
object and if you define a variable of your own you really add a new property to the window
object.So you already use methods and properties in everyday JavaScripting. Since most of these are preprogrammed functions and variables, you usually don't need to worry about the objects themselves, they're just a kind of 'black boxes' that contain useful stuff. The methods and properties (functions and variables) that you define yourself are usually added to the window
object.theStatus
object and we can start adding properties (in this example we don't need methods). What we want is to create one property for each image on the page. We could dotheStatus.Home = 'normal';Home
to our object and set its value to the string 'normal'. (Remember that JavaScript is case sensitive, so the property home
does not exist, only Home
.)All this is very useful, but using this notation we encounter problems later on. Suppose we want to create a property of theStatus
for each image on the page. The property should have the same name as the image and its value should be 'normal'.We cannot do:var x = document.images;theName
and sets its value to 'normal'. After executing this script you have only one property theName
. This is not what we want, we want one property for each image.document.theForm
but that's a special case, not regular behaviour of JavaScript objects/associative arrays).So when we want to set the status of each image to 'normal' in our object, we dovar x = document.images;theName
(a string) is put into the brackets []
where a string is expected. So you create a new key/value pair, which is the same as a new property with a value.All this is JavaScript magic at its fullest. I don't completely understand what I'm doing either, but it works just fine. Basically you now have the power to let one name or string refer to another one.for (var i in object)
is equivalent to Perl foreach $key (keys %hash)
.Just as you can go through each element of a normal array byvar x = [the array];callFn()
and pass the image name to it. You can of course tediously write out everything:if (theStatus.Home == 'mouseover')for/in
statement which is meant exactly for this situation. If you dofor (var i in theStatus)theStatus
object (= all keys in the associative array theStatus
). The variable i
succesively becomes the name of each property of the object (key of the associative array) so you can do something with theStatus[i]
and it is done to each property.callFn()
and pass it the key (the name of the image).(Note that JavaScript doesn't guarantee any particular order for the properties. So you cannot expect the property that was defined first to appear first, it might come last.)新闻热点
疑难解答