← 返回目录

第 8 卷

第 8 / 19 卷日期:

• 适用场景:函数的普通调用(独立调用,无任何上下文对象),如全局环境中调用函数、函数作为

• 绑定规则: this 指向全局对象(浏览器: window;Node.js: global(模块顶层为

module.exports,函数内部仍为 global))。

• 特殊情况:严格模式( use strict)下,默认绑定的 this 为 undefined,而非全局对

象。

• 示例:

Code block

1function fn() { 2console.log(this);

3} 4fn(); // 浏览器:window;Node.js:global

5 6// 严格模式

7function fnStrict() { 8"use strict";

9console.log(this);

10} 11fnStrict(); // undefined

(2)隐式绑定(Implicit Binding)

• 适用场景:函数作为对象的方法被调用(函数挂载在某个对象上,通过对象.函数() 的方式调

用)。

  • 绑定规则: this 指向调用该方法的直接对象(即紧邻函数的那个对象,而非上层对象)。
  • 注意:若函数被赋值给其他变量,脱离了原对象的上下文,则会触发默认绑定。

• 示例:

Code block

1const obj = { 2name: "张三",

3fn: function() { 4console.log(this.name);

5} 6};

7obj.fn(); // 张三(this指向obj,隐式绑定)

15 16// 函数赋值后,脱离上下文,触发默认绑定

17const fn2 = obj.fn;

18fn2(); // 浏览器:undefined(window.name为空);Node.js:undefined

(3)显式绑定(Explicit Binding)

  • 适用场景:通过函数的内置方法,手动指定 this 的指向,强制绑定上下文。

• 核心方法:

1.func.call(thisArg, arg1, arg2, ...):立即调用函数,第一个参数为 this 指向的对象,后续参数为函数的实参。

2.func.apply(thisArg, [arg1, arg2, ...]):立即调用函数,第一个参数为 this 指向的对象,第二个参数为数组/类数组,作为函数的实参。

3.func.bind(thisArg, arg1, arg2, ...):返回一个新函数, this 永久绑定到 thisArg,后续调用新函数时, this 无法修改(优先级高于隐式绑定),支持参数柯里化。

• 绑定规则: this 指向手动指定的 thisArg(若 thisArg 为 null / undefined,则触发

默认绑定)。

• 示例:

Code block

1function fn(a, b) { 2console.log(this.name, a + b);

3} 4const obj = { name: "张三" };

5 6// call:立即调用,参数逐个传递

7fn.call(obj, 1, 2); // 张三 3(this指向obj)

8 9// apply:立即调用,参数以数组传递

10fn.apply(obj, [3, 4]); // 张三 7(this指向obj)

11 12// bind:返回新函数,this永久绑定

13const fnBind = fn.bind(obj, 5, 6);

14fnBind();//张三11(this始终指向obj)
15//即使通过对象方法调用,this仍为bind绑定的对象
16const obj2 = { name: "李四", fn: fnBind };
  • 适用场景:使用 new 关键字调用构造函数,创建实例对象。

• 绑定规则: this 指向新创建的实例对象(构造函数执行时, this 绑定到即将返回的实例

上)。

• new 关键字执行步骤:

  1. 创建一个空的新对象;
  2. 将新对象的 [[Prototype]] 指向构造函数的 prototype;
  3. 将构造函数的 this 绑定到该新对象;
  4. 执行构造函数内部代码(为新对象添加属性/方法);
  5. 若构造函数无显式返回值(或返回非对象类型),则返回该新对象;若返回对象类型,则返回该对

象, this 绑定失效。

• 示例:

Code block

1function Person(name) {

2this.name = name;// this指向新创建的实例
3console.log(this);
4}
5const p = new Person("张三");// Person { name: '张三' }(this指向p)
6console.log(p.name);//张三

(5)箭头函数继承绑定(Arrow Function Binding)

  • 适用场景:箭头函数( () => {})的调用,箭头函数无自身的 this。

• 绑定规则:箭头函数的 this 继承自其定义时的上层作用域的 this(即词法作用域的

this),而非调用时的上下文,且一旦确定,无法通过 call / apply / bind / new 修改。

• 特点:

  1. 无自身 this,无 arguments 对象;
  2. 不能作为构造函数(无法使用 new 调用);
  3. 适合作为回调函数(如定时器、Promise回调),避免 this 指向丢失的问题。

• 示例:

Code block

全站分卷索引 · 19 卷
  1. 1第 1 卷
  2. 2第 2 卷
  3. 3第 3 卷
  4. 4第 4 卷
  5. 5第 5 卷
  6. 6第 6 卷
  7. 7第 7 卷
  8. 8第 8 卷
  9. 9第 9 卷
  10. 10第 10 卷
  11. 11第 11 卷
  12. 12第 12 卷
  13. 13第 13 卷
  14. 14第 14 卷
  15. 15第 15 卷
  16. 16第 16 卷
  17. 17第 17 卷
  18. 18第 18 卷
  19. 19第 19 卷