javascript可链接嵌套子类

Question

我实际上正在尝试构建一个包含子对象或其他函数的可链接对象。

应该这样使用:

val().rules.phone("someValue");

到目前为止:

var val = function(){
  var validator = function(){
    this.fields = [];
    return this;
  }
  validator.prototype = {
    addField: function(fieldName){
       this.fields.push(fieldName);
       return this;
    },
    rules: {
      phone: function(){
        //RETURNING THIS DOES NOT RETURN THE PARENT SCOPE
        //IT RETURNS SCOPE OF PHONE FUNCTION
        return this;
      }
    }
  }
  return new validator();

}

我还尝试了通过原型(prototype)链进行循环引用:

var val = function(){
    var validator = function(){
        this.fields = [];

        return this;
    }

    var rules = function(){
        validator.call(this);
    }
    rules.prototype = Object.create(validator.prototype);
    rules.prototype.constructor = rules;
    rules.prototype.phone = function(){
    console.log('hone');   
    }

    validator.prototype = {
        addField: function(fieldName){
            this.fields.push(fieldName);    
            return this;
        },
        rules: new rules()

    }

   return new validator();
}

var z = val().rules;
//no 'addFields' function exists on the validator object in the chain.
console.log(z);

问题:

在第一个val().rules.phone()中返回其函数的作用域而不是父作用域。它应该返回验证器范围。

在第二个示例中，val().rules在其原型(prototype)链上确实有验证器作为父级，但是addFields打印未定义，并且在跟踪时控制台中不存在链条。

我知道添加规则文字使问题变得过于复杂。我可以直接使用直接放置在原型(prototype)对象上的函数来实现链接。这是为了我自己的澄清。有没有其他可能的方法来实现相同的样式用法？

Answer 1

您可以通过以下方式获得您想要的 API:

var validator = function(){
    this.fields = [];
    this.rules = new rules(this);
}
validator.prototype = {
    addField: function(fieldName){
        this.fields.push(fieldName);    
        return this;
    }
};

var rules = function(validator) {
  this.validator = validator;
}
rules.prototype = {
  addField: function(fieldName) {
    this.validator.addField(fieldName);
    return this;
  },
  phone: function() {
    console.log("phone");
  }
};

v = new validator();
v.rules.addField("hello");
v.rules.phone();

使规则继承validator在语义和实践上都是有问题的。您的 validator.prototype 位于:

validator.prototype = {
    addField: function(fieldName){
        this.fields.push(fieldName);    
        return this;
    },
    rules: new rules()
}

将在所有validator对象之间共享相同的rules对象，这可能不是您想要的。但是，如果您通过在 validator 构造函数中创建 rules 对象来修复此问题，则会出现无限循环，因为 validator 构造函数将调用 rules 构造函数，并且 rules 构造函数将调用 validator 构造函数(因为 rules 一个验证器)。