2017-03-12 1 views
3

b2 et b3 ne déclenchent pas les fonctions du prototype et aucune erreur n'est générée? Comment accomplit-on l'appel de fonctions prototypes à la mode?objet javascript prototype appel

<html> 
 
<head> 
 

 
<script type="text/javascript"> 
 
\t function newObj(){ 
 
\t \t this.obj_val= 7; 
 
\t } 
 
\t var trigger_f0 = function(){ 
 
\t \t alert("here 0"); \t \t \t \t \t \t \t \t \t \t // trigger FINE! (ok) 
 
\t } 
 
\t newObj.prototype.trigger_f2 = function(){ // no triggering off click event 
 
\t \t alert("here 2"); 
 
\t } 
 
\t newObj.prototype.trigger_f3 = function(){ // not triggering off click event 
 
\t \t alert("obj value:" + newObj.obj_val); 
 
\t } 
 

 
\t var init = function(){ 
 
\t \t b3.addEventListener('click', newObj.trigger_f3, false); 
 
\t \t b2.addEventListener('click', newObj.trigger_f2, false); 
 
\t \t b1.addEventListener('click', trigger_f0, false); 
 
\t } 
 

 
\t window.addEventListener('DOMContentLoaded', init, false); 
 
\t </script> 
 
\t 
 
\t </head> 
 
<body> 
 
<button id="b1">B1</button> 
 
<button id="b2">B2</button> 
 
<button id="b3">B3</button> 
 

 
</body> 
 

 
</html>

+2

À un certain moment, vous devez utiliser 'newobj()' construire en fait un objet. En l'état, vous venez de créer une fonction constructeur. Appelez-le avec 'new newObj()' et cela vous donnera un objet connecté à votre prototype. – Pointy

+0

'console.log (newObj.trigger_f3)' –

+0

Oui c'était le problème - mon constructeur était juste cela. var a = new newObj; travaillé! –

Répondre

2

Vous devez créer une instance comme pour obtenir un objet de la fonction constructeur

var a=new newObj() 

puis accéder aux propriétés. et changer newObj.obj_val à

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>

0

Lorsque vous créez une fonction et ajouter des propriétés à son .prototype, la fonction ne les reçoit pas. Au lieu de cela, lorsque vous créez une instance/objet en utilisant cette fonction en tant que constructeur, cet objet obtiendra les fonctions.

function foo() {} 
foo.prototype.fn = function(){} 

var x = new foo() 

console.log(foo.fn) // undefined 
console.log(x.fn) // function(){} 

Dans votre cas,

// ... 

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