Чи існує псевдонім для 'this' у TypeScript?

Я намагався написати клас у TypeScript, який має визначений метод, який діє як зворотний виклик обробника події до події jQuery.

class Editor {
    textarea: JQuery;

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

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

В обробнику подій onFocusIn TypeScript бачить 'this' як 'this' класу. Однак jQuery замінює це посилання і встановлює його як об'єкт DOM, пов'язаний з подією.

Одним із варіантів є визначення лямбди в конструкторі як обробника подій, і в цьому випадку TypeScript створює своєрідне закриття із прихованим псевдонімом _this.

class Editor {
    textarea: JQuery;

    constructor(public id: string) {
        this.textarea = $(id);
        this.textarea.focusin((e) => {
            var height = this.textarea.css('height'); // <-- This is good.
        });
    }
}

Моє питання полягає в тому, чи є інший спосіб отримати доступ до цього посилання в обробнику подій на основі методу за допомогою TypeScript, щоб подолати цю поведінку jQuery?

Отож, як зазначено, не існує механізму TypeScript для забезпечення того, щоб метод завжди був прив’язаний до його thisвказівника (і це не просто проблема jQuery.) Це не означає, що немає досить простого способу вирішення цієї проблеми. Вам потрібно створити проксі-сервер для вашого методу, який відновлює thisпокажчик перед викликом зворотного виклику. Потім вам потрібно обернути свій зворотний виклик цим проксі-сервером, перш ніж передавати його у подію. jQuery має вбудований механізм для цього jQuery.proxy(). Ось приклад наведеного вище коду за допомогою цього методу (зверніть увагу на доданий $.proxy()дзвінок).

class Editor { 
    textarea: JQuery; 

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

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

Це розумне рішення, але я особисто виявив, що розробники часто забувають включити виклик проксі, тому я придумав альтернативне рішення цієї проблеми на основі TypeScript. Використовуючи, HasCallbacksклас нижче всього, що вам потрібно зробити, це вивести ваш клас, HasCallbacksі тоді будь-які методи, префіксовані 'cb_', матимуть thisпостійно пов’язаний вказівник. Ви просто не можете викликати цей метод за допомогою іншого thisвказівника, що в більшості випадків є кращим. Будь-який механізм працює, тому саме той, який вам зручніший у використанні.

class HasCallbacks {
    constructor() {
        var _this = this, _constructor = (<any>this).constructor;
        if (!_constructor.__cb__) {
            _constructor.__cb__ = {};
            for (var m in this) {
                var fn = this[m];
                if (typeof fn === 'function' && m.indexOf('cb_') == 0) {
                    _constructor.__cb__[m] = fn;                    
                }
            }
        }
        for (var m in _constructor.__cb__) {
            (function (m, fn) {
                _this[m] = function () {
                    return fn.apply(_this, Array.prototype.slice.call(arguments));                      
                };
            })(m, _constructor.__cb__[m]);
        }
    }
}

class Foo extends HasCallbacks  {
    private label = 'test';

    constructor() {
        super();

    }

    public cb_Bar() {
        alert(this.label);
    }
}

var x = new Foo();
x.cb_Bar.call({});

Сфера thisзберігається при використанні синтаксису функції стрілки () => { ... }- ось приклад, взятий з TypeScript для програмістів JavaScript .

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

Зверніть увагу, що це this.textдає вам, Text from outer functionоскільки синтаксис функції стрілки зберігає "лексичний обсяг".

Як описано в деяких інших відповідях, використання синтаксису стрілки для визначення функції змушує посилання thisзавжди посилатися на клас, що вкладає.

Отже, щоб відповісти на ваше запитання, ось два простих обхідних шляхи.

Зверніться до методу, використовуючи синтаксис стрілки

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

Визначте метод, використовуючи синтаксис стрілки

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

Ви можете прив'язати функцію-член до її екземпляра в конструкторі.

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
    }
}

Або ж просто прив’яжіть його, коли додаєте обробник.

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

Спробуйте це

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
    }

}

Рішення Стівена Ікмана зручне, але неповне. Відповіді Денні Бекета та Сема коротші та більш ручні, і вони не вдаються в тому самому загальному випадку, коли є зворотний виклик, який потребує як динамічного, так і лексичного охоплення "цього" одночасно. Перейти до мого коду, якщо моє пояснення нижче TL; DR ...

Мені потрібно зберегти "this" для динамічного масштабування для використання із зворотними викликами бібліотеки, і мені потрібно мати "this" з лексичним масштабуванням до екземпляра класу. Я стверджую, що найелегантніше передавати екземпляр у генератор зворотних викликів, фактично дозволяючи закрити параметр над екземпляром класу. Компілятор повідомляє, якщо ви пропустили це. Я використовую домовленість про виклик лексично визначеного параметра "externalThis", але "self" або інше ім'я може бути кращим.

Використання ключового слова "this" викрадено з світу OO, і коли TypeScript прийняв його (із 6 специфікацій ECMAScript, я припускаю), вони поєднали поняття з лексичним масштабом та поняття з динамічним масштабом, коли метод викликається іншим суб'єктом . Я трохи збентежений цим; Я віддав би перевагу ключовому слову "self" у TypeScript, щоб я міг видалити екземпляр об'єкта з лексичним масштабом. Крім того, JS може бути перевизначений, щоб вимагати явний параметр "викликає" першої позиції, коли це потрібно (і, таким чином, розбивати всі веб-сторінки одним махом).

Ось моє рішення (вирізане з великого класу). Ознайомтеся особливо з методом виклику методів та, зокрема, тілом "dragmoveLambda":

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

}

TypeScript не надає жодного додаткового способу (крім звичайних засобів JavaScript) повернутися до `` справжнього '' thisпосилання, крім thisзручності перепризначення, передбаченої синтаксисом лямбда-стрілки жирової стрілки (що дозволено з точки зору back-compat, оскільки жодного коду JS немає може використовуватися =>вираз).

Ви можете опублікувати пропозицію на сайті CodePlex, але з точки зору дизайну мови тут, мабуть, мало що може статися, оскільки будь-яке розумне ключове слово, яке компілятор може надати, може вже використовуватися наявним кодом JavaScript.

Ви можете використовувати функцію js eval: var realThis = eval('this');

Я зіткнувся з подібною проблемою. Я думаю, ви можете використовувати .each()у багатьох випадках, щоб зберегти thisяк інше значення для наступних подій.

Шлях JavaScript:

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

Шлях TypeScript:

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

Сподіваюся, це комусь допомагає.

Ви можете зберегти своє посилання на thisіншу змінну .. selfможливо, і отримати доступ до посилання таким чином. Я не використовую машинопис, але це метод, який був успішним для мене з ванільним javascript у минулому.

Ознайомтесь із цим дописом у блозі http://lumpofcode.blogspot.com/2012/10/typescript-dart-google-web-toolkit-and.html , він містить детальне обговорення методів організації дзвінків у класах TypeScript та між ними.

Рішення є набагато простішим, ніж усі вищезазначені відповіді. В основному ми повертаємося до JavaScript, використовуючи функцію ключового слова замість того, щоб використовувати конструкцію '=>', яка перекладе 'this' у клас 'this'

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