Question

我正在尝试从A中的功能中的功能访问功能A，例如：

functionA () {
    functionB () {
        functionC () {
           #want to call functionA from here
        }
     }
 }

这是我使用的代码：

updateProgress: function (statusurl){
    axios({
      method: 'get',
      url: statusurl,
      dataType: 'json',
      headers: {'Content-Type': 'application/json; charset=utf-8'},
      async: true,
      data: {}
    })
      .then(function (response) {
        var data = response.data
        if (data['state'] !== 'PENDING' && data['state'] !== 'PROGRESS') {
          if ('result' in data) {
            // show result
            console.log('result: ' + data['result'])
          }
          else {
            // something unexpected happened
            console.log('state: ' + data['state'])
          }
        }
        else {
          // rerun in 2 seconds
          setTimeout(function() {
            this.updateProgress(statusurl)
          }, 2000)
        }
      }.bind(this))
      .catch(e => {
        console.log('error: ' + e)
      })

您可以看到我正在使用来自functionC的this.functionA和functionA上的bind（）。

我在控制台中收到以下错误：

Uncaught TypeError: this.updateProgress is not a function at eval

关于如何执行此操作的任何想法？

Answer 1

问题是this的值已更改。每次您输入新功能（用function关键字声明）时，this的值都会更改。在这种情况下，setTimeout调用的函数有问题：

setTimeout(function() {
    this.updateProgress(statusurl)
}, 2000)

多年以来，该解决方案将以另一个名称获取对this的引用：

var me = this    

setTimeout(function() {
    me.updateProgress(statusurl)
}, 2000)

使用bind的习惯稍差一些，就像其他嵌套函数一样：

setTimeout(function() {
    this.updateProgress(statusurl)
}.bind(this), 2000)

如果您有可用的ES6箭头功能（并且从catch看来，您似乎已经拥有），那么您甚至不需要使用bind。箭头函数不会更改this的值，因此您可以编写：

setTimeout(() => {
    this.updateProgress(statusurl)
}, 2000)

同样可以删除您对bind的其他使用。

嵌套函数的Vue.js访问功能

1 个答案: