日期:2014-05-16 浏览次数:20356 次
http://www.cnblogs.com/lhb25/archive/2009/03/12/1409241.html
?? 一次又一次的,
我发现,
那些有bug
的Javascript
代码是 由于没有真正理解Javascript
函数是如何工作而导致的(
顺便说一下,
许多那样的代码是我写的).JavaScript
拥有函数式编程的特性,
当我们选择面对它的时候,
这将成为我们前进的阻碍.
?
作为初学者,
我们来测试五种函数调用的方法,
从表面来看我们会认为那些函数与C#
中函数 的作用非常相似,
但是我们一会儿可以看到还是有非常重要的不同的地方的,
忽视这些差异无疑会导致难于跟踪的bug
。首先让我们创建一个简单的函数,
这个函 数将在将在下文中使用,
这个函数仅仅返回当前的this
的值和两个提供的参数.
<script type="text/
javascript
">
function
makeArray(arg1,
arg2){
??? return [ this, arg1, arg2 ];
}
</script>
最常用的方法,
但不幸的,
全局的函数调用
当我们学习Javascript
时,我们了解到如何用上面示例中的语法来定义函数。
,
我们也知道调用这个函数非常的简单,
我们需要做的仅仅是:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
Wait a minute. What's that window
alert( typeof window.methodThatDoesntExist );
// => undefined
alert( typeof window.makeArray);
// =>
window.makeArray('one', 'two');
// => [ window, 'one', 'two' ]
我说最普遍的调用方法是不幸的是因为它导致我们声明的函数默认是全局的.
我们都知道全局成员不是编程的最佳实践.
这在JavaScript
里是特别的正确,
在JavaScript
中避免使用全局的成员,
你是不会为之后悔的.
JavaScript 函数调用规则1
在没有通过明确所有者对象而直接调用的函数中,如myFunction() ,将导致this 的值成为默认对象(浏览器中的窗口)。
函数调用
让我们现在创建一个简单的对象,
使用 makeArray
函数作为它的一个方法,
我们将使用json
的方式来声明一个对象,
我们也来调用这个方法
//creating the object
var arrayMaker = {
??? someProperty: 'some value here',
??? make: makeArray
};
//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
看 到这里的不同了吧,this
的值变成了对象本身.
你可能会疑问原始的函数定义并没有改变,
为何它不是window
了呢.
好吧,
这就是函数在 JSavacript
中传递的方式,
函数在JavaScript
里是一个标准的数据类型,
确切的说是一个对象.
你可以传递它们或者复制他们.
就好像整个函 数连带参数列表和函数体都被复制,
且被分配给了 arrayMaker
里的属性make,
那就好像这样定义一个 arrayMaker:
var arrayMaker = {
??? someProperty: 'some value here',
??? make: function
(arg1, arg2) {
??? ??? return [ this, arg1, arg2 ];
??? }
};
JavaScript
函数调用规则2
在一个使用方法调用语法,
像
obj.myFunction()
或者 obj['myFunction'](),
这时this
的值为obj
这是事件处理代码中bug
的主要源头,
看看这些例子
<input type="butt