目录前言五条绑定规则1. 默认绑定独立调用2. 隐式绑定方法调用3. 显式绑定call / apply / bind4. new 绑定构造函数5. 箐头函数词法绑定优先级排序由高到低总结前言JavaScript 的this与 Java、Python 等语言不同它的值不是在函数定义时确定的而是在函数被调用时动态绑定的。可以把this理解为函数执行时的上下文对象——指向当前是谁在调用我。五条绑定规则1. 默认绑定独立调用当函数不是作为对象方法调用也不是通过new、call/apply/bind调用时functionshow(){console.log(this);}show();// 非严格模式: window; 严格模式: undefined非严格模式指向全局对象浏览器windowNodeglobal严格模式指向undefined2. 隐式绑定方法调用谁调用了函数this就指向谁——即点前面的对象。constobj{name:Alice,greet:function(){console.log(this.name);}};obj.greet();// Alicethis 指向 obj⚠️注意赋值给变量再调用会丢失 thisconstfnobj.greet;fn();// undefined独立调用this 指向 window3. 显式绑定call / apply / bind手动强制指定this指向functionintroduce(age){console.log(this.name 今年 age 岁);}constperson{name:Bob};introduce.call(person,18);// Bob 今年 18 岁introduce.apply(person,[18]);// Bob 今年 18 岁参数用数组constboundFnintroduce.bind(person,18);boundFn();// Bob 今年 18 岁bind 返回新函数方法参数形式返回值call逐个传递立即执行apply数组传递立即执行bind逐个传递返回新函数4. new 绑定构造函数使用new调用函数时JS 创建新对象this指向该对象functionCar(model){this.modelmodel;}constmyCarnewCar(Tesla);console.log(myCar.model);// Tesla5. 箐头函数词法绑定箭头函数没有自己的this它会捕获定义时所在作用域的this且call/apply/bind无法改变constobj{name:Eve,greet:function(){// 普通函数this 指向 windowsetTimeout(function(){console.log(this.name);// undefined},100);// 箭头函数this 继承自外层即 objsetTimeout((){console.log(this.name);// Eve},100);}};obj.greet();优先级排序由高到低优先级绑定类型1最高new绑定2显式绑定call/apply/bind3隐式绑定对象方法调用4最低默认绑定总结记住一句话除非使用箭头函数否则this永远指向调用它的那个对象如果不知道是谁调用的就指向全局严格模式下是undefined。掌握这条规则再结合call/apply/bind能强行改变指向就能解决绝大多数this问题。
