你是否曾在编写代码时，被this的不确定性搞得焦头烂额？或者在调试时，发现this并没有指向你预期的对象而感到困惑？

别担心，这些困惑即将烟消云散。本文将带你一步步了解this的绑定规则，让你在编程时能够更加自信地控制this的指向，编写出更加优雅和高效的代码

掌握this的绑定规则，不仅仅是为了解决眼前的问题，更是为了提升我们对JavaScript这门语言深层次的理解。这就像是学会了一门新的语言，让我们能够与JavaScript更加自然地对话。

话不多说，开始今天的讲解

一、基础绑定规则回顾

在开启 this 绑定优先级的探索之旅前，需先稳固对基础绑定规则的认知。默认绑定作为最基础的规则，在无其他规则介入时发挥作用。在非严格模式下，独立函数调用会使 this 指向全局对象，例如：

function defaultBind() {
    console.log(this.a);
}
var a = 2;
defaultBind(); 

在此代码中，defaultBind 函数内的 this.a 成功访问到全局变量 a，输出 2，此即默认绑定的典型表现。而在严格模式下，同样的调用会使 this 绑定到 undefined，为代码执行增添了一层严谨性与安全性。

隐式绑定则在函数作为对象属性被调用时生效，将 this 与拥有该函数的对象紧密相连。如下所示：

function implicitBind() {
    console.log(this.a);
}
var obj = {
    a: 3,
    foo: implicitBind
};
obj.foo(); 

在 obj.foo() 执行时，implicitBind 函数内的 this 精准指向 obj，从而输出 obj.a 的值 3，体现了隐式绑定基于对象上下文的特性。

显式绑定借助 call、apply 与 bind 方法，赋予开发者手动指定 this 绑定对象的强大能力。例如：

function explicitBind() {
    console.log(this.a);
}
var target = {
    a: 4
};
explicitBind.call(target); 

通过 call 方法，explicitBind 函数的 this 被明确指向 target，最终输出 target.a 的值 4，凸显了显式绑定的精准控制优势。

new 绑定在函数通过 new 操作符调用时启动，创建全新对象并将其绑定至函数的 this，为对象实例化与初始化过程奠定基础。如：

function newBind(a) {
    this.a = a;
}
var instance = new newBind(5);
console.log(instance.a); 

在此，new 操作符构建新对象 instance，并将其作为 newBind 函数调用的 this，使得 instance.a 的值为 5，展现了 new 绑定在对象创建流程中的核心作用。

二、优先级

当函数调用位置可能适配多条绑定规则时，优先级体系便成为判定 this 绑定的关键准则。

默认绑定优先级在整个体系中处于最低层级，仅在其他规则均不适用的情况下才会被触发。这是因为其缺乏明确的上下文指向提示，是一种宽泛的兜底机制，确保在复杂代码环境中函数调用至少有一个默认的 this 指向，避免因未定义 this 而引发错误，但也正因如此，在实际开发中应尽量避免过度依赖默认绑定，以防出现意外的全局变量访问或难以追踪的 bug。

在隐式绑定与显式绑定的优先级对比中，显式绑定占据上风。以下代码片段可清晰验证这一结论：

function comparePriority() {
    console.log(this.a);
}
var obj1 = {
    a: 2,
    foo: comparePriority
};
var obj2 = {
    a: 3
};
obj1.foo(); 
obj1.foo.call(obj2); 

在 obj1.foo() 调用时，隐式绑定使 this 指向 obj1，输出 2；而 obj1.foo.call(obj2) 中，显式绑定通过 call 方法强行将 this 切换至 obj2，输出 3。这表明在存在显式绑定操作时，其会优先于隐式绑定决定 this 的指向，为开发者在复杂对象方法调用场景中提供了一种可靠的手动控制 this 指向的方式，确保函数能够准确访问预期对象的属性与方法。

对于 new 绑定与隐式绑定，new 绑定优先级更高。以下示例可直观呈现这一关系：

ini 代码解读复制代码

function newVsImplicit(a) {
    this.a = a;
}
var obj1 = {
    foo: newVsImplicit
};
var obj2 = {};
obj1.foo(2);
console.log(obj1.a);
var bar = new obj1.foo(4);
console.log(obj1.a);
console.log(bar.a); 

obj1.foo(2) 遵循隐式绑定规则，将 obj1.a 设置为 2；而 new obj1.foo(4) 则因 new 绑定创建新对象 bar，其 bar.a 值为 4，且 obj1.a 不受此次操作影响。这清晰地展示了在 new 绑定与隐式绑定冲突时，new 绑定会优先执行，确保新对象的正确创建与初始化，符合 JavaScript 中对象创建与实例化的核心语义。

在 new 绑定与显式绑定（以硬绑定为例）的优先级较量中，情况较为微妙。硬绑定通过 Function.prototype.bind 或自定义辅助函数实现，表面上似乎优先级高于 new 绑定，但实际并非绝对。例如：

function newVsHard(a) {
    this.a = a;
}
var obj1 = {};
var bar = newVsHard.bind(obj1);
bar(2);
console.log(obj1.a);
var baz = new bar(3);
console.log(obj1.a);
console.log(baz.a); 

尽管 bar 已被硬绑定到 obj1，但 new bar(3) 并未如预期改变 obj1.a，而是创建新对象 baz，其 baz.a 值为 3。这是因为 Function.prototype.bind 的内部实现机制在检测到函数通过 new 调用时，会巧妙地调整 this 绑定策略，允许 new 绑定覆盖硬绑定的 this 指向，确保在对象创建场景下 new 操作符的语义完整性，即始终创建新对象并正确初始化其属性。

三、实际应用场景中的优先级体现

在面向对象编程范式下，this 绑定优先级在类的实例化与方法调用过程中起着关键作用。例如：

class MyClass {
    constructor(a) {
        this.a = a;
    }
    myMethod() {
        console.log(this.a);
    }
}
var myObj = new MyClass(5);
myObj.myMethod(); 

在 new MyClass(5) 实例化过程中，new 绑定创建 myObj 并将其绑定到构造函数内的 this，完成属性初始化；后续 myObj.myMethod() 调用时，隐式绑定使 myMethod 函数内的 this 指向 myObj，成功输出 myObj.a 的值 5，整个流程严格遵循 this 绑定优先级规则，确保了类实例的正确构建与方法执行逻辑。

在事件驱动编程领域，如 DOM 事件处理中，this 绑定优先级同样不容忽视。通常情况下，事件处理函数内的 this 会自动绑定到触发事件的 DOM 元素，但在某些复杂场景下，开发者可能需要借助显式绑定调整 this 指向。例如：

var button = document.getElementById('myButton');
var dataObj = {
    data: 'Some data',
    handleClick: function () {
        console.log(this.data);
    }
};
button.addEventListener('click', function () {
    dataObj.handleClick.call(dataObj);
}); 

在此代码中，若直接将 dataObj.handleClick 作为事件处理函数添加，其内部 this 会指向 button，无法访问 dataObj 的数据。通过在事件回调函数内使用 call 方法显式绑定 this 到 dataObj，确保了在按钮点击事件触发时，handleClick 函数能够正确输出 dataObj 的数据，体现了在特定应用场景下开发者依据 this 绑定优先级规则灵活调整 this 指向的必要性。

四、应对优先级复杂性的思路

为有效应对 this 绑定优先级带来的复杂性，开发者可遵循一系列实用策略与最佳实践。

在代码编写过程中，应始终保持清晰的函数调用逻辑，避免出现复杂且难以理解的函数调用嵌套或间接调用，减少因 this 绑定规则交织而引发的错误。对于关键函数的调用，建议添加详细注释说明预期的 this 绑定对象与绑定方式，增强代码可读性与可维护性，便于后续开发者快速理解代码意图。

在使用 bind、call、apply 等显式绑定方法时，务必深入理解其工作原理与应用场景，尤其是在涉及到 new 操作符或复杂对象层次结构时，需谨慎处理 this 绑定变化。在开发可复用函数模块时，若采用硬绑定或部分应用技术，应充分测试不同调用方式下的 this 绑定情况，确保函数在各种场景下都能正确执行，避免因意外的 this 绑定问题导致模块功能异常。

五、总结

this 绑定优先级规则是 JavaScript 语言核心机制的重要组成部分，深刻影响着函数执行语义与代码逻辑架构。通过对其深入剖析与实践探索，开发者能够精准把握函数调用时 this 的指向，有效避免因 this 绑定错误而引发的各类问题，提升代码的健壮性与可靠性。

作者：加减法原则

链接：https://juejin.cn