Javascript中函数分类&this指向的实例详解
通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function(
### JavaScript中的函数分类与this指向详解
#### 一、引言
在JavaScript中，函数是一种非常重要的编程单元，它不仅可以封装一系列的操作逻辑，还可以作为数据进行传递和处理。此外，函数内部的关键字`this`的指向问题也经常让人感到困惑。本文将通过具体的示例来探讨JavaScript中的函数分类以及`this`指向的规则，并介绍如何改变`this`指向的三种方法。
#### 二、函数分类
根据不同的使用场景和定义方式，JavaScript中的函数大致可以分为以下几类：
1. **标准函数声明（Method 1）**:
```javascript
function fn() {
console.log('fn created ');
}
```
这是最常见的函数定义方式。这种方式定义的函数可以被任意调用。
2. **函数表达式（Method 2）**:
```javascript
var fn2 = function () {
console.log('fn2 created');
};
```
函数表达式可以赋值给变量，也可以作为参数传递给其他函数。这种方式定义的函数在变量提升时只提升变量声明而不提升函数体。
3. **Function构造函数（Method 3）**:
```javascript
var fn3 = new Function("test", "console.log(test);");
fn3("fn3 test");
```
使用`new Function()`方式可以动态地创建函数。这种方式定义的函数通常用于需要在运行时动态生成函数的场合，但这种方式的执行效率较低。
#### 三、this指向规则
`this`关键字在JavaScript中代表当前执行上下文的对象，其指向取决于函数的调用方式。具体规则如下：
1. **作为普通函数调用时**:
```javascript
function fn() {
console.log('fn1' + this);
}
fn();
```
在浏览器环境中，当函数作为全局函数调用时，`this`指向`window`对象。
2. **作为对象方法调用时**:
```javascript
var o = {
sayHi: function () {
console.log('fn2' + this);
}
};
o.sayHi();
```
当函数作为对象的方法调用时，`this`指向该对象。
3. **作为构造函数调用时**:
```javascript
function Star(username) {
this.username = username;
}
var star1 = new Star('ldh');
```
当使用`new`关键字调用函数时，`this`指向新创建的对象。
4. **作为事件处理器时**:
```javascript
var fn = function () {
console.log('btn被点击了' + this);
};
btn.onclick = fn;
```
当函数作为事件处理器被调用时，`this`指向触发事件的DOM元素。
5. **作为定时器回调时**:
```javascript
setInterval(function () {}, 1000);
```
定时器函数的`this`默认指向全局对象（浏览器环境为`window`）。
6. **立即执行函数**:
```javascript
(function () {
console.log('function executed');
})();
```
立即执行函数中的`this`同样指向全局对象。
#### 四、改变this指向的方法
在某些情况下，我们需要显式地改变函数内部`this`的指向，JavaScript提供了几种方法来实现这一点：
1. **call方法**:
`call`方法可以改变函数内部`this`的指向，并立即执行该函数。例如：
```javascript
function Father(username, age) {
this.username = username;
this.age = age;
}
function Son(username, age, gender) {
Father.call(this, username, age); // 继承父类属性
this.gender = gender;
}
```
`call`的第一个参数是想要设置为`this`的新值，之后的参数将作为函数的参数依次传入。
2. **apply方法**:
`apply`方法与`call`相似，不同之处在于它的第二个参数是一个数组或类似数组的对象：
```javascript
var o = {
username: 'testuser'
};
function fn(arr) {
console.log(arr);
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log(this);
}
fn.apply(o, [23, 43]);
```
`apply`可以用来扩展内置对象的功能，如使用`Math.max.apply(Math, arr)`计算数组的最大值。
3. **bind方法**:
`bind`方法返回一个新的函数，其中`this`被设置为提供的值，原始函数的参数会被添加到调用序列之后。例如：
```javascript
var btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log('点击了按钮' + i);
}.bind(this);
}
```
在这个例子中，每个按钮的点击事件都会打印出自己的索引号，而不是最后一个按钮的索引号，这是因为`bind`改变了事件处理函数中的`this`指向。
#### 五、结论
通过本文的讲解和示例，我们可以看到JavaScript中的函数具有高度的灵活性，可以通过多种方式定义和使用。同时，`this`关键字的指向也是一个需要特别注意的概念。掌握好这些基础知识，可以帮助我们更好地理解和编写JavaScript代码。
