如何轻松处理JS中的'this'指向已经收录了，之前好评文章的分类比较多，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我喜欢在JS中更改函数执行上下文指向的内容，也称为this指向的内容。例如，我们可以在类数组对象上使用数组方法：constreduce=Array.prototype.reduce;functionsumArgs(){returnreduce.call(arguments,(sum,value)=>{returnsum+=value;});}sumArgs(1,2,3);//=>6另一方面，这很难掌握。我们经常发现我们使用的this是不正确的。下面向您展示如何简单地将它绑定到所需的值。在开始之前，我需要一个辅助函数execute(func)来简单地执行作为参数提供的函数。函数执行（函数）{返回函数（）；}执行（函数（）{返回10}）；//=>10现在，继续了解围绕this:方法分离的错误的本质。1.方法分离问题假设有一个类Person，它包含字段firstName和lastName。此外，它还有一个方法getFullName()可以返回此人的全名。像这样：functionPerson(firstName,lastName){this.firstName=firstName;this.lastName=lastName;this.getFullName=function(){这===代理；//=>truereturn`${this.firstName}${this.lastName}`;}}constagent=newPerson('前端','小智');agent.getFullName();//=>'FrontendXiaozhi'可以把Person函数看做一个构造函数Called:newPerson('Frontend','Xiaozhi').函数内部的this代表新创建的实例。getfullname()返回此人的全名：'FrontendXiaozhi'。正如预期的那样，getFullName()方法中的this等于agent。如果辅助函数执行agent.getFullName方法会发生什么：execute(agent.getFullName);//=>'undefinedundefined'执行结果不正确：'undefinedundefined'，这是this指向不正确导致的问题。现在在getFullName()方法中，this的值是全局对象（浏览器上下文中的window）。this等于window,${window.firstName}${window.lastName}执行结果是'undefinedundefined'。发生这种情况是因为在调用execute(agent.getFullName)时该方法与对象分离。基本上发生的只是一个常规函数调用（不是方法调用）：execute(agent.getFullName);//=>'undefinedundefined'//等同于：constgetFullNameSeparated=agent.getFullName;执行（getFullNameSeparated）；//=>'undefinedundefined'这就是所谓的方法从它的对象中分离出来，当方法被分离出来再执行时，this并没有连接到原来的对象上。为确保方法内部的this指向正确的对象，必须将方法作为属性访问器执行：agent.getFullName()或将this静态绑定到包含对象（使用箭头函数、.bind()方法等）方法分离问题，以及由此导致的this指向不正确，一般发生在以下几种情况：在设置事件处理程序时//React:`methodHandler()`中的`this`是全局对象Clickme然后引入一些有用的方法，即如果方法和Object分离一样，如何让this指向想要的对象。2.关闭上下文并保持this指向类实例的最简单方法是使用一个额外的变量self:functionPerson(firstName,lastName){this.firstName=firstName;this.lastName=lastName;常量自我=这个；this.getFullName=function(){self===agent;//=>truereturn`${self.firstName}${self.lastName}`;}}constagent=newPerson('前端','小智');agent.getFullName();//=>'前端小智'execute(agent.getFullName);//=>'前端小智'getFullName()静态关闭self变量，有效手动绑定this。现在，当调用execute(agent.getFullName)时，一切正常，因为getFullName()方法中的this始终指向正确的值。3.使用箭头函数有没有办法在没有额外变量的情况下静态绑定this？是的，这正是箭头函数所做的。使用箭头函数重构Person：functionPerson(firstName,lastName){this.firstName=firstName;this.lastName=lastName;this.getFullName=()=>`${this.firstName}${this.lastName}`;}constagent=newPerson('前端','小智');agent.getFullName();//=>'前端小智'execute(agent.getFullName);//=>'FrontendXiaozhi'箭头函数词法绑定this。简单来说，它使用定义它的外部函数的this值。建议在需要外部函数上下文的所有情况下使用箭头函数。4.绑定上下文现在让我们更进一步，使用ES6类重构Person。类人{构造函数（名字，姓氏）{this.firstName=firstName;this.lastName=lastName;}getFullName(){返回`${this.firstName}${this.lastName}`;}}constagent=newPerson('前端','小智');agent.getFullName();//=>'前端小智'execute(agent.getFullName);//=>'undefinedundefined'不幸的是，即使使用新的类语法，execute(agent.getFullName)仍然返回“undefinedundefined”。对于类，使用附加变量self或箭头函数来修复this指向的内容是行不通的。但是有一个涉及bind()方法的技巧，它将方法的上下文绑定到构造函数中：this.lastName=lastName;this.getFullName=this.getFullName.bind(this);}getFullName(){返回`${this.firstName}${this.lastName}`;}}constagent=newPerson('前端','小智');agent.getFullName();//=>'前端小智'execute(agent.getFullName);//=>this.getFullName=this.getFullName.bind(this)在'前端小智'的构造函数中绑定方法getFullName()分配给一个类实例。execute(agent.getFullName)按预期工作，返回“FrontendAsh”。5.粗箭头方法bind有点过于冗长，我们可以使用粗箭头方法：classPerson{constructor(firstName,lastName){this.firstName=firstName;this.lastName=lastName;}getFullName=()=>{return`${this.firstName}${this.lastName}`;}}constagent=newPerson('前端','小智');agent.getFullName();//=>'前端小智'execute(agent.getFullName);//=>'FrontendAsh'胖箭头方法getFullName=()=>{…}绑定到类实例，即使该方法与其对象分离。这种方法是在类中绑定this的最有效和简洁的方法。6.总结一下方法和对象分离会导致this指向不正确的问题。静态绑定它，您可以手动使用一个额外的变量self来保存正确的上下文对象。然而，更好的选择是使用箭头函数，它本质上是为了在词法上绑定this。在类中，您可以使用bind()方法在构造函数中手动绑定类方法。当然，如果不需要使用bind这种冗长的方法，也可以使用简单方便的胖箭头方法。原文：https://github.com/valentinog...无法实时获知代码部署后可能出现的bug。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。
