[英]How to use the “this” keyword when calling a function in an anonymous function in Javascript?
I am looking to call a function that was originally just an anonymous function, but it turned out I need this function 3 times in my code. 我想调用一个原来只是一个匿名函数的函数,但结果我在我的代码中需要这个函数3次。 So I defined a function like this:
所以我定义了一个这样的函数:
function saveButton() { this.parentElement.parentElement.querySelector('h3').innerHTML = this.parentElement.querySelector('input[name="task-title"]').value; this.parentElement.parentElement.querySelector('p').innerHTML = this.parentElement.querySelector('textarea').value; this.parentElement.parentElement.querySelector('.popup').className = 'popup hidden'; this.parentElement.parentElement.querySelector('.overlay').className = 'overlay hidden'; saveWork(); };
I want to call this function in an anonymous function like this : 我想在这样的匿名函数中调用此函数:
confirmButton.onclick = function() saveButton(); };
But afterwards I realized that I couldn't use the this
in the anonymous function. 但后来我意识到,我不能用
this
在匿名函数。 How can I call confirmButton()
in the anonymous function? 如何在匿名函数中调用
confirmButton()
?
confirmButton.onclick = saveButton;
or 要么
confirmButton.onclick = function(){
saveButton.call(this);
};
although it's not a good practice to have the same name for DOM node and a function that you want to call. 虽然为DOM节点和要调用的函数使用相同的名称并不是一个好习惯。 rename your function into something that makes more sense like
buttonClick
将您的功能重命名为像
buttonClick
更有意义的功能
Have you tried using function expressions? 你尝试过使用函数表达式吗? Essentially it means assigning a function to a variable.
本质上,它意味着将函数赋值给变量。 Read this answer to learn about the differences between function expressions and function declarations.
阅读此答案以了解函数表达式和函数声明之间的差异。
As for your question, most of the time it's this case: 至于你的问题,大部分时间都是这种情况:
You want to use the parent scope of a given anonymous function. 您想要使用给定匿名函数的父作用域。
If thats the case, I would recommend this neat little trick: 如果是这样,我会推荐这个巧妙的小技巧:
var self = this;
this.saveButton = function() { // or self.saveButton...
this.parentElement.parentElement.querySelector('h3').innerHTML = this.parentElement.querySelector('input[name="task-title"]').value;
this.parentElement.parentElement.querySelector('p').innerHTML = this.parentElement.querySelector('textarea').value;
this.parentElement.parentElement.querySelector('.popup').className = 'popup hidden';
this.parentElement.parentElement.querySelector('.overlay').className = 'overlay hidden';
saveWork();
};
confirmButton.onclick = function() {
self.saveButton();
}
This trick can be used in any level of scope depth, just don't pollute the global namespace :) 这个技巧可用于任何级别的范围深度,只是不污染全局命名空间:)
By looking at the code fragment you posted, and guessing a few things, I suggest the following refactoring: 通过查看您发布的代码片段并猜测一些内容,我建议进行以下重构:
function saveButton(parentElem) {
var myParent = parentElem || this.parentElement;
myParent.parentElement.querySelector('h3').innerHTML = myParent.querySelector('input[name="task-title"]').value;
myParent.parentElement.querySelector('p').innerHTML = myParent.querySelector('textarea').value;
myParent.parentElement.querySelector('.popup').className = 'popup hidden';
myParent.parentElement.querySelector('.overlay').className = 'overlay hidden';
saveWork();
}
confirmButton.onclick = function() {
// I suppose when this function is called somewhere else,
// you actually know who is the parent element, so:
saveButton(document.querySelector('.theParentElement'));
};
// If you calling it somewhere where "this" is available,
// then simply call the function with no arguments:
saveButton();
Maybe some variation of the example above can help you. 也许上面例子的一些变化可以帮助你。 Other than that, I can't think of a better answer without looking at a greater portion of your code.
除此之外,如果不查看代码的更大部分,我无法想出更好的答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.