基于javaScript的this指向总结

在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念： 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中，this指向创建者，并非调用者 4:通过call、apply、bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时  （非严格模式) const func = function () { console.log(this); const func2 = function () { console.log JavaScript中的`this`关键字是一个非常重要的概念，它在不同场景下的指向可能会有所不同，这使得理解和掌握`this`的用法成为前端开发人员必备的技能。本文将深入探讨`this`在JavaScript中的各种情况下的指向。 1. 全局环境中的`this`： 在全局作用域中，`this`通常指向全局对象，在浏览器环境下，这个全局对象就是`window`。在非严格模式下，`func`和`func2`作为全局函数调用时，`this`会指向`window`。而在严格模式(`'use strict'`)下，`this`不再指向全局对象，而是被设置为`undefined`，这是为了避免无意中修改全局变量。 2. 函数作为对象的方法： 当函数作为对象的一个方法被调用时，`this`将指向调用该方法的对象。例如，`user.selfIntroduction()`中的`this`指向`user`对象，因此可以访问`userName`和`age`属性。然而，当内部函数如`loop`被调用时，由于设计缺陷，`this`不再指向`user`，此时需要使用一个变量（如`that`）来保存`this`的值，以便在内部函数中保持正确的引用。 3. ES6箭头函数中的`this`： 箭头函数与普通函数不同，它没有自己的`this`，`this`值继承自外层（闭包）作用域。这意味着箭头函数不会遵循常规的`this`绑定规则，而是根据上下文确定`this`的值。例如，如果箭头函数在`user`对象中定义，那么无论何时调用，`this`都会指向`user`。 4. 使用`call()`, `apply()`, `bind()`改变`this`指向： 这三个函数可以显式地改变函数调用时的`this`值。`call()`和`apply()`立即执行函数，同时允许传入`this`的值以及参数，而`bind()`则返回一个新的函数，这个新函数的`this`已经被固定为指定的值。例如，`func.call(data)`将使`func`中的`this`指向`data`对象。 5. 构造函数中的`this`： 在构造函数中，`this`指向新创建的对象实例。当使用`new`关键字调用函数时，会创建一个新的对象并将其绑定到`this`，然后执行构造函数体中的代码。 6. 事件处理函数中的`this`： 在事件处理函数中，`this`通常指向触发事件的元素。例如，如果在一个按钮的`click`事件处理器中，`this`会指向那个按钮元素。 7. 箭头函数内的`this`： 箭头函数不创建自己的`this`上下文，它捕获其所在（即定义时所在的）上下文的`this`值。因此，箭头函数在事件处理函数或定时器回调中，`this`将保持一致，而不是像普通函数那样指向调用时的对象。 理解并熟练运用这些`this`的指向规则对于编写健壮的JavaScript代码至关重要，特别是在构建复杂应用或进行面试准备时。实践中，经常需要结合使用`that`, `self`, 或者`_this`等变量来保存`this`的引用，以确保在异步操作或者嵌套函数中正确访问对象的属性和方法。此外，随着ES6类的引入，`this`的行为变得更加清晰，但对旧的函数式编程风格的理解仍然重要。