JavaScript函数调用的四个规则.docVIP

JavaScript函数调用的四个规则 JavaScript函数调用规则一 (1)全局函数调用： function makeArray( arg1, arg2 ){ return [this , arg1 , arg2 ]; } 这是一个最常用的定义函数方式。相信学习JavaScript的人对它的调用并不陌生。 调用代码如下： makeArray(one, two); // =﹥ [ window, one, two ] 这种方式可以说是全局的函数调用。 为什么说是全局的函数？ 因为它是全局对象window 的一个方法, 我们可以用如下方法验证： alert( typeof window.methodThatDoesntExist ); // =﹥ undefined alert( typeof window.makeArray); // =﹥ function 所以我们之前调用 makeArray的方法是和下面调用的方法一样的 window.makeArray(one, two); // =﹥ [ window, one, two ] JavaScript函数调用规则二 (1)对象方法调用： //creating the object var arrayMaker = { someProperty: some value here, make: makeArray }; arrayMaker.make(one, two);???? // =﹥ [ arrayMaker, one, two ] //或者用下面的方法调用： arrayMaker[make](one, two);? // =﹥ [ arrayMaker, one, two ] 看到这里跟刚才的区别了吧,this的值变成了对象本身. 你可能会质疑：为什么原始的函数定义并没有改变,而this却变化了呢？ 非常好，有质疑是正确的。这里涉及到 函数在JavaScript中传递的方式,? 函数在JavaScript 里是一个标准的数据类型, 确切的说是一个对象.你可以传递它们或者复制他们. 就好像整个函数连带参数列表和函数体都被复制, 且被分配给了 arrayMaker 里的属性 make,那就好像这样定义一个 arrayMaker : var arrayMaker = { someProperty: some value here, make: function (arg1, arg2) { return [ this, arg1, arg2 ]; } }; 如果不把调用规则二 弄明白，那么在事件处理代码中 经常会遇到各种各样的bug，举个例子： ﹤input type=button value=Button 1 id=btn1? /﹥ ﹤input type=button value=Button 2 id=btn2? /﹥ ﹤input type=button value=Button 3 id=btn3? onclick=buttonClicked();/﹥ ﹤ script type=text/javascript﹥ function buttonClicked(){ var text = (this === window) ? window : this.id; alert( text ); } var button1 = document.getElementById(btn1); var button2 = document.getElementById(btn2); button1.onclick = buttonClicked; button2.onclick = function(){??? buttonClicked();??? }; ﹤ /script﹥?? 点击第一个按钮将会显示”btn1”，因为它是一个方法调用,this为所属的对象(按钮元素) 。 点击第二个按钮将显示”window”，因为 buttonClicked 是被直接调用的( 不像 obj.buttonClicked() )， 这和第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的。 所以请大家注意： button1.onclick = buttonClicked; button2.onclick = function(){??? buttonClicked();??? }; this指向是有区别的。 JavaScript函数调用规则三 当然，如果使用的是jQuery库，那么