【前端面经】JS-this的指向规则

JavaScript中this指向详解

在JavaScript中，this是一个非常重要且常用的关键字，它可以用来引用当前执行的上下文。但是，由于JavaScript中的this非常灵活，很多人经常会被它搞糊涂。因此，在本篇文章中，我们将重点讨论JavaScript中的this指向机制，并介绍一些常见的应用场景和使用技巧。

一、this指向机制

在JavaScript中，this的指向取决于它所处的上下文。具体来说，this的指向可以分为以下几种情况：

1. 全局上下文中的this

在全局范围内，this指向的是全局对象。在浏览器中，全局对象指的是window对象。

2. 函数上下文中的this

在函数内部，this指向的是调用该函数的对象。如果函数没有被任何对象调用，则this的指向是全局对象（在非严格模式下）或undefined（在严格模式下）。

3. 对象方法中的this

在对象方法中，this指向的是调用该方法的对象。

4. 构造函数中的this

在构造函数中，this指向的是新创建的对象。

5. apply和call中的this

在apply和call方法中，this指向的是传入的第一个参数。

二、常见应用场景

1. 改变函数内部的this指向

当需要改变函数内部的this指向时，可以使用bind、apply、call等方法。

• bind方法会返回一个新函数，新函数中的this指向被绑定的对象。
• apply和call方法会立即执行函数，并将this指向传入的第一个参数。

2. 优化代码性能

在一些需要大量重复调用的函数中，由于JavaScript的函数调用机制，频繁创建函数对象会造成一定的性能损失。因此，可以使用bind方法将函数的this绑定到一个对象上，从而避免重复创建函数对象，并提高代码性能。

3. 数组操作

在一些数组操作中，apply和call方法也非常有用。例如，可以使用Math.max.apply(null, arr)来获取数组中的最大值。

三、常见使用技巧

1. 手写实现bind方法

手写实现bind方法可以更好地理解bind的实现原理。

Function.prototype.Bind = function(context) {
    // 判断是否为函数
    if (typeof this !== 'function') {
        throw new TypeError("error")
    }

    // 获取参数
    const args = [...arguments].slice(1),
          fn = this;
    return function Fn() {
        console.log(this instanceof Fn);
        return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments))
    }
}

2. 箭头函数中的this

在箭头函数中，this指向的是定义时函数所在的对象，而不是调用时的对象。因此，在箭头函数中，this的指向是固定的，无法通过bind、apply、call等方法改变。

结论

在JavaScript中，this是一个非常重要且常用的关键字。理解JavaScript中的this指向机制，并掌握常见的应用场景和使用技巧，可以帮助我们更好地编写优质的JavaScript代码。