javascript object prototype call
Question
b2 and b3 are not triggering the prototype functions and no errors are generated? How does one accomplish calling prototype functions in the fashion?
<html> <head> <script type="text/javascript"> function newObj(){ this.obj_val= 7; } var trigger_f0 = function(){ alert("here 0"); // trigger FINE! (ok) } newObj.prototype.trigger_f2 = function (){ // no triggering off click event alert("here 2"); } newObj.prototype.trigger_f3 = function (){ // not triggering off click event alert("obj value:" + newObj.obj_val); } var init = function(){ b3.addEventListener('click', newObj.trigger_f3, false); b2.addEventListener('click', newObj.trigger_f2, false); b1.addEventListener('click', trigger_f0, false); } window.addEventListener('DOMContentLoaded', init, false); </script> </head> <body> <button id="b1">B1</button> <button id="b2">B2</button> <button id="b3">B3</button> </body> </html>
2 answers
solution1
2 2017-03-12 20:52:05
You need to create an instance like to get an object out of the constructor function
var a=new newObj()
and then access the properties. and change newObj.obj_val to
new newObj().obj_val
function newObj() { this.obj_val = 7; } var trigger_f0 = function() { alert("here 0"); // trigger FINE! (ok) } newObj.prototype.trigger_f2 = function() { // no triggering off click event alert("here 2"); } newObj.prototype.trigger_f3 = function() { // not triggering off click event alert("obj value:" + new newObj().obj_val); } var a = new newObj(); b3.addEventListener('click', a.trigger_f3, false); b2.addEventListener('click', a.trigger_f2, false); b1.addEventListener('click', trigger_f0, false);
<body> <button id="b1">B1</button> <button id="b2">B2</button> <button id="b3">B3</button> </body>
solution2
0 2017-03-13 05:26:24
When you create a function and add properties to its .prototype , the function doesn't receive them.
Instead, when you create an instance/object using that function as constructor, that object will get the functions.
function foo() {}
foo.prototype.fn = function(){}
var x = new foo()
console.log(foo.fn) // undefined
console.log(x.fn) // function (){}
In your case,
// ...
var obj = newObj();
var init = function(){
b3.addEventListener('click', obj.trigger_f3, false);
b2.addEventListener('click', obj.trigger_f2, false);
b1.addEventListener('click', trigger_f0, false);
}
window.addEventListener('DOMContentLoaded', init, false);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.