JavaScript函数调用的对象和方法
在JavaScript编程中，理解函数是如何被调用的对于避免潜在的bug以及正确使用语言特性是非常重要的。函数调用涉及几个核心概念：函数本身、函数体内使用的this关键字、以及函数调用时的上下文环境。
来看一个简单函数的定义和调用：
```javascript
function makeArray(arg1, arg2) {
return [this, arg1, arg2];
}
```
在没有任何对象上下文的情况下调用`makeArray`函数，我们得到的返回值是`[window, 'one', 'two']`。这里的`window`是浏览器环境中的全局对象，而在Node.js等非浏览器环境中，这个全局对象可能是`global`。
对于为何`this`会绑定到全局对象，这可以从JavaScript的函数调用规则理解。当一个函数没有被对象所拥有（即不是对象方法），并且直接通过其名称调用时（如`makeArray()`），`this`默认会指向全局对象。在浏览器环境中，这个全局对象就是`window`。
然后，如果我们将`makeArray`函数赋值给一个对象的属性，并通过这个对象来调用它：
```javascript
var arrayMaker = {
someProperty: 'somevaluehere',
make: makeArray
};
arrayMaker.make('one', 'two');
// 返回值：=> [arrayMaker, 'one', 'two']
```
在这里，`this`的值变成了`arrayMaker`对象本身。这是因为函数作为属性赋给了对象，所以当通过对象调用时，`this`指向了该对象。这个规则体现了JavaScript函数调用的第二条重要规则：当函数作为某个对象的属性被调用时，该函数内的`this`将指向该对象。
在事件处理中，`this`的上下文会经常变化，这很容易导致理解上的混淆。例如，通过HTML元素的`onclick`事件处理器直接调用函数：
```html
<input type="button" value="Button1" id="btn1"/>
<input type="button" value="Button2" id="btn2"/>
<input type="button" value="Button3" id="btn3" onclick="buttonClicked();"/>
```
```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;
// 返回值：=> btn1，它是一个方法调用，this为所属的对象(按钮元素）
button2.onclick = function() { buttonClicked(); };
// 返回值：=> window，因为buttonClicked()是被直接调用的(不像obj.buttonClicked().)
```
在第一种情况中，`buttonClicked`作为`button1`的方法被调用，`this`正确地指向了按钮元素。而在第二种情况中，使用了匿名函数包装了`buttonClicked`调用，导致函数内的`this`失去了绑定到按钮的上下文，因此变成了全局`window`对象。
当事件处理器通过HTML标签直接指定时，情况与通过JavaScript代码指定的匿名函数调用类似：
```html
// 点击第三个按钮的结果与第二个按钮一样，都是window。
```
在这类事件处理器直接绑定在HTML元素上的情况中，JavaScript在事件触发时会创建一个新的函数上下文，并将`this`指向触发事件的元素，除非另有明确指定。
理解这些函数调用和`this`绑定的行为对于编写可预测、可维护的JavaScript代码至关重要。它可以帮助开发者更好地利用对象的方法来组织代码，同时避免在事件处理等特定场景中出现错误的`this`绑定导致的问题。实际上，从ECMAScript 5开始，可以通过方法`Function.prototype.bind`来明确地绑定函数的`this`值，但深入理解`this`的工作原理始终是解决问题的第一步。
