请用代码举例说明js中的this指向问题
时间: 2024-02-25 08:53:56 浏览: 34
好的,下面是一些代码示例来说明 `this` 指向问题:
1. 作为函数调用时,`this` 指向全局对象 `window`(浏览器中)或 `global`(Node.js 环境中);
```javascript
function test() {
console.log(this);
}
test(); // 浏览器中输出 window,Node.js 环境中输出 global
```
2. 作为方法调用时,`this` 指向调用该方法的对象;
```javascript
const obj = {
name: 'Tom',
sayName() {
console.log(this.name);
}
}
obj.sayName(); // 输出 Tom
```
3. 使用 `call` 或 `apply` 方法调用函数时,可以显式指定 `this` 的指向;
```javascript
const obj1 = {
name: 'Tom'
}
const obj2 = {
name: 'Jerry'
}
function sayName() {
console.log(this.name);
}
sayName.call(obj1); // 输出 Tom
sayName.call(obj2); // 输出 Jerry
```
4. 作为构造函数调用时,`this` 指向新创建的对象;
```javascript
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = new Person('Tom', 20);
console.log(person.name); // 输出 Tom
console.log(person.age); // 输出 20
```
5. 箭头函数中的 `this` 指向在定义函数时所处的上下文。
```javascript
const obj = {
name: 'Tom',
sayName: () => {
console.log(this.name);
}
}
obj.sayName(); // 输出 undefined
```
需要注意的是,以上示例只是一些简单的例子,实际应用中还有很多复杂的情况需要考虑。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)