Javascript 如何从用作回调的其他类方法访问方法？_Javascript

Javascript 如何从用作回调的其他类方法访问方法？

javascript

Javascript 如何从用作回调的其他类方法访问方法？,javascript,Javascript,我有以下Javascript类： class App { log_text(text) { console.log(text) } process_response(response) { this.log_text(response) // Uncaught TypeError: this.log_text is not a function // self.log_text(response) // Uncaught

我有以下Javascript类：

class App {

    log_text(text) {
        console.log(text)
    }

    process_response(response) {
        this.log_text(response) // Uncaught TypeError: this.log_text is not a function
        // self.log_text(response) // Uncaught TypeError: self.log_text is not a function
    }

    do_stuff() {
        this.log_text('hello') // OK
    }

    fetch_data() {
        jQuery.get('http://example.com/data/sample.txt', this.process_response, 'text')
    }
}

调用方法

do\u stuff

时，我可以通过调用

this.log\u text

来访问

log\u text

fine。但是，方法

process\u response

，在本例中用作

jQuery.get

的回调处理程序，失败了，因为

此

在该上下文中表示完全不同的对象

类似地，

self.log\u text

也会抛出一个类型错误

在本例中，从

process\u response

调用

log\u text

的可能（或正确）方法是什么？

发生的情况是，您正在传递您的process\u response函数，仅此而已，正如您所看到的更改上下文。一种修复方法是使用箭头语法对其进行包装，这将在jQuery触发回调时保留此值

fetch_data（）{
jQuery.get（'http://example.com/data/sample.txt“，（r）=>此.进程（r），“文本”）
}

发生的事情是，您正在传递流程响应函数，仅此而已，正如您所看到的这种变化的背景。一种修复方法是使用箭头语法对其进行包装，这将在jQuery触发回调时保留此值

fetch_data（）{
jQuery.get（'http://example.com/data/sample.txt“，（r）=>此.进程（r），“文本”）
}

您可以使用设置

处理响应

功能的上下文

fetch\u data（）{
jQuery.get（'http://example.com/data/sample.txt，this.process_response.bind（this），“text”）
}

您可以使用设置

处理响应

功能的上下文

fetch_data（）{
jQuery.get（'http://example.com/data/sample.txt，this.process_response.bind（this），“text”）
}

您可以使用箭头函数，它有一个词法

this

fetch_data() {
  jQuery.get
    ( 'http://example.com/data/sample.txt'
    , r => this.process_response(r)
    , 'text'
    )
}

或者使用

Function#bind

将上下文（以及可选的一些参数）绑定到函数-

fetch_data() {
  jQuery.get
    ( 'http://example.com/data/sample.txt'
    , this.process_response.bind(this)
    , 'text'
    )
}

或者，正如历史上所做的那样，使用var保存上下文；与上述技术相比，这一点现在不太受欢迎-

fetch_data() {
  var ctx = this
  jQuery.get
    ( 'http://example.com/data/sample.txt'
    , function (r) { ctx.process_response(r) }
    , 'text'
    )
}

然而，新的JS功能将提高您的生活质量。考虑将JQXHR强制为一个承诺，这样您就可以使用<代码>异步代码>代码> >代码>等待<代码> -/P>

const get = (opts = {}) =>
  new Promise
    ( (resolve, reject) =>
        $.get(opts)
         .done((req, status, res) => resolve(res))
         .fail((req, status, err) => reject(err))
    )

结果是代码更加平坦，不再需要许多无关的函数，如

获取数据

和

处理响应

。更妙的是，我们的大脑不再考虑绑定函数和动态上下文-

class App {

    log_text(text) {
        console.log(text)
    }

    async main () {
      const res = await
        get ({ url: '/data/sample.txt', dataType: 'text' })

      this.log_text(res)
    }

}

您甚至可以为

get

包装设置默认选项-

const defaultOpts =
  { dataType: 'text' }

const get = (opts = {}) =>
  new Promise
    ( (resolve, reject) =>
        $.get({ ...defaultOpts, ...opts })
         .done((req, status, res) => resolve(res))
         .fail((req, status, err) => reject(err))
    )

然后使用它-

async main () {
  const res = await
    get ({ url: '/data/sample.txt' })

  this.log_text(res)
  // ...
}