JavaScript OOPS Question

Question

Un débutant JavaScript ici. Je le code suivant:

function testObject(elem) { 
    this.test = "hi"; 
    this.val = elem; 
    console.log(this.test+this.val); 
    echo(); 

    function echo() { 
     console.log(this.test+this.val); 
    } 
} 

var obj = new testObject("hello"); 

Lorsqu'il est exécuté, je me attends « hihello » à deux fois dans la émis console. Au lieu de cela, il sort comme prévu la première fois mais retourne NaN la deuxième fois.

Je suis sûr qu'il me manque quelque chose ici. Je pensais que la fonction interne peut accéder aux vars tenus à l'extérieur. Quelqu'un peut-il me guider s'il vous plaît? Je suis plus un développeur d'interface utilisateur fonctionnel et n'ai pas beaucoup d'expérience avec le code OO.

Merci!

Answer 1

Le problème est que l'intérieur echo les points de valeur this à l'objet global, et this.test et this.val (qui font référence à window.test et window.val) sont undefined.

Vous pouvez définir la valeur this d'écho en invoquant comme:

echo.call(this); 

Cela arrive parce que vous invoquez la fonction par echo();, la valeur this est implicitement définie sur l'objet global.

Jetez un coup d'œil à this question pour savoir comment fonctionne la valeur this.

Edit: Pour pouvoir appeler juste echo(); vous persistez la valeur this du contexte de la fonction extérieure, il y a beaucoup de façons de le faire, par exemple:

//... 
var instance = this; // save the outer `this` value 
function echo(){ 
    console.log(instance.test+instance.val); // use it 
} 
echo(); 
//... 

Ou

Answer 2

Vous pouvez aussi le faire:

function testObject(elem) { 
    this.test = "hi"; 
    this.val = elem; 
    console.log(this.test+this.val); 

    this.echo = function() { 
     console.log(this.test+this.val); 
    } 
    this.echo(); 
} 

var obj = new testObject("hello"); 

Chaque fois que vous appelez this.echo() ou obj.echo(), this sera lié à l'objet appelant la fonction.

Answer 3

Personnellement, je trouve élégant de déclarer les méthodes de classe comme ceci:

function testObject(elem) { 
    this.test = "hi"; 
    this.val = elem; 
    this.echo(); 
} 

testObject.prototype = { 
    echo: function() { 
     console.log(this.test + this.val); 
    } 
} 

var obj = new testObject("hello");