代码之家 › 专栏 › 技术社区 › mydoghasworms

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

javascript

mydoghasworms · 技术社区 · 6 年前

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_stuff ,我可以访问 log_text 打电话就可以了 this.log_text . 但是,方法 process_response ,它用作 jQuery.get this 表示该上下文中完全不同的对象。

同样地, self.log_text 同时抛出一个TypeError。

可能的(或正确的)呼叫方式 日志文本 过程响应 就像这个例子?

3 回复 | 直到 6 年前

Bill Hayden 6 年前

正在发生的是,您正在传递您的process_response函数,仅此而已,因为您已经看到了这些更改的上下文。一个修复方法是使用箭头语法包装它,这将在jQuery启动回调时保留该语法的值。

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

Satpal 6 年前

你可以用 Function.bind() process_response 功能

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

Mulan 6 年前

可以使用箭头函数,它具有词法。 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'
    )
}

jqXHR公司 给一个承诺 async 和 await -

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

fetch_data 和 process_response 不再需要了。更妙的是,我们的思想从对绑定函数和动态上下文的思考中解放出来-

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)
  // ...
}