1、一次又一次的,我发现,那些有 bug 的 Javascript 代码是由于没有真正理解 Javascript 函数是如何工作而导致的(顺便说一下, 许多那样的代码是我写的).JavaScript 拥有函数式编程的特性,当我们选择面对它的时候, 这将成为我们前进的阻碍.作为初学者,我们来测试五种函数调用的方法, 从表面来看我们会认为那些函数与 C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不同的地方的,忽视这些差异无疑会导致难于跟踪的 bug。首先让我们创建一个简单的函数,这个函数将在将在下文中使用,这个函数仅仅返回当前的 this 的值和两个提供的参数 .?12345func
2、tion makeArray(arg1, arg2)return this, arg1, arg2 ;最常用的方法,但不幸的, 全局的函数调用当我们学习 Javascript 时，我们了解到如何用上面示例中的语法来定义函数。我们也知道调用这个函数非常的简单,我们需要做的仅仅是:?123456789makeArray(one, two);/ = window, one, two Wait a minute. Whats that windowalert( typeof window.methodThatDoesntExist );/ = undefinedalert( typeof window
3、.makeArray);/ =window.makeArray(one, two);/ = window, one, two 我说最普遍的调用方法是不幸的是因为它导致我们声明的函数默认是全局的.我们都知道全局成员不是编程的最佳实践.这在 JavaScript 里是特别的正确, 在 JavaScript 中避免使用全局的成员,你是不会为之后悔的.JavaScript 函数调用规则 1在没有通过明确所有者对象而直接调用的函数中，如 myFunction()，将导致 this的值成为默认对象（浏览器中的窗口）。函数调用让我们现在创建一个简单的对象,使用 makeArray 函数作为它的一个方法, 我
4、们将使用 json 的方式来声明一个对象, 我们也来调用这个方法?1234567891011/creating the objectvar arrayMaker = someProperty: some value here,make: makeArray;/invoke the make() methodarrayMaker.make(one, two);/ = arrayMaker, one, two / alternative syntax, using square bracketsarrayMakermake(one, two);/ = arrayMaker, one, two 看到
5、这里的不同了吧,this 的值变成了对象本身. 你可能会疑问原始的函数定义并没有改变,为何它不是 window 了呢.好吧, 这就是函数在 JSavacript 中传递的方式,函数在JavaScript 里是一个标准的数据类型, 确切的说是一个对象. 你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了 arrayMaker 里的属性make,那就好像这样定义一个 arrayMaker:?123456var arrayMaker = someProperty: some value here,make: function (arg1, arg2) return
6、this, arg1, arg2 ;JavaScript 函数调用规则 2在一个使用方法调用语法,像 obj.myFunction()或者 objmyFunction(),这时 this 的值为 obj这是事件处理代码中 bug 的主要源头,看看这些例子?1234567891011function buttonClicked()var text = (this = window) ? window : this.id;alert( text );var button1 = document.getElementById(btn1);var button2 = document.getEleme
7、ntById(btn2);button1.onclick = buttonClicked;1213button2.onclick = function() buttonClicked(); ;点击第一个按钮将会显示”btn”因为它是一个方法调用,this 为所属的对象(按钮元素)点击第二个按钮将显示”window”因为 buttonClicked 是被直接调用的(不像 obj.buttonClicked().)这和我们第三个按钮 ,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的.使用像 jQuery 的 JS 库有这样的优点 ,当在 jQuery 里定义了一个事
8、件处理函数,JS 库会帮助重写 this 的值以保证它包含了当前事件源元素的引用,?1234/使用 jQuery$(#btn1).click( function() alert( this.id ); / jQuery ensures this will be the button);jQuery 是如何重载 this 的值的呢?继续阅读另外两个:apply()和 call()你越多的使用 JavaScript 的函数, 你就越多的发现你需要传递函数并在不同的上下文里调用他们,就像 Qjuery 在事件处理函数里所做的一样,你往往经常需要重置 this 的值. 记住我告诉你的,在 Javasc
9、ript 中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是 apply()和 call(),我们可以使用它们来对 this 进行重置.?12345var gasGuzzler = year: 2008, model: Dodge Bailout ;makeArray.apply( gasGuzzler, one, two );/ = gasGuzzler, one , two makeArray.call( gasGuzzler, one, two );/ = gasGuzzler, one , two 这两个方法是相似的,不同的是后面的参数的不同,Function.apply()
10、是使用一个数组来传递给函数的,而 Function.call()是将这些参数独立传递的 ,在实践中你会发现 apply()在大多数情况下更方便.JSavacript 函数调用规则 3如果我们想在不复制函数到一个方法而想重载 this 的值的时候,我们可以使用 myFunction.apply( obj )或 myFunction.call( obj ).构造器我不想深入研究在 Javascript 中类型的定义, 但是在此刻我们需要知道在 Javascript中没有类,而且任何一个自定义的类型需要一个初始化函数,使用原型对象( 作为初始化函数的一个属性)定义你的类型也是一个不错的主义, 让我们
11、来创建一个简单的类型?123456789101112131415161718/声明一个构造器function ArrayMaker(arg1, arg2) this.someProperty = whatever;this.theArray = this, arg1, arg2 ;/ 声明实例化方法ArrayMaker.prototype = someMethod: function () alert( someMethod called);,getArray: function () return this.theArray;var am = new ArrayMaker( one, two
12、 );var other = new ArrayMaker( first, second );am.getArray();/ = am, one , two 一个非常重要并值得注意的是出现在函数调用前面的 new 运算符,没有那个, 你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用 new 运算符,将导致你的一些变量被赋值为 undefined.因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒, 让你在调用的时候不要忘记前面的 new 运算符.带着这样的小
13、心,初始化函数里的代码和你在其他语言里写的初始化函数是相似的.this的值将是你将创建的对象.Javascript 函数调用规则 4当你将函数用作初始化函数的时候,像 MyFunction(),Javascript 的运行时将把this 的值指定为新建的对象.总结我希望理解各种函数调用方式的不同会使你的 Sjavacript 代码远离 bugs,有些这样的 bug 会确保你总是知道 this 的值是避免他们第一步 function所有的这些意味着我们之前调用 makeArray 的方法是和下面调用的方法一样的object doing there? Why is it the value of
14、this? If you havent stopped to think about it, please staywith me here.等一等,那个 Window 对象在这里干嘛呢,为何 this 的值是它呢,如果你以前没有停下来思考这个问题,那么请和我一起来分析吧, 在 Javascript 里,我没有指特定的浏览器,有一个全局的对象,那些看起来散落在你的脚本里的每一行代码(例如在一个对象外的声明) 其实都被写在了一个全局对象的上下文里.在我们的例子中, 其实那个 makeArray 函数可以说不是一个松散的全局函数,而是全局对象的一个方法, 让我们返回来看浏览器, 在这个环境里它的全局对象被映射到 window 对象。
