Typescript "this" внутри метода класса

Я знаю, что это, вероятно, болезненно основное, но мне трудно обернуть вокруг него голову. 

class Main
{
     constructor()
     {
         requestAnimationFrame(this.update);  //fine    
     }

     update(): void
     {
         requestAnimationFrame(this.update);  //error, because this is window
     }

}

похоже, что мне нужен прокси-сервер, поэтому давайте скажем, используя Jquery

class Main
{
     constructor()
     {
         this.updateProxy = $.proxy(this.update, this);
         requestAnimationFrame(this.updateProxy);  //fine    
     }

     updateProxy: () => void
     update(): void
     {
         requestAnimationFrame(this.updateProxy);  //fine
     }

}

но исходя из фона Actionscript 3, я не совсем уверен, что здесь происходит. Извините, я не уверен, где начинается Javascript и заканчивается TypeScript.

updateProxy: () => void

кроме того, я не уверен, что делаю это правильно. Последнее, чего я хочу, это большая часть моего класса имеет функцию a (), к которой необходимо получить доступ с помощью aProxy() как я чувствую, что пишу одно и то же дважды? Это нормально?

51
jquery proxy-classes this typescript

5 ответов

если вы хотите this захваченный способ TypeScript сделать это с помощью функций стрелки. Цитируя Андерса:

на this в функциях стрелки лексически ограничен

вот как мне нравится использовать это в своих интересах:

class test{
    // Use arrow functions
    func1=(arg:string)=>{
            return arg+" yeah" + this.prop;
    }
    func2=(arg:number)=>{
            return arg+10 + this.prop;
    }       

    // some property on this
    prop = 10;      
}

посмотреть это в TypeScript Playground

вы можете видеть, что в сгенерированном JavaScript this плен за пределами функции звоните:

var _this = this;
this.prop = 10;
this.func1 = function (arg) {
    return arg + " yeah" + _this.prop;
};

так this значение внутри вызова функции (которая может быть window) не будет использоваться.

чтобы узнать больше: "понимание this in TypeScript " (4:05) – YouTube

79

Если вы напишете свои методы так, " это " будет рассматриваться так, как вы ожидаете.

class Main
{
    constructor()
    {
        requestAnimationFrame(() => this.update());
    }

    update(): void
    {
        requestAnimationFrame(() => this.update());
    }
}

другой вариант-привязать " это " к вызову функции:

class Main
{
    constructor()
    {
        requestAnimationFrame(this.update.bind(this));
    }

    update(): void
    {
        requestAnimationFrame(this.update.bind(this));
    }
}
16

проблема возникает, когда вы передаете функцию в качестве обратного вызова. К моменту выполнения обратного вызова значение "this" могло измениться на окно, элемент управления, вызывающий обратный вызов, или что-то еще.

убедитесь, что вы всегда используете лямбда-выражение в точке передачи ссылки на вызываемую функцию. Например

public addFile(file) {
  this.files.push(file);
}
//Not like this
someObject.doSomething(addFile);
//but instead, like this
someObject.doSomething( (file) => addFile(file) );

это компилируется к чему-то вроде

this.addFile(file) {
  this.files.push(file);
}
var _this = this;
someObject.doSomething(_this.addFile);

потому что функция addFile вызывается на ссылка на конкретный объект (_this) не использует "this" вызывающего, а вместо этого значение _this.

4

см. страницу 72 спецификации языка typescript https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.pdf?raw=true

Выражение Функции Стрелки

пример

class Messenger {
 message = "Hello World";
 start() {
 setTimeout(() => alert(this.message), 3000);
 }
};
var messenger = new Messenger();
messenger.start();

использование выражения функции стрелки заставляет обратный вызов иметь то же самое, что и окружающий метод "start". Запись обратного вызова в качестве стандартного выражения функции он становится надо вручную организуйте доступ к окружающему этому, например, скопировав его в локальная переменная:

это фактический сгенерированный Javascript:

class Messenger {
 message = "Hello World";
 start() {
 var _this = this;
 setTimeout(function() { alert(_this.message); }, 3000);
 }
};
4

короче, ключевое слово this всегда ссылается на объект, который вызвал функцию.

в Javascript, поскольку функции являются просто переменными, вы можете передавать их.

пример:

var x = {
   localvar: 5, 
   test: function(){
      alert(this.localvar);
   }
};

x.test() // outputs 5

var y;
y.somemethod = x.test; // assign the function test from x to the 'property' somemethod on y
y.test();              // outputs undefined, this now points to y and y has no localvar

y.localvar = "super dooper string";
y.test();              // outputs super dooper string

когда вы делаете следующее с jQuery:

$.proxy(this.update, this);

то, что вы делаете, переопределяет этот контекст. За кулисами jQuery будет guive вам это:

$.proxy = function(fnc, scope){
  return function(){
     return fnc.apply(scope);  // apply is a method on a function that calls that function with a given this value
  }
};
1