Kontext "Dies" von einer Funktion in eine andere hineingeben?

Question

Ich übe Ajax mit Formen, und .. Ich denke, versuchen, mich immer mehr zu verwirren, um zu lernen.

Dies macht vielleicht keinen Sinn, aber ich versuche, den Vor- und Nachnamen zu protokollieren, insbesondere über die Funktion conLog. Aber es zeigt sich als undefiniert, weil ich denke, dass der Kontext "dieses" nicht da ist, und ich bin mir nicht sicher, wie ich es einstellen soll. Ich schaffte es jedoch, es in den Ajax zu legen.

Also, wenn Sie das Protokoll öffnen, sagt die zweite Zeile undefined, während in der ersten die Eingabe aus dem ersten Formular protokolliert wird.

https://jsfiddle.net/2oLjqv7c/3/

Unter der Annahme, dass das Problem ist, wie kann ich "das" in CONLOG passieren?

danke im voraus! und ich fand ein paar Posts mit der gleichen Frage, aber seufz ... Ich denke, ich kann es nicht fassen, außer wenn es auf mein persönliches Problem angewendet wird (muss ich noch lernen, die Codes anderer Leute zu lesen, denke ich).

HTML

<form action="/echo/html/" id="form1" method="post"> 
    First Name: 
    <input type="text" value="first" id="firstName"> 
    <br/> 
    Last Name: 
    <input type="text" value="last" id="lastName"> 
    <br/> 
    <button type="submit" form="form1" value="submit">Submit</button> 
</form> 

Javascript/jQuery

function Display(el) { 
    this.el = el; 
    this.firstName = this.el.find("#firstName"); 
    this.lastName = this.el.find("#lastName"); 
    var confirmation = this; 
    this.el.on('submit', function(e) { 
     e.preventDefault(); 
    $.ajax('/echo/html/', { 
     success: function() { 
     console.log('success' + " " + this.firstName.val()); 
     this.conLog(this.firstName.val(), this.lastName.val()); 
     }, 
     error: function() { 
     console.log('fail'); 
     }, 
     timeout: 3000, 
     context: confirmation 
    }); 
    }); 

    this.conLog = function(first, last) { 
    this.first = this.first; 
    this.last = this.last; 
    console.log(this.first + " " + this.last); 
    }; 
} 

$(document).ready(function() { 
    Display($('#form1')); 
}) 

Answer 1

Sie brauchen nicht this zu passieren. Weil Sie bereits die Parameter first und last übergeben haben. Verwenden Sie einfach die direkt wie folgt aus:

this.conLog = function(first, last) { 
    console.log(first + " " + last); 
}; 

Hinweis änderte ich this.first und this.last nur first und last.

Answer 2

Ich denke, das ist das, was Sie suchen. Ich habe Ihre fiddle geändert, um den Namen in ein <p> Element auszugeben. ich gerade geändert, wie die Requisiten von consLog zugeordnet sind:

this.conLog = function(first, last) { 
    this.first = first; 
    this.last = last; 
    console.log(this.first + " " + this.last); 
    document.getElementById("name").innerHTML = this.first + " " + this.last; 
    }; 

Answer 3

So gibt es durchaus ein paar Möglichkeiten, dies zu erreichen ... eine der einfachsten ist var self = this; oben oder um zu setzen, wo Sie this.el = el; und egal haben, wie tief Sie Ihre Funktionen sind Sie immer eine Referenz darauf verwenden, indem Sie Nutzen des Funktionsumfangs von Javascript. Wenn Sie sagen, dass Sie lernen, schlage ich vor, dass Sie in Function.bind Function.call and Function.apply schauen, die alle auf Ihre Frage beziehen ... MDN ist immer ein großer Platz, um zu beginnen.