探索this关键字的奥秘：理解绑定规则

引言

在 JavaScript 中，this 是一个非常重要的关键字，它在函数内部使用，用于引用当前执行上下文中的对象。理解 this 的行为对于编写高质量的 JavaScript 代码至关重要。本文将通过解释 this 的绑定规则和示例来帮助读者更好地理解。

this 的基本概念

在 JavaScript 中，this 关键字的值是在函数被调用时确定的，而不是在函数被定义时确定的。它的值取决于函数的调用方式。简单来说，this 引用的是当前执行上下文中的对象。

this的绑定规则

默认绑定

当一个函数独立调用时，即没有通过对象或上下文来调用时，this 默认绑定到全局对象（在浏览器环境中是 window 对象，Node.js 环境中是 global 对象）。

var b = 1
function foo() {
    function bar() {
        var b = 2
        baz()
    }

    function baz() {
        console.log(this.b); // 指向全局词法作用域
    }
    bar()
}
foo()

在这段代码中，函数baz是在全局作用域中定义的，因此它的this指向全局对象。尽管baz函数被bar函数调用，但它的this值并不会受到调用者的影响，仍然指向全局对象。

隐式绑定

当一个函数作为对象的方法调用时，this 绑定到调用该方法的对象。

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo, // 函数的引用 
    // foo: foo() // 函数的调用
}
obj.foo()

在这段代码中，因为foo作为obj对象的方法调用，this绑定到obj对象，obj对象的a属性值为2

显式绑定

通过call、apply或bind方法，可以显式地指定函数执行时的this绑定对象。

function foo(n, m) {
    console.log(this.a, n, m);
}
var obj1 = {
    a: 2
}
var obj2 = {
    a: 3
}
foo.call(obj1, 100, 200)
foo.apply(obj2, [100, 200]) // apply 要用数组类型接收
var bind = foo.bind(obj1, 100, 200) // bind 返回一个函数体，执行需调用这个函数
bind()

使用call方法显式绑定函数foo的this到obj1对象，并传入参数100和200。 使用apply方法显式绑定函数foo的this到obj2对象，并传入参数数组[100, 200]。 使用bind方法创建一个新函数bind，将函数foo的this绑定到obj1对象，并传入参数100和200。

new绑定

当使用new关键字调用构造函数创建新对象时，this会绑定到新创建的对象。

function Foo(a) {
  this.a = a;
}
var obj = new Foo(2);
console.log(obj.a);

在这段代码中，我们使用new关键字调用构造函数Foo，并传入参数2。这将创建一个新的对象obj，使用this关键字来引用新创建的对象，并将参数a赋值给新对象的属性a

箭头函数绑定

箭头函数的this绑定是词法上的，即绑定到定义时所在的上下文，而不是调用时的上下文。

var a = 1
var bar = () => {
    console.log(this.a);  // this 指向window
}
bar()

在这个例子中，箭头函数bar继承了全局作用域的this，即window对象。所以this.a指向的是全局作用域中的变量a，其值为1。

总结

this关键字在JavaScript中具有多种绑定规则，包括默认绑定、隐式绑定、显式绑定、new绑定和箭头函数绑定。理解这些规则并正确地使用this可以帮助我们编写更灵加活和可维护的JavaScript代码。通过深入学习和实践，我们可以更好地掌握this的使用，提高代码的可读性和可维护性。

感谢您的阅读，点赞关注作者精彩继续