js中的有哪些“this”指向值得了解

发布时间：2021-06-15 14:50:08 作者：chen
来源：亿速云阅读：153

# JS中的有哪些"this"指向值得了解

## 引言

在JavaScript中，`this`关键字可能是最令人困惑但又最重要的概念之一。它的指向会根据不同的执行上下文动态变化，理解`this`的指向规则对于编写健壮的JavaScript代码至关重要。本文将深入剖析JavaScript中`this`的各种指向情况，帮助开发者彻底掌握这一核心概念。

## 一、全局上下文中的this

### 1.1 浏览器环境
```javascript
console.log(this); // Window对象

在浏览器全局执行上下文中，this指向全局对象window。所有在全局作用域中声明的变量和函数都会成为window对象的属性。

1.2 Node.js环境

console.log(this); // {}

在Node.js模块中，全局this指向一个空对象{}，与浏览器环境不同。这是因为Node.js的模块系统会为每个文件创建一个独立的作用域。

1.3 严格模式的影响

'use strict';
function test() {
  console.log(this); // undefined
}
test();

在严格模式下，函数调用的this不再指向全局对象，而是undefined，这有助于避免意外的全局变量污染。

二、函数调用中的this

2.1 普通函数调用

function showThis() {
  console.log(this);
}
showThis(); // Window(非严格模式) / undefined(严格模式)

普通函数调用时，this的指向取决于是否严格模式。这是最常见的this绑定规则。

2.2 方法调用

const obj = {
  name: 'Example',
  logThis() {
    console.log(this);
  }
};
obj.logThis(); // obj对象

当函数作为对象方法调用时，this指向调用该方法的对象。这是JavaScript中this最直观的用法之一。

2.3 构造函数调用

function Person(name) {
  this.name = name;
}
const p = new Person('Alice');
console.log(p.name); // "Alice"

使用new操作符调用构造函数时，this指向新创建的实例对象。构造函数中的this会被绑定到新对象上。

三、显式绑定this的方法

3.1 call方法

function greet() {
  console.log(`Hello, ${this.name}`);
}

const person = { name: 'Bob' };
greet.call(person); // "Hello, Bob"

call()方法允许你显式设置this值并立即调用函数。第一个参数是this值，后续参数是函数参数。

3.2 apply方法

function introduce(age, job) {
  console.log(`${this.name}, ${age}, ${job}`);
}

const user = { name: 'Charlie' };
introduce.apply(user, [30, 'Developer']); // "Charlie, 30, Developer"

apply()与call()类似，但接受参数作为数组。这在需要动态传递参数时特别有用。

3.3 bind方法

const car = {
  brand: 'Toyota',
  getBrand: function() {
    return this.brand;
  }
};

const unboundGetBrand = car.getBrand;
console.log(unboundGetBrand()); // undefined

const boundGetBrand = unboundGetBrand.bind(car);
console.log(boundGetBrand()); // "Toyota"

bind()创建一个新函数，其this值永久绑定到指定对象。这在回调函数和事件处理中特别有用。

四、特殊场景下的this

4.1 箭头函数中的this

const obj = {
  name: 'Arrow',
  regularFunc: function() {
    console.log(this.name); // "Arrow"
  },
  arrowFunc: () => {
    console.log(this.name); // undefined(或外部this值)
  }
};
obj.regularFunc();
obj.arrowFunc();

箭头函数没有自己的this，它继承自外层函数作用域的this值。这一特性使得箭头函数在回调中特别有用。

4.2 事件处理函数中的this

button.addEventListener('click', function() {
  console.log(this); // 触发事件的DOM元素
});

在DOM事件处理函数中，this通常指向触发事件的元素。但要注意箭头函数会改变这一行为。

4.3 定时器中的this

const obj = {
  value: 10,
  start: function() {
    setTimeout(function() {
      console.log(this.value); // undefined(非严格模式是Window)
    }, 100);
    
    setTimeout(() => {
      console.log(this.value); // 10
    }, 100);
  }
};
obj.start();

在定时器回调中，普通函数的this通常指向全局对象，而箭头函数会保留外层this。

五、类中的this

5.1 类方法中的this

class Counter {
  constructor() {
    this.count = 0;
  }
  
  increment() {
    this.count++;
    console.log(this.count);
  }
}

const counter = new Counter();
const increment = counter.increment;
increment(); // TypeError: Cannot read property 'count' of undefined

类方法中的this指向实例对象，但要注意方法单独调用时会丢失this绑定。

5.2 类中的箭头函数方法

class Logger {
  constructor() {
    this.log = message => {
      console.log(message);
      console.log(this);
    };
  }
}

const logger = new Logger();
const log = logger.log;
log('Test'); // 正确打印this值

使用箭头函数定义类方法可以确保this始终指向实例，但这种方法会为每个实例创建独立的函数副本。

六、this绑定的优先级

JavaScript中this绑定的优先级从高到低如下：

new绑定：new Foo()
显式绑定：call/apply/bind
隐式绑定：obj.foo()
默认绑定：直接调用foo()

理解这些优先级可以帮助开发者预测代码中this的实际指向。

七、常见误区与最佳实践

7.1 丢失this绑定

const obj = {
  name: 'Test',
  getName() {
    return this.name;
  }
};

const getName = obj.getName;
console.log(getName()); // undefined

解决方法：使用bind()或箭头函数保留this绑定。

7.2 多层嵌套中的this

const obj = {
  name: 'Outer',
  inner: {
    name: 'Inner',
    logName() {
      console.log(this.name);
    }
  }
};

obj.inner.logName(); // "Inner"

注意嵌套对象方法中的this指向最近的对象，而不是外层对象。

7.3 最佳实践建议

在构造函数和方法中使用普通函数
在回调函数和需要保留this的场景使用箭头函数
避免混合使用箭头函数和普通函数作为方法
使用TypeScript等工具帮助检查this类型

八、高级应用场景

8.1 函数柯里化中的this

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);
console.log(double(5)); // 10

bind()不仅可以绑定this，还可以实现参数的部分应用（柯里化）。

8.2 链式调用中的this

const calculator = {
  value: 0,
  add(num) {
    this.value += num;
    return this;
  },
  subtract(num) {
    this.value -= num;
    return this;
  }
};

calculator.add(5).subtract(2);
console.log(calculator.value); // 3

通过返回this可以实现方法的链式调用，这在许多库（如jQuery）中很常见。

8.3 Proxy中的this

const target = {
  name: 'Proxy',
  logThis() {
    console.log(this);
  }
};

const handler = {
  get(target, prop) {
    if (prop === 'logThis') {
      return target[prop].bind(target);
    }
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);
proxy.logThis(); // target对象

使用Proxy时可以控制this的绑定行为，实现更灵活的对象操作。

结语

JavaScript中的this机制看似复杂，但只要掌握了其核心规则，就能在各种场景下准确预测其行为。理解this不仅有助于避免常见错误，还能让你写出更优雅、更灵活的代码。建议开发者通过实际编码练习来巩固这些概念，并在复杂场景中合理使用bind、箭头函数等工具来控制this绑定。

记住：this的指向是在函数调用时确定的，而不是在定义时。掌握这一原则，你就已经理解了this机制的核心。 “`