深入理解JavaScript中的this机制 - 解析《You Don't Know JS: this & Object Prototypes》

深入理解JavaScript中的this机制 - 解析《You Don't Know JS: this & Object Prototypes》

you-dont-know-js-ru :books: Russian translation of "You Don't Know JS" book series 项目地址: https://gitcode.com/gh_mirrors/yo/you-dont-know-js-ru

前言：为什么this如此重要又令人困惑？

在JavaScript中，this关键字可能是最容易被误解的概念之一。它看起来简单，但实际行为却常常出人意料。本文将基于《You Don't Know JS》系列中关于this的深入解析，带你彻底理解这个关键机制。

this的本质与常见误解

this不是指向函数自身

许多开发者错误地认为this指向函数本身。让我们看一个典型的计数场景：

function foo(num) {
    console.log("foo: " + num);
    this.count++;  // 你以为这里是在增加foo.count吗？
}

foo.count = 0;

for(let i=0; i<10; i++) {
    if(i > 5) foo(i);
}

console.log(foo.count); // 输出0，不是预期的4！

这里发生了什么？实际上，this.count++无意中创建了一个全局变量count（值为NaN），而不是修改foo.count。要正确引用函数自身，应该直接使用函数名foo.count++。

this不是指向函数作用域

另一个常见误解是认为this可以访问函数的作用域：

function foo() {
    var a = 2;
    this.bar();  // 这种写法本身就是错误的
}

function bar() {
    console.log(this.a);  // undefined
}

foo();

这段代码存在多个问题：

1. 错误地使用this.bar()调用函数
2. 错误地认为this可以访问foo()的作用域变量

this的真正工作原理

this的绑定与函数声明无关，而是完全取决于函数被调用的方式。每次函数调用时，JavaScript引擎会创建一个执行上下文（activation record），其中包含调用栈、调用方式等信息，this就是这个上下文的一个属性。

四种绑定规则

理解this的关键在于掌握四种绑定规则：

1. 默认绑定：独立函数调用时，this指向全局对象（非严格模式）或undefined（严格模式）

   function foo() {
       console.log(this);  // 浏览器中指向window
   }
   foo();
   

2. 隐式绑定：作为对象方法调用时，this指向调用对象

   var obj = {
       name: "Kyle",
       foo: function() {
           console.log(this.name);
       }
   };
   obj.foo();  // 输出"Kyle"
   

3. 显式绑定：使用call/apply/bind强制指定this

   function foo() {
       console.log(this.name);
   }
   
   var obj = { name: "Kyle" };
   foo.call(obj);  // 输出"Kyle"
   

4. new绑定：构造函数调用时，this指向新创建的对象

   function Person(name) {
       this.name = name;
   }
   
   var kyle = new Person("Kyle");
   console.log(kyle.name);  // 输出"Kyle"
   

为什么需要this机制？

通过一个例子来理解this的价值：

function identify() {
    return this.name.toUpperCase();
}

var me = { name: "Kyle" };
var you = { name: "Reader" };

identify.call(me);  // KYLE
identify.call(you); // READER

如果不使用this，我们需要显式传递上下文对象：

function identify(context) {
    return context.name.toUpperCase();
}

this提供了一种更优雅的隐式传递上下文的方式，使API设计更简洁，代码更易于复用。

箭头函数的this

ES6引入的箭头函数不遵循上述四种规则，而是继承外层函数的this绑定：

function foo() {
    setTimeout(() => {
        console.log(this.a);  // 继承foo的this
    }, 100);
}

var obj = { a: 2 };
foo.call(obj);  // 输出2

总结

理解this需要记住几个关键点：

1. this不是编译时绑定，而是运行时绑定
2. 它取决于函数调用位置和调用方式
3. 四种绑定规则决定了this的值
4. 箭头函数是例外情况

掌握这些概念后，你将能够准确预测代码中this的行为，写出更可靠、更易维护的JavaScript代码。

you-dont-know-js-ru :books: Russian translation of "You Don't Know JS" book series 项目地址: https://gitcode.com/gh_mirrors/yo/you-dont-know-js-ru