1

プロトタイプパターンを明らかにしたJavaScriptコードを初めて書いています。問題が発生しています。ユーザーが追加ボタンをクリックしたときに追加関数を呼び出すと、コンソールにこのエラーが表示されます。

Uncaught TypeError: Cannot call method 'add' of undefined

どうすればこの問題を解決できますか？

これが私のscript.jsコードです

$(function () {
var todo = Todo('contents');

$('.addBtn').on('click', function() {
    var name = $(this).parent().find('input[type="text"]').val();
    todo.add(name);
});

$('.contents').on('click', '.remove', function() {
    var el = $(this).parent();
    todo.remove(el);
});

$('.contents').on('click', '.update', function() {
    var dom = $(this);
    todo.addUpdateField(dom);
});

$('.contents').on('click', '.updateBtn', function() {
    var el = $(this);
    todo.update(el);
});

});

これが私のtodo.jsコードです

var Todo = function(c) {
    this.contents = $('.' + c);
};

Todo.prototype = function() {
var showel = function (d) {
    this.contents.prepend(d);
},

add = function (name) {
    if(name != "") {
        var div = $('<div class="names"></div>')
        .append('<span>' + name + '</span>')
        .append("<button class='update' class='update'>Edit</button>")
        .append("<button class='remove' name='remove'>Remove</button>");
    }

    return showel(div);
},

addUpdateField = function (dom) {
    var name = dom.parent().find('span').text(),
        field = $('<input type="text" value="' + name + '" />'),
        update = $('<button class="updateBtn">Update</button>');

    dom.parent().html('').append(field).append(update);

    return;
},

update = function(el) {
    var val = el.parent().find('input').val();
    el.parent().html('<span>' + val + '</span>')
    .append('<button class="update" class="update">Edit</button>')
    .append('<button class="remove" class="remove">Remove</button>');

    return;
},

remove = function (el) {
    return el.remove();
};

return {
    add             : add,
    update          : update,
    remove          : remove,
    addUpdateField  : addUpdateField
};

}();

アップデート

変更後 var todo = Todo('contents');

に

var todo = new Todo('contents');

このエラーが発生します

Object [object Object] has no method 'add'

アップデート2

これが私のjsfiddleです

4

2 に答える 2

3

オブジェクトを適切に構築していないため、プロトタイプはありません。

var todo = Todo('contents');

する必要があります：

var todo = new Todo('contents');

これは、を忘れたときに何が起こっているかを説明するSOの質問newです。

this編集：プロトタイプ関数を定義する方法は、コンテキスト（何を指すか）を台無しにします。代わりに、次のようなパターンを試してください。

Todo.prototype = {
    method1: function () { ... },
    method2: function () { ... }
};

修正されたフィドル：http：//jsfiddle.net/BagmY/3/

于 2012-08-08T12:46:51.273 に答える
1

を自己呼び出し関数に割り当てようとしていTodoます。prototypeただし、プロトタイプは関数に割り当てられているだけであり、期待される戻りオブジェクトではありません。

これがあなたの作業フィドルです。メソッドを使用して、プロトタイプをオブジェクトに直接割り当てました。

また、JSは上から下に解析します。したがって、Todo何であるかを宣言した後の新しいインスタンスを定義しますTodo。

これは、自己呼び出し関数がどのように見えるかです。

Todo.prototype = (function() {

    // ...

    return {
        add: add,
        update: update,
        remove: remove,
        addUpdateField: addUpdateField
    };

})();​
于 2012-08-08T13:02:27.713 に答える