JavaScripts 箭头函数和普通函数 this 区分

张开发
• 2026/4/22 11:59:00 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

JavaScripts 箭头函数和普通函数 this 区分
需要精确地理解“谁调用”这三个字。函数类型this指向规则你的例子中的情况普通函数动态绑定取决于执行时的直接调用方式。setTimeout的回调是独立执行的所以this指向window。箭头函数词法绑定取决于定义时的外层作用域。箭头函数在sayHiArrow内部定义继承了sayHiArrow的this即obj。核心关键区分“调用者”和“定义者”对于普通函数this的指向确实遵循“谁调用指向谁”的原则。但这个“调用者”指的是函数执行那一刻的直接调用者而不是它“属于”哪个对象。让我们再仔细看看示例代码的执行过程const obj { name: 前端小助手, sayHiTraditional: function() { // 1. 这个 setTimeout 函数是被谁调用的是 window 对象或全局环境 // 2. setTimeout 的第一个参数是一个回调函数它会在稍后被执行 // 3. 当这个回调函数被执行时它是以一个“独立函数”的身份被调用的而不是 obj.sayHiTraditional() setTimeout(function() { console.log(this.name); // ❌ 输出 undefined }, 1000); } }; obj.sayHiTraditional();关键点在于setTimeout内部的回调函数obj.sayHiTraditional()被调用这一步没问题sayHiTraditional函数体内的this确实指向obj。setTimeout开始执行setTimeout是一个全局函数window.setTimeout。它接收了一个匿名函数作为参数。回调函数被执行1秒后setTimeout会去执行你传给它的这个匿名函数。请注意这个匿名函数是作为一个独立的、普通的函数被调用的就像fn()这样而不是作为obj的方法obj.fn()被调用。this的指向因为这个匿名回调函数是独立调用的所以它的this就指向了全局对象在浏览器中是window。window对象上通常没有name属性所以this.name的结果是undefined。简单来说虽然setTimeout是在obj.sayHiTraditional内部被调用的但它内部的那个回调函数它的“直接调用者”是setTimeout而setTimeout把它当作一个独立的函数来执行切断了它和obj的联系。为什么箭头函数可以箭头函数不关心“谁调用它”它只关心“在哪里定义”。箭头函数在sayHiArrow函数内部定义。sayHiArrow是被obj调用的所以sayHiArrow函数体内的this指向obj。箭头函数会“捕获”它定义时所在位置的this值也就是obj。因此无论这个箭头函数以后被谁调用哪怕是被window调用它的this永远都是它定义时捕获的那个obj。

更多文章