Question

我希望调用一个原本只是匿名函数的函数，但事实证明我在代码中需要这个函数3次。所以我定义了这样一个函数：

＆＃13;

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();
};

＆＃13;

我想在这样的匿名函数中调用此函数：

＆＃13;

confirmButton.onclick = function()
    saveButton();
};

＆＃13;

但后来我意识到我无法在匿名函数中使用this。如何在匿名函数中调用confirmButton()？

Answer 1

confirmButton.onclick = saveButton;

或

confirmButton.onclick = function(){
    saveButton.call(this);
};

尽管对DOM节点和要调用的函数使用相同的名称并不是一个好习惯。将您的函数重命名为更有意义的内容，例如buttonClick

Answer 2

您是否尝试过使用函数表达式？本质上，它意味着将函数赋值给变量。阅读this回答，了解函数表达式和函数声明之间的区别。

关于你的问题，大部分时间是这种情况：

您想要使用给定匿名函数的父作用域。

如果是这样，我会推荐这个巧妙的小技巧：

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();
}

这个技巧可以在任何级别的范围深度中使用，只是不要污染全局命名空间：）

Answer 3

通过查看您发布的代码片段，并猜测一些事情，我建议进行以下重构：

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();

上述示例中的某些变体可能会对您有所帮助。除此之外，如果不查看代码的大部分内容，我无法想出更好的答案。

如何使用＆＃34;这个＆＃34;在Javascript中调用匿名函数中的函数时的关键字？

3 个答案: