创建动态原型，例如jQuery函数链

Question

我尝试创建一个动态原型，例如jQuery和功能链，但是我在不使用新功能的情况下遇到了错误，返回this对象正确？

    (function() {
      var peopleDynamicProto = function(name, age, state) {
        this.name = name;
        this.age = age;
        this.state = state;
        if (typeof this.printPerson !== 'function') {
          peopleDynamicProto.prototype.printPerson = function() {
            console.log(this.name + ',' + this.age + ',' + this.state);
            return this;
          };
        }
        if (!this.hasOwnProperty('gender')) {
          peopleDynamicProto.prototype.gender = 'male';
          return this;
        }
      }
      window.peopleDynamicProto = peopleDynamicProto;
      return peopleDynamicProto;
    })();
     //var person1 = new peopleDynamicProto('john', 23,'CA');
     //person1.printPerson();
    peopleDynamicProto('john', 23, 'CA').printPerson(); //got error

有人知道问题在哪里？

Answer 1

如果要基于原型创建新对象，则必须使用"新"。我不确定您要准确地尝试做什么，以及为什么要动态创建原型。我不会说100％确定，但我不认为jQuery会这样做（而且它看起来像是一种非常糟糕的做法）。如果您想做诸如jQuery之类的事情，您的班级可以连锁并可以用作(new peopleDynamicProto(...)).print()或peopleDynamicProto(...).print()，那么您可以做这样的事情：

function peopleDynamicProto(name) {
  if (this instanceof peopleDynamicProto) {
    /* initialize attributes here */
    this.name = name;
  } else {
    return new peopleDynamicProto(name);
  }
}
peopleDynamicProto.prototype.printPerson = function() {
   console.log( this.name );
   return this;
}

现在您应该可以以两种方式称呼它：

peopleDynamicProto('john').printPerson();
(new peopleDynamicProto('john')).printPerson();

如果您不在乎双向支持，那么您可以返回一个对象，例如：

function peopleDynamicProto(name) {
  return {
    name: name,
    printPerson = function() {
      console.log( this.name );
      return this;
    }
  };
}
peopleDynamicProto('John').printPerson();

（还有其他方法）

Answer 2

我认为您遇到这样的错误的原因是，您要返回的是一个函数而不是对象，而是试图访问对象的属性。

对于EG，如果您写为：

**

var myFun = function(){
 this.message = "TEST";
}

**

您无法访问myfun.message，因为这里 myFun是此函数构造函数的对象。

要访问其财产，您需要做类似的事情（new MyFun（））。消息;

在您的情况下，您返回的是" peopledynamicproto"，它仅是一个函数，而不是此函数构造函数的对象。

要访问方法printperson（这是成员），您需要创建一个peopledynamicproto的实例，并访问其成员

Answer 3

我想你错过了new操作员-see this for reference

新操作员创建了用户定义的对象类型或 具有构造函数函数的内置对象类型之一。

请参见下面的演示：

(function() {
  var peopleDynamicProto = function(name, age, state) {
    this.name = name;
    this.age = age;
    this.state = state;
    if (typeof this.printPerson !== 'function') {
      peopleDynamicProto.prototype.printPerson = function() {
        console.log(this.name + ',' + this.age + ',' + this.state);
        return this;
      };
    }
    if (!this.hasOwnProperty('gender')) {
      peopleDynamicProto.prototype.gender = 'male';
      return this;
    }
  }
  window.peopleDynamicProto = peopleDynamicProto;
  return peopleDynamicProto;
})();
var person1 = new peopleDynamicProto('john', 23,'CA');
person1.printPerson();
new peopleDynamicProto('john', 23, 'CA').printPerson(); //got error

Answer 4

您无法在创建器中创建原型。请参阅此解释定义prototype-hethods-inside-the-Constructor

使用此关键字代替原型：

(function(){
    var peopleDynamicProto = function(name, age, state){
    this.name   = name;
    this.age    = age;
    this.state  = state;
    this.printPerson = function(){
            console.log( this.name + ',' + this.age + ',' + this.state );
            return this;
    }
    if( !this.hasOwnProperty('gender') ){
        peopleDynamicProto.prototype.gender = 'male';
        return this;
    } 
}
window.peopleDynamicProto = peopleDynamicProto;
return peopleDynamicProto;
})();
peopleDynamicProto('john', 23,'CA').printPerson();

或使用构造函数外部原型（这是更好的）

(function(){
 var peopleDynamicProto = function(name, age, state){
    this.name   = name;
    this.age    = age;
    this.state  = state;
    if( !this.hasOwnProperty('gender') ){
        peopleDynamicProto.prototype.gender = 'male';
        return this;
    } 
}
if( typeof this.printPerson !== 'function' ){
        peopleDynamicProto.prototype.printPerson = function(){
            console.log( this.name + ',' + this.age + ',' + this.state );
            return this;
        };
    }
 window.peopleDynamicProto = peopleDynamicProto;
return peopleDynamicProto;
})();