09｜面向对象：通过词法作用域和调用点理解this绑定-JavaScript进阶实战

当前位置:　首页>> 技术小册>> JavaScript进阶实战

09 | 面向对象：通过词法作用域和调用点理解`this`绑定

在JavaScript的编程旅程中，深入理解面向对象编程（OOP）的概念及其实现方式是迈向高级开发者行列的关键一步。而this关键字，作为JavaScript中最为复杂且强大的特性之一，其绑定机制直接关联到面向对象编程中对象的行为与状态管理。本章节将深入探讨如何通过词法作用域（Lexical Scoping）和调用点（Call Site）来准确理解this的绑定规则，从而在实战中灵活运用这些概念，编写出更加清晰、可维护的代码。

一、引言：为何需要理解`this`

在JavaScript中，this关键字的行为并不总是直观易懂的，尤其是在不同的函数调用上下文中。理解this的绑定规则对于编写可预测的代码至关重要，因为它决定了函数执行时上下文（即当前对象）的引用。掌握this，意味着你能更有效地控制对象的行为和状态，实现更加灵活的编程模式。

二、词法作用域与动态作用域

在深入探讨this绑定之前，有必要先区分两个作用域的概念：词法作用域（Lexical Scoping）和动态作用域（也称为运行时作用域，Dynamic Scoping）。JavaScript采用词法作用域，这意味着作用域是基于函数声明时的位置来静态确定的，与函数如何被调用无关。然而，this的值并不是由词法作用域决定的，而是由函数的调用方式决定的，这体现了JavaScript中的动态绑定特性。

三、`this`的四种绑定规则

为了全面理解this的绑定机制，我们需要掌握其四种基本的绑定规则：默认绑定、隐式绑定、显式绑定和new绑定。

1. 默认绑定

当函数作为非方法调用时（即不是作为某个对象的属性被调用），this默认绑定到全局对象（在严格模式下为undefined）。这是最基本的绑定规则，也是初学者最容易混淆的地方。

function foo() {
    console.log(this.a);
}
var a = 2;
foo(); // 输出: 2，因为foo在全局作用域中被调用，this指向全局对象
function bar() {
    "use strict";
    console.log(this.a);
}
bar(); // 抛出TypeError，因为严格模式下this为undefined，尝试访问undefined.a会抛出错误

2. 隐式绑定

当函数作为某个对象的属性被调用时，this会隐式地绑定到该对象上。这是实现对象方法最常见的方式。

var obj = {
    a: 2,
    foo: function() {
        console.log(this.a); // this指向obj
    }
};
obj.foo(); // 输出: 2

3. 显式绑定

在某些情况下，我们需要明确指定函数执行时的this值，这时可以使用call()、apply()或bind()方法来实现显式绑定。

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2
};
foo.call(obj); // 输出: 2，通过call显式绑定this到obj
var boundFoo = foo.bind(obj);
boundFoo(); // 输出: 2，bind返回一个新函数，其this永久绑定到obj

4. `new`绑定

使用new操作符调用函数时，会创建一个新对象，并将这个新对象绑定到函数调用的this上。同时，还会执行构造函数来初始化这个新对象。

function Foo(a) {
    this.a = a;
}
var bar = new Foo(2);
console.log(bar.a); // 输出: 2，Foo的this绑定到了新创建的对象上

四、理解调用点

this的绑定并不是在函数定义时确定的，而是在函数被调用时，根据调用点的上下文动态决定的。因此，要准确判断this的指向，必须关注函数的调用方式，即调用点。

嵌套函数中的this：嵌套函数中的this并不会继承外层函数的this值，而是根据它自己的调用点来确定。

function foo() {
    console.log(this.a);
    function bar() {
        console.log(this.a); // bar的this取决于其调用方式，而非foo的this
    }
    bar(); // 如果没有显式绑定，则bar的this默认为全局对象或undefined（严格模式）
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // foo的this指向obj，但bar的this不会继承这个绑定

箭头函数中的this：箭头函数不绑定自己的this，而是捕获其所在上下文的this值作为自己的this值。这意味着在箭头函数中，this指向的是定义它时所在的作用域中的this。

function foo() {
    setTimeout(() => {
        console.log(this.a); // 这里的this指向foo调用时的this，即obj
    }, 100);
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 输出: 2

五、实战应用与最佳实践

理解this的绑定规则后，我们需要在实战中灵活运用这些知识。以下是一些建议：

尽量避免在全局作用域中定义函数，以减少全局this的依赖。
在对象方法中谨慎使用嵌套函数，特别是当这些嵌套函数需要访问外部this时。考虑使用箭头函数或显式绑定来保持this的一致性。
利用bind、call和apply方法来实现this的显式绑定，提高代码的灵活性和可维护性。
在构造函数中使用new绑定，确保新创建的对象能正确初始化。
优先考虑使用ES6的类（Class）语法，它提供了一种更清晰、更直观的方式来定义对象和其方法，同时自动处理this的绑定。

六、总结

this在JavaScript中是一个复杂但强大的特性，它允许我们根据函数的调用点动态地改变函数的执行上下文。通过深入理解词法作用域与调用点的关系，以及this的四种绑定规则（默认绑定、隐式绑定、显式绑定和new绑定），我们可以编写出更加清晰、可预测和可维护的代码。在实战中，灵活运用这些概念，结合ES6的新特性，将帮助我们更高效地实现面向对象的编程模式。