【JavaScript源代码】JavaScript中的this指向问题详解.docx

JavaScript中的this指向问题详解 　　相信我，只要记住本文的 7️⃣ 步口诀，就能彻底掌握 JS 中的 this 指向。　　先念口诀：箭头函数、new、bind、apply 和 call、欧比届点（obj.）、直接调用、不在函数里。　　按照口诀的顺序，只要满足前面某个场景，就可以确定 this 指向了。　　接下来按照口诀顺序对它们进行详解，文中示例代码都运行在 Chrome 的 Console 控制台中。　　文末有精心准备的练习题，用于检验学习成果，别忘了试试~　　箭头函数排在第一个是因为它的 this 不会被改变，所以只要当前函数是箭头函数，那么就不用再看其他规则了。　　箭头函数 JavaScript中的`this`指向问题是一个常见且重要的概念，对于理解和编写高效、无错误的JavaScript代码至关重要。`this`关键字在JavaScript中表示当前上下文的对象，它的指向不是固定的，而是根据函数调用方式的不同而变化。这里我们将按照7步口诀详解`this`的指向。 1. **箭头函数**： 箭头函数（`=>`）的`this`不会被改变，它总是捕获其定义所在的作用域中的`this`值。这意味着箭头函数没有自己的`this`，它会继承外层作用域的`this`。例如： ```javascript let obj = { name: 'Alice', sayName: () => console.log(this.name) // 使用箭头函数 }; obj.sayName(); // 输出 'Alice' ``` 2. **new**： 当使用`new`关键字创建新对象时，函数内部的`this`将指向这个新创建的对象。例如： ```javascript function Person(name) { this.name = name; } let person = new Person('Bob'); console.log(person.name); // 输出 'Bob' ``` 3. **bind**： `Function.prototype.bind`方法可以将函数的`this`绑定到指定的对象。一旦`this`被绑定，即使之后再怎么调用，`this`也不会改变。例如： ```javascript function sayHello() { console.log(this.name); } let person = { name: 'Alice' }; let boundSayHello = sayHello.bind(person); boundSayHello(); // 输出 'Alice' ``` 4. **apply() 和 call()**： 这两个方法允许你改变函数的`this`值，并传入参数。`apply()`接收一个数组作为参数，而`call()`接受逗号分隔的参数。它们都会立即执行函数。例如： ```javascript function sum(a, b) { return a + b; } let obj = { value1: 1, value2: 2 }; sum.call(obj, 3, 4); // `this`为 `obj`, 返回 7 ``` 5. **欧比届点（obj.）**： 当函数是对象的一个属性并被该对象调用时，`this`将指向该对象。例如： ```javascript let obj = { value: 10, addValue: function(value) { console.log(this.value + value); } }; obj.addValue(5); // 输出 15 ``` 6. **直接调用**： 如果函数不通过以上任何方式调用，而是作为普通函数调用，`this`将指向全局对象（在浏览器中是`window`，在Node.js中是`global`）。例如： ```javascript function sayHello() { console.log(this); } sayHello(); // 输出 'Window' ``` 7. **不在函数里**： 如果函数不在任何作用域中（如全局环境下的`<script>`标签或者Node.js模块），`this`将指向全局对象。 在严格模式下，如果`this`尝试指向`undefined`或`null`，它将保持`undefined`，而不是自动转换为全局对象。理解这7个规则，并结合实际情况灵活运用，可以帮助你准确地判断`this`的指向，避免因`this`引发的常见错误。记得通过实践和练习来巩固这些知识，以便在实际开发中得心应手。