Javascript: Prototype提供无限调用对象方法的接口

Question

我正在寻找满足以下要求的 JavaScript 实现：

原型实现了 next 和运行方法。如果 next 被调用，迭代函数 once 被调用一次。如果运行被调用，once会无限频繁地被调用（通过用户请求中止也必须是可能的，但目前没有反映在源代码中）。
once 接受一个 done 参数，它会在完成后调用。
迭代函数 once 在 prototype 中定义，但可以并且将被子 Child 覆盖.
运行中的无限迭代必须是可能的，因此堆栈必须丢失（因为当函数被 setTimeout 调用时会发生这种情况。

我当前关于此源代码的问题：调用了 Parent 的 once，而不是 Child[=35] =].

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS test</title> <script type="text/javascript"> function write(msg) { var t = document.createTextNode(msg); var li = document.createElement("li"); li.appendChild(t); document.querySelector("ul").appendChild(li); } var Parent = function () { var running = 0; var run = function () { running = Infinity; invokeNextIter(); }; var next = function () { running = 1; invokeNextIter(); }; var invokeNextIter = function () { if (running > 0) { running -= 1; setTimeout(function () { once(invokeNextIter); }, 1); } }; var once = function (done) { var time = Math.random() * 3 + 1; write(time + " sec"); setTimeout(done, time * 1000); }; return { run: run, once: once }; }; var Child = function () { var once = function (done) { write("2 sec as always"); setTimeout(done, 2000); }; var p = new Parent(); return Object.create(p, { once : once }); }; function main() { var c = new Child(); c.run(); } </script> </head> <body onload="main()"> <ul> </ul> </body> </html>

无法获得此运行 Function.prototype.bind 或相关技术。任何帮助感激不尽

Answer 1

好的，在你的例子中，Parent 和 Child 之间唯一不同的函数是你的 once() 函数。

所以你必须从你的 Parent class 开始，构建核心，然后你将实例方法添加到 Parent 和 child，以覆盖 once()函数。

我们将使用原型继承。规则是您可以为任何使用 new 关键字初始化的对象创建原型，其中包括原生 javascript 对象。

  function write(msg) {
     var t = document.createTextNode(msg);
     var li = document.createElement("li");
     li.appendChild(t);
     document.querySelector("ul").appendChild(li);
   }

   var Parent = function(){
     //Retrieve context
     var self = this;

     var running = 0
     //Create a `run` function which will refer to the current context
     self.run = function(){
       running = Infinity;
       invokeNextIter();
     }

     //Declare our private function
     var next = function () {
        running = 1;
        invokeNextIter();
      };

     var invokeNextIter = function () {
        if (running > 0) {
          running -= 1;
          setTimeout(function () {
            //Call once method which is in the prototype of the current context
            self.once(invokeNextIter);
          }, 1);
        }
      };
   }

   //Add a "once" instance method to Parent
   Parent.prototype.once = function(done){
     var time = Math.random() * 3 + 1;
     write(time + " sec");
     setTimeout(function(){
       done();
     }, time * 1000);
   }


   //Create our Child 'class'
   var Child = function(){

   }

   //Declare Child as a subclass of the first
   Child.prototype = new Parent();

   //Add a "once" instance method to Child and override the "once" parent method
   Child.prototype.once = function(done){
     write("1.5 sec as always");
     setTimeout(function(){
       done();
     }, 1500);
   }


   function main(){
     // Create instances and see the overridden behavior
     var c = new Child();
     var p = new Parent();
     //c.run() will call child once() method
     c.run();
     //p.run() will call parent once() method
     p.run();
   }

在这里，您可以看到 self.run() 和 self.once()。 Self 变量将引用当前实例。

Javascript: Prototype提供无限调用对象方法的接口

Javascript: Prototype provides interface to call object's method infinitely

javascript

this

settimeout