当前位置: 首页 > 科技观察

关于JavaScript中this参数的五件事

时间:2023-03-13 14:12:59 科技观察

this关键字是JavaScript中最令人困惑的部分之一,本文试图通过介绍关于它的五个重要事项来阐明它的用途和用法。1.它允许访问同一个对象上的其他属性在JavaScript中,函数可以是自包含的单元,但它们也可以作为对象的值。考虑下一个对象。constobj={msg:'Hi',logMessage:function(){}}logMessage属性存放的是一个函数,logMessage是一个方法。logMessage函数如何访问同一对象上的其他成员?这是这个虚拟参数变得有用的地方,允许访问同一对象上的其他成员。constobj={msg:'Hi',logMessage:function(){console.log(this.msg);}}obj.logMessage();//logMessage方法中的'Hi',这个关键字用于访问同一个对象的msg属性。基本上,这就是在JavaScript中使用this关键字的原因,它允许访问其他拥有或继承的属性。这种行为只有一个条件,函数应该作为方法而不是函数来调用。2.这取决于函数的调用方式而不是函数的定义位置考虑以下访问this参数的函数。this.msg="Parent";functionlogMessage(){console.log(this.msg);}在下一个示例中,相同的函数用于两个对象。constobj={msg:'Hi',logMessage}constnewObj={msg:'Hello',logMessage}这个变量引用的对象是什么?这取决于函数的调用方式,而不是函数定义的位置。当logMessage作为obj对象的方法被调用时,它引用该对象。obj.logMessage();//当它作为newObj对象的方法被调用时,'Hi'指向它。newObj.logMessage();//'Hello'考虑以下示例,其中logMessage属性存储在obj对象内定义的函数中。constobj={msg:'Hi',logMessage:function(){console.log(this.msg);}}logMessage中的this参数是否总是引用obj对象,因为它是在其中定义的?答案是不。下面是调用logMessage并使用call方法传递this参数引用的不同对象的示例。constnewObj={msg:'Hello'}obj.logMessage.call(newObj);//'Hello'也可以使用apply方法完成,我们甚至可以强制它以空对象运行,这次函数记录不明确的。obj.logMessage.apply({});//undefined3.当与函数形式一起使用时,它指向其他东西。函数不一定是对象的一部分,它们可以是独立的单元,所以可以以函数的形式调用。考虑下一个例子。constobj={msg:'Hi',logMessage:function(){console.log(this.msg);}}constlogMessage=obj.logMessage;logMessage();//undefinedlogMessage中的this不依赖于函数定义的位置,在本例中是在obj对象中。这取决于调用logMessage的方式,在前面的示例中,logMessage是作为函数而非方法调用的。这指向了一些意想不到的东西,this.msg给出了undefined。这是另一个例子。constobj={msg:'',logMessage:function(){this.msg='嗨';函数logSomething(){console.log(this.msg);}logSomething();}}obj.logMessage();//undefinedlogMessage作为方法调用(obj.logMessage()),但是logSomething作为函数调用。因为logSomething不是作为方法调用的,而是作为函数调用的,所以,在其中,this指向不是异常的东西。在这种情况下,this.msg给出未定义的。如果您希望this引用正确的对象,请确保始终将logMessage作为方法调用。4.箭头函数没有这个。箭头函数确实没有自己的this。它们实际上是用来解决我们之前在方法内部调用内部函数时遇到的问题。检查下一个示例。constobj={logMessage:function(){constmsg='嗨';constlogSomething=()=>{console.log(msg);}logSomething();}}obj.logMessage();//'嗨'logSomething有msg作为变量吗?不。当logSomething试图访问它没有的变量时会发生什么?它向下查找其父元素以找到变量并使用它。据说箭头函数没有自己的this,究竟是什么意思呢?这意味着它向下查看其父元素以找到变量并使用它。请参见下面的示例。constobj={msg:'',logMessage:function(){this.msg='嗨';constlogSomething=()=>{console.log(this.msg);}logSomething();}}obj.logMessage();//'Hi'logSomething没有这个参数,和其他从外部环境使用的变量和参数一样,它沿着链往下看,在它的parent中找到并使用它。logSomething中的this与logMessage中的对象相同。5.不使用它也可以编写应用程序没有必要使用this关键字编写应用程序,除非应用程序已经用这种方式编写了。ReactHooks、VueJsCompositionAPI和Svelte等UI框架允许在不使用此关键字的情况下编写组件。我们可以使用闭包来写封装对象,这是一个例子。constobj=(function(){letmsg='';functionlogMessage(){msg='Hi';constlogSomething=()=>{console.log(msg);}logSomething();}return{logMessage}})();obj.logMessage();//'Hi'logMessage是一个自执行函数内部定义的内部函数。logMessage是一个闭包。它从外部函数引用msg变量。即使在自执行函数返回后,它也可以访问这个变量。现在它不关心我们是将logMessage作为函数还是作为方法来调用,它总是引用正确的msg变量。constlogMessage=obj.logMessage;logMessage();//'Hi'写在idea的末尾如果你真的想使用this关键字,或者受限于应用程序内部已经做出的决定,请记住这个函数应该作为指向正确对象的方法调用。如果您真的不喜欢使用this关键字,您也可以考虑使用闭包实现对象并避免完全使用this。好了,以上就是今天这篇文章要和大家分享的内容。如果觉得有帮助,请记得点赞,关注我,同时分享给你的开发者朋友,说不定可以帮到他。