javascript中的错误：对象不是函数 [英] Error in javascript: object is not a function
问题描述
当我在下面运行我的代码时，它在控制台中显示错误对象不是函数。此错误出现在此行 var todo = new Todo（'contents'）; 在我的 script.js 文件中。我怎样才能使它工作？
When I run my code below then it shows error object is not a function in console. This error is on this line var todo = new Todo('contents'); in my script.js file. How can I make it work?
这是我的todo.js文件
Here is my todo.js file
var Todo = (function(c) {
var contents = $('.' + c);
var showel = function (d) {
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
};
})();
这是我的script.js文件
here is my script.js file
$(function () {
var todo = new 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);
});
});
这里是html代码
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<script type="text/javascript" src="todo.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<div class="container">
<label>Name</label>
<input type="text" class="name" name="name" />
<input type="button" class="addBtn" name="add" value="Add" />
<div class="contents"></div>
</div>
</body>
</html>
推荐答案
您正在立即执行分配给<的函数code>待办事项。该函数返回一个对象，因此 Todo 引用返回的对象，而不是函数（因此Not a function错误）。
You are immediately executing the function that is assigned to Todo. That function returns an object, so Todo refers to the returned object, not a function (hence the "Not a function" error).
我假设你想要的东西是这样的：
I assume you intended something along the lines of this:
var Todo = function () {
this.add = function () { //Note the use of `this` here
//Do stuff
};
//etc...
}; //No self-invoking parentheses here
现在， Todo 指的是你可以使用 new 运算符调用的构造函数，就像你现在正在尝试的那样。
Now, Todo refers to a constructor function which you can invoke with the new operator, as you are currently trying to do.
另请注意，此模式将导致 Todo 的每个实例都具有每个方法的单独副本，这不是非常有效。最好将方法声明为原型的属性：
Also note that this pattern will result in every instance of Todo having a separate copy of each method, which isn't very efficient. It would be better to declare the methods as properties of the prototype:
var Todo = function () {
//Initialize the Todo instance
};
Todo.prototype.add = function () {
//Do stuff
};
现在， Todo 的所有实例都将共享方法的单一副本。
Now, all instance of Todo will share a single copy of the methods.
这篇关于javascript中的错误：对象不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
