未调用原型方法

Question

I'm creating a custom object on click and then trying to access it's prototype's methods.

$(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()
            },
        }

    });     
});

Now when i click on class deleteTask it says:

TypeError: new_task.deleteTask is not a function


new_task.deleteTask();

How can I access the prototype method deleteTask() ??

Answer 1

You're setting the prototype of Task after you've created your new Task . You're not changing the prototype of your already created instances by doing so, as the prototype is referenced at the instance creation.

Move the Task.prototype = { assignation before the creation of your new Task .

If you really want to add a function to all instances after they're created, change the prototype of the constructor instead of replacing it :

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

Answer 2

You should move the definition of Task and its prototype methods before the initial .on call. This will incidentally fix the problem identified by @dystroy whereby you're trying to set the prototype of Task after creating an instance of it.

As written the Task function is recreated every time the click handler is invoked, and therefore the Task objects created on each click will be instances of different classes, which makes using the prototype moot. Prototype methods are an effective way of sharing methods amongst multiple instances, and achieving inheritance, but you're using neither.

Alternatively, leave the Task function where it is but abandon using prototype methods, eg:

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

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

(NB: this.remove is also undefined at this point?)