原型链回调

Prototype chain callback

本文关键字：回调 原型      更新时间：2023-09-26

我有一个对象，它使用原型链调用一些异步函数：

function Wow() {
  this.myAsyncFunction();
}
Wow.prototype.myAsyncFunction = function() {
  // Once my async function is complete, I fire a callback
  this.completed(); // Does not work
}

我想这样使用它：

var wow = new Wow();
wow.completed = function() {
  alert('Awesome');
}

这是我创建的一个代码片段，用来模拟我的想法。

function Wow() {
    this.ok = document.getElementById('ok');
    this.wait();
}
Wow.prototype.wait = function() {
    this.ok.innerHTML = "Waiting..."
    window.setTimeout(function() {
        this.completed();
    }, 1000);
}
var wow = new Wow();
wow.completed = function() {
    wow.ok.innerHTML = "Compelted";
};
#ok {
    font-size: 28px;
    color: red;
}
<div id="ok"></div>

我花了一个多小时在谷歌和StackOverflow上搜索解决方案，但我发现甚至很难找到它。

代码的问题是this不是在嵌套函数中继承的。

这项工作：

Wow.prototype.wait = function() {
    this.ok.innerHTML = "Waiting...";
    var that = this;
    window.setTimeout(function() {
        that.completed();
    }, 1000);
}


function Wow() {
    this.ok = document.getElementById('ok');
    this.wait();
}
Wow.prototype.wait = function() {
    this.ok.innerHTML = "Waiting...";
    var that = this;
    window.setTimeout(function() {
        that.completed();
    }, 1000);
}
var wow = new Wow();
wow.completed = function() {
    wow.ok.innerHTML = "Compelted";
};
#ok {
    font-size: 28px;
    color: red;
}
<div id="ok"></div>

您需要稍微更改wait函数，当setTimeOut运行代码时，this不可用，因为该代码与上下文无关this:

Wow.prototype.wait = function() {
    var self = this;
    this.ok.innerHTML = "Waiting..."
    window.setTimeout(function() {
        self.completed();
    }, 1000);
}

工作样品——http://jsfiddle.net/4xcjhe8d/2/

相关文章：