网页建站要多久,做演示的网站,html首页设计代码,医院网站源码下载this 关键字是 JavaScript 中最令人困惑的部分之一#xff0c;本文试图通过介绍有关它的五个重要事项来阐明其目的和用法。
1、它允许访问同一对象上的其他属性
在 JavaScript 中#xff0c;函数可以是独立的单元#xff0c;但它们也可以用作对象的值。考虑下一个对象。
…this 关键字是 JavaScript 中最令人困惑的部分之一本文试图通过介绍有关它的五个重要事项来阐明其目的和用法。
1、它允许访问同一对象上的其他属性
在 JavaScript 中函数可以是独立的单元但它们也可以用作对象的值。考虑下一个对象。
const obj {msg: Hi,logMessage: function(){}
}logMessage 属性存储一个函数logMessage 是一种方法。
logMessage 函数如何访问同一对象上的其他成员
这是这个伪参数变得有用的地方它允许访问同一对象上的其他成员。
const obj {msg: Hi,logMessage: function(){console.log(this.msg);}
}
obj.logMessage();
//Hi在 logMessage 方法中this 关键字用于访问同一对象的 msg 属性。
基本上这就是在 JavaScript 中使用 this 关键字的原因它允许访问其他拥有或继承的属性。
这种行为只有一个条件函数应该作为方法调用而不是作为函数调用。
2、它取决于函数的调用方式而不是函数的定义位置
考虑以下访问 this 参数的函数。
this.msg Parent;
function logMessage(){console.log(this.msg);
}在下一个示例中对两个对象使用相同的函数。
const obj {msg: Hi,logMessage
}
const newObj {msg: Hello,logMessage
}这个变量引用的对象是什么
这取决于函数的调用方式而不是函数的定义位置。
当 logMessage 作为 obj 对象上的方法调用时它引用该对象。
obj.logMessage();
//Hi当它作为 newObj 对象上的方法被调用时它指向它。
newObj.logMessage();
//Hello请考虑以下示例其中 logMessage 属性存储在 obj 对象内定义的函数。
const obj {msg: Hi,logMessage: function(){console.log(this.msg);}
}logMessage 中的 this 参数是否总是引用 obj 对象因为它是在该对象中定义的
答案是NO。
下面是调用 logMessage 并使用 call 方法传递由 this 参数引用的不同对象的示例。
const newObj {msg: Hello
}
obj.logMessage.call(newObj);
//Hello同样可以使用 apply 方法来完成我们甚至可以强制它使用空对象运行这次函数记录未定义。
obj.logMessage.apply({});
//undefined3、与函数形式一起使用时它指向其他东西
函数不一定是对象的一部分它们可以是独立的单元因此可以用函数形式调用。
考虑下一个例子。
const obj {msg: Hi,logMessage: function(){console.log(this.msg);}
}
const logMessage obj.logMessage;
logMessage();
//undefinedlogMessage 中的 this 不依赖于函数的定义位置在这种情况下是在 obj 对象中。
这取决于如何调用 logMessage在前面的示例中logMessage 被调用为函数而不是方法。这指向了一些意想不到的东西this.msg 给出了未定义的内容。
这是另一个例子。
const obj {msg: ,logMessage: function(){this.msg Hi;function logSomething(){console.log(this.msg);}logSomething();}
}
obj.logMessage();
//undefinedlogMessage 作为方法调用obj.logMessage()但 logSomething 作为函数调用。因为 logSomething 不是作为方法调用而是作为函数调用所以在其中 this 指向未例外的东西。在这种情况下this.msg 给出未定义。
如果您希望 this 引用正确的对象请确保始终将 logMessage 作为方法调用。
4 、箭头函数没有this
确实箭头函数没有自己的 this。它们实际上是用来解决我们之前在方法内部调用内部函数时遇到的问题。
检查下一个示例。
const obj {logMessage: function(){const msg Hi;const logSomething (){console.log(msg);}logSomething();}
}
obj.logMessage();
//HilogSomething 是否将 msg 作为变量不。
logSomething 在尝试访问它没有的变量时会发生什么
它向下看它的父级元素来找到变量并使用它。
据说箭头函数没有自己的 this它实际上是什么意思
这意味着它看不起它的父级元素来找到变量并使用它。
看下面的例子。
const obj {msg: ,logMessage: function(){this.msg Hi;const logSomething (){console.log(this.msg);}logSomething();}
}
obj.logMessage();
//HilogSomething 没有这个参数与从外部环境中使用的其他变量和参数一样它向下查看链并在其父级中找到它并使用它。
logSomething 中的 this 与 logMessage 中的对象相同。
5、应用程序可以在不使用它的情况下编写
除非应用程序已经以这种方式编写否则无需使用 this 关键字编写应用程序。
像 React Hooks、VueJs Composition API 和 Svelte 这样的 UI 框架允许在不使用 this 关键字的情况下编写组件。
我们可以使用闭包来编写封装对象这是一个例子。
const obj (function(){let msg ;function logMessage(){msg Hi;const logSomething (){console.log(msg);}logSomething();}return {logMessage}
})();
obj.logMessage();
//HilogMessage 是在自执行函数内部定义的内部函数。logMessage 是一个闭包。它从外部函数引用 msg 变量。即使在自执行函数返回后它也可以访问此变量。
现在它不关心我们是否将 logMessage 作为函数或作为方法调用它总是引用正确的 msg 变量。
const logMessage obj.logMessage;
logMessage();
//Hi写在最后的想法
如果您真的想使用 this 关键字或者受限于应用程序内部已经做出的决定请记住该函数应作为方法调用以指向正确的对象。
如果真的不喜欢使用 this 关键字您也可以考虑使用闭包实现对象并完全避免使用 this。
