日期:2014-05-16 浏览次数:20418 次
英文原版: http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx
?
Time after time I find JavaScript code that has bugs caused by lack of proper understanding of how functions work in JavaScript (a lot of that code has been written by me, by the way.) JavaScript has functional programming characteristics, and that can get in our way until we decide to face and learn it.
For starters, let's examine five ways to invoke a function. On the surface we might be tempted to think that functions work exactly like C#, but we will see that there are important differences and ignoring them will undoubtedly result in hard to track bugs.
Let's first create a simple function that we will be using through the
rest of this post. This function will just return an array with the
current value of this
and the two supplied arguments.
<script type="text/javascript">
function makeArray(arg1, arg2){
return [ this, arg1, arg2 ];
}
</script>
?When we are learning JavaScript we learn how to define functions using the syntax used in the example above. We learn that it's also very easy to call that function — all we need to do is:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
?
Wait a minute. What's that window
object doing there? Why is it the value of this
? If you haven't stopped to think about it, please stay with me here.
In JavaScript, and I'm not talking specifically about the browser here,
there's a default/global object. It's as if every code that we write
which seems to be just "loose" inside your script (i.e. outside of any
object declaration) is actually being written in the context of that
global object. In our case, that makeArray
function isn't
just a loose "global" function, it's a method of the global object.
Bringing ourselves back to the browser, the global object is mapped to
the window
object in this environment. Let's prove that.
alert( typeof window.methodThatDoesntExist );
// => undefined
alert( typeof window.makeArray);
// => function
?
What all this means is that calling makeArray
like we did before is the same as calling as follows.
window.makeArray('one', 'two');
// => [ window, 'one', 'two' ]
?I say it's unfortunate that this is the most common way because it leads us to declare our functions globally by default. And we all know that global members are not exactly the best practice in software programming. This is especially true in JavaScript. Avoid globals in JavaScript, you won't regret it.
myFunction()
, causes the value of this
to be the default object (window
in the browser).
Let's now create a small object and use the makeArray
function as one of its methods. We will declare the object using the literal notation. Let's also call this method.
//creating the object
var arrayMaker = {