在对象上调用构造函数原型时新添加的功能不起作用

Question

function userCreator(name,score){
    const newUser = Object.create(userFunctions);
    newUser.name = name;
    newUser.score = score;
    return newUser;
}
userFunctions = {
  increment: function(){
      this.score++;
  }
};

userCreator.prototype.foo = function(){
    console.log("foo");
};

const user1 = userCreator("Phil",5);

user1.foo();

我尝试将一个函数添加到我的结构中，但是当我添加此函数并用user1调用它时，它说user1.foo()不是函数。

Answer 1

看起来您想让对象原型从userFunctions对象继承，在这种情况下，您应该设置

userCreator.prototype = Object.create(userFunctions);

在构造函数之外 。 您还应该在构造函数上调用new ，并且不要从中返回任何对象，以使<functionName>.prototype正常工作：

 function userCreator(name,score){ this.name = name; this.score = score; } userFunctions = { increment: function(){ this.score++; } }; userCreator.prototype = Object.create(userFunctions); userCreator.prototype.foo = function(){ console.log("foo"); }; const user1 = new userCreator("Phil",5); user1.foo(); 

（从技术上讲，您可以使用return this ，但这是多余的）

Answer 2

您要在userCreator分配对象的原型不是userCreator.prototype ，而是userFunctions 。 因此，您需要在其中添加foo ，而不是userCreator.prototype 。 另外，别忘了声明userFunctions ，此刻您的代码已成为我所谓的“隐式全局恐怖”的牺牲品。

 function userCreator(name,score){ const newUser = Object.create(userFunctions); newUser.name = name; newUser.score = score; return newUser; } const userFunctions = { // *** Added const increment: function(){ this.score++; } }; userFunctions.foo = function(){ // *** `userFunctions`, not `userCreator.prototype` console.log("foo"); }; const user1 = userCreator("Phil",5); user1.foo(); 

如果您使用new userCreator创建对象，那么userCreator.prototype将自动用作新对象的原型，但是您可以通过Object.create(userFunctions)手动进行操作。

或者，也可以摆脱userFunctions并在整个过程中使用userCreator.prototype ：

 function userCreator(name,score){ const newUser = Object.create(userCreator.prototype); newUser.name = name; newUser.score = score; return newUser; } userCreator.prototype.increment = function(){ this.score++; }; userCreator.prototype.foo = function(){ console.log("foo"); }; const user1 = userCreator("Phil",5); user1.foo(); 

仅仅为了它的价值，使用new的版本：

 function UserCreator(name,score){ this.name = name; this.score = score; } UserCreator.prototype.increment = function(){ this.score++; }; UserCreator.prototype.foo = function(){ console.log("foo"); }; const user1 = new UserCreator("Phil",5); user1.foo(); 

或者，因为您已经在使用ES2015 +功能：

 class UserCreator { constructor(name,score){ this.name = name; this.score = score; } increment() { this.score++; } } // If for some reason you wanted to add it separately // from the `class` definition UserCreator.prototype.foo = function(){ console.log("foo"); }; const user1 = new UserCreator("Phil",5); user1.foo(); 

但是，也可以不添加new内容也可以，只需添加到正确的对象即可。

Answer 3

由于您在调用userCreator未使用new语法（并且它不是返回其原型实例的函数），因此请勿将userCreator用作（标准）构造函数。 因此，创建的对象不具有userCreator.prototype作为原型，因此userCreator.prototype任何突变都不会影响您创建的对象。

您似乎想要具有UserFunctions的User对象。 在ES6语法中，您可以这样实现：

 class Scorer { constructor() { this.score = 0; } increment() { this.score++; } } class User extends Scorer { constructor(name, score) { super(); this.name = name; this.score = score; } foo() { console.log("foo"); } } const user1 = new User("Phil", 5); user1.foo();