如果你真正理解Javascript函数是如何调用工作的,那么就可以避免一些bug的发生;
首先让我们创建一个简单的函数,这个函数将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数.
代码如下:
function makeArray(arg1, arg2){
return [ this, arg1, arg2 ];
}
调用这个函数非常的简单,我们需要做的仅仅是:
代码如下:
makeArray('one', 'two');
返回值:=> [ window, 'one', 'two' ]
问题出现了,this的值怎么会变成了window?下面做个简单分析:
在Javascript里,有一个全局的对象, 那些看起来散落在你的脚本里的每一行代码,其实都被写在了一个全局对象的上下文里.在我们的例子中,其实那个makeArray 函数可以说不是一个松散的全局函数,而是全局对象的一个方法, 让我们返回来看浏览器,在这个环境里它的全局对象被映射到window对象.让我们来证明一下:
代码如下:
alert( typeof window.makeArray);
返回值:=> function
所有的这些意味着我们之前调用makeArray的方法是和下面调用的方法一样的,
代码如下:
window.makeArray('one', 'two');
返回值:=> [ window, 'one', 'two' ]
JavaScript函数调用规则1:在没有通过明确所有者对象而直接调用的函数中,如myFunction(),将导致this的值成为默认对象(浏览器中的窗口)。
现创建一个简单的对象,使用makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法:
代码如下:
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};
arrayMaker.make('one', 'two');
// 返回:=> [ arrayMaker, 'one', 'two' ]
arrayMaker['make']('one', 'two');
// 返回:=> [ arrayMaker, 'one', 'two' ]
this的值变成了对象arrayMaker本身.你可能会疑问原始的函数定义并没有改变,为何它不是window了呢.函数是一个对象,你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了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="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 );