JavaScript严格模式下关于this的几种指向详解

除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。下面这篇文章主要给大家介绍了在JavaScript严格模式下关于this的几种指向的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。 JavaScript中的`this`关键字是一个非常重要的概念，尤其是在深入理解函数和对象时。在正常模式下，`this`的指向可能因上下文而异，但在ECMAScript 5引入的“严格模式”（`use strict`）下，`this`的行为变得更加规范和严格，避免了一些可能导致错误的隐式行为。接下来，我们将详细探讨在严格模式下`this`的几种常见指向。 1. **全局作用域中的`this`** 在严格模式下，`this`不再默认指向全局对象（在浏览器环境中通常是`window`对象）。相反，`this`在全局作用域中被赋值为`undefined`，这有助于减少意外修改全局变量的可能性。 ```javascript "use strict"; console.log(this === undefined); // true ``` 2. **全局作用域中函数中的`this`** 在非严格模式下，函数中的`this`通常指向调用该函数的对象，但在严格模式下，如果函数被直接调用，`this`将被设置为`undefined`，而不是全局对象。 ```javascript "use strict"; function f() { console.log(this === undefined); // true } f(); ``` 3. **对象的函数（方法）中的`this`** 在严格模式下，当函数作为对象的一个属性（即方法）被调用时，`this`仍然指向调用该方法的对象。 ```javascript "use strict"; let obj = { prop: 'obj', method() { console.log(this.prop); // 'obj' } }; obj.method(); ``` 4. **构造函数的`this`** 在构造函数中，无论是否处于严格模式，`this`总是指向新创建的对象实例。这意味着在严格模式下，构造函数中的`this`仍然可以用于初始化新对象的属性。 ```javascript "use strict"; function Constructor() { this.value = 'constructor'; } let instance = new Constructor(); console.log(instance.value); // 'constructor' ``` 5. **事件处理函数中的`this`** 在严格模式下，事件处理函数中的`this`指向触发事件的DOM元素，这与非严格模式的行为一致。 ```javascript "use strict"; document.getElementById('myElement').addEventListener('click', function() { console.log(this === document.getElementById('myElement')); // true }); ``` 6. **内联事件处理函数中的`this`** 内联事件处理函数的行为在严格模式下有所不同。在第一种情况下，内联事件处理函数中的`this`会根据函数的定义方式进行处理，如果在严格模式下定义，`this`将为`undefined`。而在第二种情况中，`this`将根据事件处理程序所在的上下文（即HTML元素）进行设置。 ```html <!-- 严格模式下的内联事件 --> <button onclick="console.log(this.tagName)">Button</button> ``` 严格模式对`this`的处理更加严格，使得开发者能够更好地预测和控制代码的执行。这有助于减少潜在的错误，并鼓励编写更清晰、更安全的JavaScript代码。为了更好地理解`this`，建议阅读MDN文档和其他权威资源，如《JavaScript高级程序设计》等书籍，以及在线教程和文章。