箭头函数中调用常规函数，常规函数中有this，这个this 指向哪里

提示信息

箭头函数中调用常规函数，常规函数中有this，这个this 指向哪里

小虫虫

01月22日发表在图文创作、问答社区 / My Coding Q&A Community 阅读 274 评论 20 | 免费使用 “AI大模型GPT4.0” 提问

在 JavaScript 中，this 的指向取决于函数是如何被调用的。当你在箭头函数内部调用普通函数时，这个 this 并不会指向箭头函数，而是取决于那个普通函数是如何被调用的。

例如，考虑下面的情况：

let obj = {  
  name: 'myObject',  
  regularFunction: function() {  
    console.log(this.name);  
  },  
  arrowFunction: () => {  
    this.regularFunction();  
  }  
}  
obj.arrowFunction(); // 如果你尝试这样做，将得到一个 TypeError

在这种情况下，当你在 arrowFunction 内部尝试执行 this.regularFunction() 时，this 实际上并没有被绑定到 obj，因为箭头函数没有自己的 this，它从包含它的环境中获取 this。由于箭头函数的 this 绑定无法更改，因此 this.regularFunction() 在 arrowFunction 内部运行时可能导致错误（取决于 this 在 arrowFunction 被创建时的环境）。

要解决这个问题，常见的方式是通过 .bind(obj) 方法明确地将 this 绑定到预期的对象上：

let obj = {  
  name: 'myObject',  
  regularFunction: function() {  
    console.log(this.name);  
  },  
  arrowFunction: () => {  
    let boundFunction = this.regularFunction.bind(this);  
    boundFunction();  
  }  
}  
obj.arrowFunction(); // 这将正确打印出 'myObject'

在这个修正后的例子中，this.regularFunction.bind(this) 明确地将 this 绑定到外部的 obj 上，因此无论 boundFunction() 在哪里被调用，this 总是指向 obj。

遇到难题？ "AI大模型GPT4.0、GPT" 是你的私人解答专家！点击按钮去提问......

小虫虫赞 | 0

最近一次登录：2024-11-20 03:17:03

暂时还没有签名，请关注我或评论我的文章

20条评论

按时间正序按时间倒序按喜欢排序

重新来过

01月31日

运用 bind 是解决 this 指向问题的好方法，灵活应用可以避免很多错误。

赞 0 回复举报

花开： @重新来过

使用 bind 确实是处理 this 指向的一种有效方法，能够确保函数调用时的上下文是准确的。除了 bind，也可以考虑使用箭头函数，因为它们会捕获其包含上下文的 this 值，这在某些情况下会更简单和清晰。

例如，下面的代码展示了如何使用 bind 以及箭头函数来解决 this 指向的问题：

function RegularFunction() {
    this.value = 42;
    setTimeout(function() {
        console.log(this.value); // undefined
    }, 1000);

    setTimeout(() => {
        console.log(this.value); // 42
    }, 1000);
}

new RegularFunction();

在第一种情况，调用 setTimeout 的常规函数中的 this 指向全局对象（在浏览器中是 window），因此无法访问到 RegularFunction 的实例属性 value。而使用箭头函数时，this 会保持指向 RegularFunction 实例，能够直接访问到 value。

另外，建议参考 MDN 的 this 指向文档来更深入地理解 this 的行为和使用场景，会对掌握 JavaScript 的 this 指向有很大的帮助。此类知识能极大提升我们在复杂代码中的调试和维护能力。

11月19日回复举报

添加新评论

心奴

02月06日

文章讲解了箭头函数的特性，清楚地指出了常规函数内 this 的指向问题，这是使用 JavaScript 中常见的坑。

赞 0 回复举报

韦瑞风： @心奴

在 JavaScript 中，箭头函数与常规函数的 this 指向问题的确容易让人产生困惑。箭头函数不会创建自己的 this，而是从外部上下文中继承 this。因此，在常规函数中使用 this 时，具体的指向取决于调用方式。

举个例子：

const obj = {
  value: 10,
  regularFunction: function() {
    console.log(this.value); // 10
  },
  arrowFunction: () => {
    console.log(this.value); // undefined 或者外部上下文的值
  }
};

obj.regularFunction(); // 输出 10
obj.arrowFunction();   // 输出 undefined

在这个例子中，常规函数 regularFunction 的 this 指向 obj，而箭头函数 arrowFunction 的 this 则可能指向全局对象或其他外部上下文，具体取决于它被声明的位置。

理解 this 的指向对于编写清晰的代码非常重要。若想深入了解，可以参考 MDN 的文章 Function.prototype.bind()。这样可以更好地掌握固定 this 的方法，避免潜在的陷阱。

11月16日回复举报

添加新评论

尘封

02月17日

建议再增加一个箭头函数和常规函数混合使用的综合实例，这样理解会更深刻。

赞 0 回复举报

崔元晖： @尘封

在讨论箭头函数和常规函数的混用时，确实引入一个综合示例会更容易掌握 this 的指向问题。简单的理解是，箭头函数不会改变 this 的指向，它总是捕获调用它的外部上下文的 this。

以下是一个结合箭头函数和常规函数的示例：

class Person {
    constructor(name) {
        this.name = name;
    }

    regularFunction() {
        console.log("Regular function this.name:", this.name);
    }

    arrowFunction = () => {
        console.log("Arrow function this.name:", this.name);
    }

    testFunctions() {
        this.regularFunction(); // 输出: Regular function this.name: undefined (因常规函数中的this指向 window)
        this.arrowFunction();    // 输出: Arrow function this.name: John (这里的this指向 Person实例)
    }
}

const john = new Person("John");
john.testFunctions();

在上述代码中，regularFunction 中的 this 指向了全局对象（如果在浏览器中运行为 window），而 arrowFunction 则正确地指向了 Person 实例，确保了 this.name 能够正常获取到名字。可以考虑查阅 MDN关于箭头函数的资料，从中了解更多细节。

11月21日回复举报

添加新评论

披着狼皮的羊

02月25日

通过 bind 绑定 this 是一种优雅的解决方案，新手需要熟悉这种方式，了解它的局限和适用场景。

赞 0 回复举报

一人留： @披着狼皮的羊

在使用箭头函数时，this的行为确实会与常规函数有所不同，绑定this的方法有很多，其中bind是非常有效的。

例如，我们可以通过bind来固定this指向特定的对象：

const obj = {
    name: 'My Object',
    regularFunction: function() {
        console.log(this.name);
    },
    arrowFunction: () => {
        console.log(this.name); // 此时指向外层作用域的this
    }
};

const regularBound = obj.regularFunction.bind(obj);
regularBound(); // 输出: My Object

const arrowBound = obj.arrowFunction.bind(obj);
arrowBound(); // 输出: undefined，因为箭头函数没有自己的this

可见，常规函数与箭头函数在this的指向上行为大相径庭，理解这点对处理回调函数时十分重要。尤其在处理事件监听之类的场合，bind的使用可以保证代码的可读性和稳定性。

关于this的工作机制，MDN有相关的详细说明，可以参考链接：MDN关于this的定义。这种理解将有助于更好地掌握JavaScript的上下文执行逻辑。

11月11日回复举报

添加新评论

三角戏

03月06日

可以查看MDN上的箭头函数文档来加深对这类函数的理解。

赞 0 回复举报

念欲似毒い： @三角戏

关于箭头函数与常规函数中的 this 问题，可以深入探讨一下。箭头函数并不绑定自己的 this，而是继承外层函数的 this 值，这在处理回调函数时很有用。如下例所示：

function RegularFunction() {
    this.value = 42;

    setTimeout(function() {
        console.log(this.value); // undefined，因为this指向全局对象
    }, 1000);

    setTimeout(() => {
        console.log(this.value); // 42，箭头函数中的this指向RegularFunction
    }, 1000);
}

new RegularFunction();

在第一个 setTimeout 中，因为是常规函数，this 会指向全局对象或者是 undefined，取决于严格模式。而在第二个 setTimeout 中，箭头函数会捕获外部上下文的 this，所以能够正确输出 42。

想进一步理解这个区别，MDN 文档是一个极好的资源，除了箭头函数的页面外，其他相关内容，如 this ，也很有帮助。

11月12日回复举报

添加新评论

情绪失常

03月16日

示例代码准确地表现了 this 的作用域问题，推荐在开发中注意函数的调用方式，可能会影响 this 的指向。

赞 0 回复举报

未了情： @情绪失常

在讨论 this 的指向时，确实需要特别注意函数的调用方式。箭头函数不会创建自己的 this，而是会从外层函数中捕获一个 this 值，因此在使用时常常会导致一些意想不到的结果。

例如，考虑以下代码：

const obj = {
  value: 42,
  regularFunction: function() {
    console.log('Regular Function:', this.value);
  },
  arrowFunction: () => {
    console.log('Arrow Function:', this.value);
  },
};

obj.regularFunction(); // 输出 42
obj.arrowFunction();   // 输出 undefined, 因为箭头函数的 this 指向外部上下文

在 regularFunction 中，this 指向 obj，而在 arrowFunction 中，this 指向了全局上下文（在浏览器中就是 window），这很容易导致误解。

在开发中，多加留意函数的绑定方式可以避免不必要的 bug。可以考虑使用 Function.prototype.bind 来绑定 this，使得其指向更加明确。例如：

const boundFunction = obj.regularFunction.bind(obj);
boundFunction(); // 仍会输出 42

如果对 this 有更深入的理解，建议参考 MDN - this 的相关文档，提供了很好的讲解和示例。

11月13日回复举报

添加新评论

如若ゐ

03月24日

关于 this 的问题，如果使用 ES6 class，可以考虑使用类的实例方法来避免复杂的绑定需求。

赞 0 回复举报

星珊： @如若ゐ

在使用 ES6 class 时，确实可以通过类的实例方法来更好地管理 this 的指向问题，这样可以避免一些额外的绑定。可以通过将方法定义为箭头函数来确保 this 始终指向实例：

class MyClass {
    constructor() {
        this.name = 'MyClass';
    }

    // 实例方法，this 自动绑定到类实例
    regularMethod() {
        console.log(this.name);
    }

    // 箭头函数，this 始终指向类实例
    arrowMethod = () => {
        console.log(this.name);
    }
}

const myInstance = new MyClass();
myInstance.regularMethod(); // 输出: MyClass
myInstance.arrowMethod();   // 输出: MyClass

这样，无论是在事件回调，还是在其他上下文中，都能保证 this 指向类实例。关于 this 的指向，建议可以参考 MDN 上的 this 概念，以便更全面地理解其在不同上下文下的行为。

11月10日回复举报

添加新评论

韦诗雨

03月28日

对于新手来说，this 的指向是个容易混淆的点，多写、多实践能帮助加深理解。

赞 0 回复举报

韦议： @韦诗雨

当谈到 this 的指向时，确实有很多细节需要注意。不同上下文中的 this 可以指向不同的对象，这使得新手在使用普通函数时常常感到困惑。比如，当在箭头函数中调用一个常规函数时，常规函数内的 this 是根据调用上下文决定的，而不是箭头函数的上下文。

下面是一个简单的例子来说明这一点：

const obj = {
  value: 42,
  regularFunc: function() {
    console.log(this.value);
  },
  arrowFunc: () => {
    this.regularFunc();  // this 指向全局 (或 undefined)，而不是 obj
  }
};

obj.arrowFunc();  // 输出 undefined

在这个例子中，arrowFunc 中调用的 regularFunc 的 this 指向全局对象（或 undefined），而不是 obj。为了避免这种情况，可以考虑使用 .bind() 来显式地绑定 this：

const obj = {
  value: 42,
  regularFunc: function() {
    console.log(this.value);
  },
  arrowFunc: function() {
    this.regularFunc.bind(this)();  // this 现在是 obj
  }
};

obj.arrowFunc();  // 输出 42

这个细节值得注意，尤其是在处理类和对象时。建议进一步查阅 MDN 关于 this 的文档，能够加深对 this 的理解。多练习不同场景下 this 的用法，也能帮助我们更好地掌握这一概念。

11月21日回复举报

添加新评论

两块

04月08日

bind 方法很有效，但是在大型项目中需要小心管理 this 的绑定关系，以免混乱。

赞 0 回复举报

板凳： @两块

在管理 this 的绑定时，确实需要谨慎。尤其是在大型项目中，可能会导致难以追踪的错误。除了使用 bind 方法外，还可以考虑使用箭头函数，因为箭头函数不会创建自己的 this 上下文，而是继承外部函数的 this。这在某些场景中非常有用，例如：

class MyClass {
  constructor() {
    this.name = 'MyClass';
  }

  regularFunction() {
    console.log(this.name);
  }

  arrowFunction = () => {
    console.log(this.name);
  }
}

const instance = new MyClass();
setTimeout(instance.regularFunction, 1000); // this 指向 undefined
setTimeout(instance.arrowFunction, 1000); // this 指向 MyClass 实例

可以看到，在常规函数的情况下，this 失去了上下文，而箭头函数保留了 this 指向的稳定性。使用箭头函数可以简化很多情况下的 this 管理。

此外，对于需要多次传递 this 的场景，可以考虑使用类属性的箭头函数或者将函数绑定到一个变量上。例如：

const that = this;
setTimeout(function() {
  console.log(that.name);
}, 1000);

这样的方式也能有效避免 this 的混乱。在开发中，时常审视 this 的指向，配合使用箭头函数与常规函数的优缺点，有助于提高代码的清晰度和可维护性。可以参考 MDN 关于 this 的说明，深入了解 this 的工作原理。

11月12日回复举报

添加新评论

浓爱

04月17日

可以结合 apply 和 call 方法一起学习 this 绑定的技巧，提高函数设计的灵活性。

赞 0 回复举报

-▲　浅袖： @浓爱

对于this的相关知识，结合apply和call的方法确实很有帮助。通过这两种方法，可以灵活地控制this的指向，从而提高函数的通用性和复用性。值得一提的是，箭头函数并不会创建自己的this，它会捕获父级上下文中的this，这在某些情况下可能会导致一些意想不到的结果。

可以看一个示例：

const obj = {
  value: 42,
  regularFunction: function() {
    console.log(this.value);
  },
  arrowFunction: () => {
    console.log(this.value);
  }
};

obj.regularFunction(); // 输出: 42
obj.arrowFunction();   // 输出: undefined (由于箭头函数没有自己的this)

const newFunction = obj.regularFunction.bind(obj);
newFunction(); // 输出: 42

在以上示例中，常规函数regularFunction能够正确地访问到obj中的value，而箭头函数arrowFunction却无法，因为它的this指向了外部上下文。在这种情况下，如果需要在箭头函数内部调用常规函数，就可以使用apply或call方法来实现绑定this。

const callRegularFunction = function() {
  this.regularFunction();
};

callRegularFunction.call(obj); // 输出: 42

更多关于this的重要概念，可以参考 MDN 上的 this 关键字。希望大家能通过实践，深入理解这些函数的特性和应用场景。

11月16日回复举报

添加新评论

免费图表工具，画流程图、架构图

箭头函数中调用常规函数， 常规函数中有this， 这个this 指向哪里

举报评论

删除

删除后，将不可回复，确认要删除？

提示

复制代码，请先登录

箭头函数中调用常规函数，常规函数中有this，这个this 指向哪里