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>

At some point you need to use `newObj()` to actually construct an object. As it is, you've just created a constructor function. Call it with `new newObj()` and that'll give you an object that's hooked up to your prototype. — Pointy, Mar 12 '17 at 20:42
Yes that was the issue - my constructor was just that. var a = new newObj; worked! — Michael Nelles, Mar 12 '17 at 21:47
I think you are not familiar with the concept of "prototype" in JS. I'd recommend going through [this article](http://www.javascripttutorial.net/javascript-prototype/). It will help you alot in the long run — zhirzh, Mar 13 '17 at 05:27

Hemant · Accepted Answer · 2017-03-12T20:57:51.413

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>

score 0 · Answer 2 · answered Mar 13 '17 at 05:26

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);

javascript object prototype call

2 Answers2