Er det et alias for 'dette' i Loggfila?

Omfanget av thisbevares ved bruk av pilfunksjonen syntaks () => { ... }- her er et eksempel hentet fra maskinskrevet manuskript for Javascript-programmerere .

var ScopeExample = { 
  text: "Text from outer function", 
  run: function() { 
    setTimeout( () => { 
      alert(this.text); 
    }, 1000); 
  } 
};

Merk at this.textgir deg Text from outer functionfordi pilen funksjonen syntaks bevarer "leksikalsk omfang".

Som dekket av noen av de andre svarene, ved hjelp av pil syntaks for å definere en funksjon forårsaker referanser til thiså alltid forholde seg til omsluttende klassen.

Så for å svare på spørsmålet ditt, her er to enkle løsninger.

Henvisningsfremgangsmåten ved hjelp av pilen syntaks

constructor(public id: string) {
    this.textarea = $(id);
    this.textarea.focusin(e => this.onFocusIn(e));
}

Angir metoden ved hjelp av pilen syntaks

onFocusIn = (e: JQueryEventObject) => {
    var height = this.textarea.css('height');
}

Man kan binde et medlem funksjon til dens forekomst i konstruktøren.

class Editor {
    textarea: JQuery;

    constructor(public id: string) {
        this.textarea = $(id);
        this.textarea.focusin(onFocusIn);
        this.onFocusIn = this.onFocusIn.bind(this); // <-- Bind to 'this' forever
    }

    onFocusIn(e: JQueryEventObject) {
        var height = this.textarea.css('height');   // <-- This is now fine
    }
}

Alternativt kan du bare binde den når du legger behandleren.

        this.textarea.focusin(onFocusIn.bind(this));

Steven Ickman løsning er hendig, men ufullstendig. Danny Becket og Sams svarene er kortere og mer manuell, og mislykkes i samme generelle tilfellet av å ha en tilbakeringing som trenger både dynamisk og leksikalsk scoped "dette" på samme tid. Hopp til min kode hvis min forklaring nedenfor er TL; DR ...

Jeg trenger å bevare "dette" for dynamisk scoping for bruk med bibliotektilbakeanrop, og jeg må ha en "dette" med leksikalsk scoping til klassen forekomst. Jeg mener at det er mest elegante å passere forekomsten inn i en tilbakeringings generator, effektivt slik at parameteren lukke over klasse forekomst. Kompilatoren forteller deg om du ikke rakk å gjøre det. Jeg bruker en konvensjon for å kalle de leksikalsk scoped parameter "outerThis", men "selv" eller et annet navn kan bli bedre.

Bruken av "dette" søkeord er stjålet fra OO verden, og når Loggfila adoptert det (fra ECMAScript 6 specs jeg antar), de smeltet sammen en leksikalsk scoped konsept og en dynamisk scoped konsept, når en metode kalles av en annen enhet . Jeg er litt fornærmet på dette; Jeg foretrekker en "self" søkeord i typescript, slik at jeg kan levere den leksikalske omfangs objekt eksempel ut av det. Alternativt JS kan bli omdefinert til å kreve en eksplisitt første-posisjon "som ringer" parameter når det er nødvendig (og dermed bryte alle websider i ett slag).

Her er min løsning (fjernet fra en stor klasse). Ta en titt spesielt på hvordan metodene er kalt, og kroppen av "dragmoveLambda" spesielt:

export class OntologyMappingOverview {

initGraph(){
...
// Using D3, have to provide a container of mouse-drag behavior functions
// to a force layout graph
this.nodeDragBehavior = d3.behavior.drag()
        .on("dragstart", this.dragstartLambda(this))
        .on("drag", this.dragmoveLambda(this))
        .on("dragend", this.dragendLambda(this));

...
}

dragmoveLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
    console.log("redefine this for dragmove");

    return function(d, i){
        console.log("dragmove");
        d.px += d3.event.dx;
        d.py += d3.event.dy;
        d.x += d3.event.dx;
        d.y += d3.event.dy; 

        // Referring to "this" in dynamic scoping context
        d3.select(this).attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

        outerThis.vis.selectAll("line")
            .filter(function(e, i){ return e.source == d || e.target == d; })
            .attr("x1", function(e) { return e.source.x; })
            .attr("y1", function(e) { return e.source.y; })
            .attr("x2", function(e) { return e.target.x; })
            .attr("y2", function(e) { return e.target.y; });

    }
}

dragging: boolean  =false;
// *Call* these callback Lambda methods rather than passing directly to the callback caller.
 dragstartLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void} {
        console.log("redefine this for dragstart");

        return function(d, i) {
            console.log("dragstart");
            outerThis.dragging = true;

            outerThis.forceLayout.stop();
        }
    }

dragendLambda(outerThis: OntologyMappingOverview): {(d: any, i: number): void}  {
        console.log("redefine this for dragend");

        return function(d, i) {
            console.log("dragend");
            outerThis.dragging = false;
            d.fixed = true;
        }
    }

}

Prøv dette

class Editor 
{

    textarea: JQuery;
    constructor(public id: string) {
        this.textarea = $(id);
        this.textarea.focusin((e)=> { this.onFocusIn(e); });
    }

    onFocusIn(e: JQueryEventObject) {
        var height = this.textarea.css('height'); // <-- This will work
    }

}

Du kan bruke js eval funksjon: var realThis = eval('this');

Loggfila gir ikke noen ekstra måte (utover den vanlige Javascript betyr) for å komme tilbake til den 'ekte' thisreferansen annet enn thisremapping praktiske følger i fettet pilen lambda syntaks (som er tillatt fra en back-compat perspektiv siden ingen eksisterende JS kode kan være ved hjelp av et =>uttrykk).

Du kan legge inn et forslag til CodePlex området, men fra et språk designperspektiv er det sannsynligvis ikke mye som kan skje her, siden enhver forstandig søkeord kompilatoren kan gi kan allerede være i bruk av bevart Javascript-kode.

Jeg har møtt en lignende problem. Jeg tror du kan bruke .each()i mange tilfeller å beholde thissom en annen verdi for senere hendelser.

Javascript måte:

$(':input').on('focus', function() {
  $(this).css('background-color', 'green');
}).on('blur', function() {
  $(this).css('background-color', 'transparent');
});

Loggfila måte:

$(':input').each((i, input) => {
  var $input = $(input);
  $input.on('focus', () => {
    $input.css('background-color', 'green');
  }).on('blur', () => {
    $input.css('background-color', 'transparent');
  });
});

Jeg håper dette hjelper noen.

Det er mye enklere løsning enn alle de ovennevnte svar. I utgangspunktet vi faller tilbake til Javascript ved å bruke stikkordet funksjon i stedet for å bruke '=>' konstruere noe som vil oversette 'dette' i klassen 'dette'

class Editor {
    textarea: JQuery;

    constructor(public id: string) {
        var self = this;                      // <-- This is save the reference
        this.textarea = $(id);
        this.textarea.focusin(function() {   // <-- using  javascript function semantics here
             self.onFocusIn(this);          //  <-- 'this' is as same as in javascript
        });
    }

    onFocusIn(jqueryObject : JQuery) {
        var height = jqueryObject.css('height'); 
    }
}

Sjekk ut dette blogginnlegget http://lumpofcode.blogspot.com/2012/10/typescript-dart-google-web-toolkit-and.html , den har en detaljert beskrivelse av teknikker for organisering samtaler innenfor og på tvers Loggfila klasser.

Du kan lagre referanse til thisi en annen variabel .. selfkanskje, og få tilgang til referansen på den måten. Jeg bruker ikke Loggfila, men det er en metode som har vært vellykket for meg med vanilje javascript i fortiden.