Метод прототипа, который не называется

Question

Я создаю пользовательский объект при щелчке и затем пытаюсь получить доступ к его методам прототипа.

$(function(){  
    $('.addtask').on("click", function(){ 
     var new_task = new Task(); 

     $('.deletetask').on("click", function(){ 
      new_task.deleteTask(); 
     }); 

     function Task(){   
     this.html="<li>Add Description<span class='deletetask'></span></li>"; 
     } 

     Task.prototype = { 
      constructor: Task, 
      deleteTask: function(){ 
       this.remove() 
      }, 
     } 

    });  
}); 

Теперь, когда я нажимаю на классе DeleteTask он говорит:

TypeError: new_task.deleteTask is not a function 


new_task.deleteTask(); 

Как я могу получить доступ к методу прототипа DeleteTask() ??

Answer 1

Вы устанавливаете прототип Taskпосле, вы создали свой new Task. Вы не изменяете прототип уже созданных экземпляров, так как прототип ссылается на создание экземпляра.

Переместить Task.prototype = { присвоение до создание new Task.

Если вы действительно хотите добавить функцию ко всем экземплярам после их создания, изменения прототипа конструктора вместо того, чтобы заменить его:

Task.prototype.deleteTask = function(){... 

Answer 2

Вы должны переместить определение Task и его prototype методы до начального вызова .on. Это, кстати, устранит проблему, идентифицированную @dystroy, в которой вы пытаетесь установить прототип Task после создания экземпляра его.

Как написал функцию Task воссоздан каждый раз, когда обработчик щелчка вызывается, и поэтому Task объекты, созданные на каждом клике будут экземплярами различных классов, что делает с помощью prototype спорное. Методы прототипа - эффективный способ совместного использования методов между несколькими экземплярами и достижения наследования, но вы не используете ни один из них.

С другой стороны, оставить функцию Task, где он, но отказаться, используя prototype методы и т.д .:

function Task() {   
    this.html = "<li>Add Description<span class='deletetask'></span></li>"; 

    this.removeTask = function() { 
     this.remove(); 
    } 
} 

(NB: this.remove также неопределенные в этой точке?)