javascript 中的错误：对象不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11951550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error in javascript: object is not a function
提问by Om3ga
When I run my code below then it shows error object is not a functionin console. This error is on this line var todo = new Todo('contents');in my script.jsfile. How can I make it work?
当我在下面运行我的代码时，它object is not a function在控制台中显示错误。这个错误var todo = new Todo('contents');在我的script.js文件中的这一行。我怎样才能让它工作？
Here is my todo.js file
这是我的 todo.js 文件
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
};
})();
here is my script.js file
这是我的 script.js 文件
$(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);
});
});
here is html code
这是 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>
回答by James Allardice
You are immediately executing the function that is assigned to Todo. That function returns an object, so Todorefers to the returned object, not a function (hence the "Not a function" error).
您正在立即执行分配给 的功能Todo。该函数返回一个对象，因此Todo指的是返回的对象，而不是函数（因此出现“不是函数”错误）。
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
Now, Todorefers to a constructor function which you can invoke with the newoperator, as you are currently trying to do.
现在，Todo指的是一个构造函数，您可以使用new操作符调用它，就像您目前正在尝试做的那样。
Also note that this pattern will result in every instance of Todohaving a separate copy of each method, which isn't very efficient. It would be better to declare the methods as properties of the prototype:
还要注意，这种模式将导致Todo每个方法的每个实例都有一个单独的副本，这不是很有效。最好将方法声明为 的属性prototype：
var Todo = function () {
//Initialize the Todo instance
};
Todo.prototype.add = function () {
//Do stuff
};
Now, all instance of Todowill share a single copy of the methods.
现在，所有实例都Todo将共享方法的单个副本。
