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

屏幕截图 2025-01-01 123709.png

#### 别担心，这些困惑即将烟消云散。本文将带你一步步了解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。

屏幕截图 2025-01-01 124004.png

在隐式绑定与显式绑定的优先级对比中，显式绑定占据上风。以下代码片段可清晰验证这一结论： 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 绑定优先级更高。以下示例可直观呈现这一关系： 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 绑定错误而引发的各类问题，提升代码的健壮性与可靠性。

屏幕截图 2025-01-01 124104.png

###

看到这就给作者点个赞吧\~\~\~\~