JavaScript中5种调⽤函数的⽅法
这篇⽂章详细的介绍了Javascript中各种函数调⽤的⽅法及其原理，对于理解JavaScript的函数有很⼤的帮助！
JavaScript，调⽤函数的5种⽅法
⼀次⼜⼀次的，我发现，那些有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( hodThatDoesntExist );
/
/ => 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) {函数prototype
return [ this, arg1, arg2 ];
}
};
JavaScript函数调⽤规则2
在⼀个使⽤⽅法调⽤语法，像 Function()或者 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 );
}
var button1 = ElementById('btn1');
var button2 = ElementById('btn2');
</script>
点击第⼀个按钮将会显⽰”btn”因为它是⼀个⽅法调⽤,this为所属的对象(按钮元素) 点击第⼆个按钮将显⽰”window”因为buttonClicked是被直接调⽤的(不像 obj.buttonClicked().) 这和我们第三个按钮，将事件处理函数直接放在标签⾥是⼀样的.所以点击第三个按钮的结果是和第⼆个⼀样的.
使⽤像jQuery的JS库有这样的优点，当在jQuery⾥定义了⼀个事件处理函数,JS库会帮助重写this的值以保证它包含了当前事件源元素的引⽤,
复制代码代码如下:
//使⽤jQuery
$('#btn1').click( function() {
alert( this.id ); // jQuery ensures 'this' will be the button
});
jQuery是如何重载this的值的呢?继续阅读
另外两个:apply()和call()
你越多的使⽤JavaScript的函数，你就越多的发现你需要传递函数并在不同的上下⽂⾥调⽤他们，就像Qjuery在事件处理函数⾥所做的⼀样，你往往经常需要重置this的值.记住我告诉你的，在Javascript中函数也是对象，函数对象包含⼀些预定义的⽅法，其中有两个便是apply()和call()，我们可以使⽤它们来对this进⾏重置.
复制代码代码如下:
var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler,  'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]
这两个⽅法是相似的，不同的是后⾯的参数的不同,Function.apply()是使⽤⼀个数组来传递给函数的,⽽Function.call()是将这些参数独⽴传递的，在实践中你会发现apply()在⼤多数情况下更⽅便.
JSavacript函数调⽤规则3
如果我们想在不复制函数到⼀个⽅法⽽想重载this的值的时候，我们可以使⽤ myFunction.apply( obj ) 或 myFunction.call( obj ).
构造器
我不想深⼊研究在Javascript中类型的定义，但是在此刻我们需要知道在Javascript中没有类,⽽且任何⼀
个⾃定义的类型需要⼀个初始化函数，使⽤原型对象(作为初始化函数的⼀个属性)定义你的类型也是⼀个不错的主义，让我们来创建⼀个简单的类型
复制代码代码如下:
//声明⼀个构造器
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' );
var other = new ArrayMaker( 'first', 'second' );
// => [ am, 'one' , 'two' ]
⼀个⾮常重要并值得注意的是出现在函数调⽤前⾯的new运算符，没有那个，你的函数就像全局函数⼀样，且我们创建的那些属性都将是创建在全局对象上(window),⽽你并不想那样，另⼀个话题是，因为在你的构造器⾥没有返回值，所以如果你忘记使⽤new运算符，将导致你的⼀些变量被赋值为 undefined.
因为这个原因，构造器函数以⼤写字母开头是⼀个好的习惯，这可以作为⼀个提醒，让你在调⽤的时候不要忘记前⾯的new运算符.
带着这样的⼩⼼，初始化函数⾥的代码和你在其他语⾔⾥写的初始化函数是相似的.this的值将是你将创建的对象.
Javascript函数调⽤规则4
当你将函数⽤作初始化函数的时候，像MyFunction(),Javascript的运⾏时将把this的值指定为新建的对象.
我希望理解各种函数调⽤⽅式的不同会使你的Sjavacript代码远离bugs，有些这样的bug会确保你总是知道this的值是避免他们第⼀步。