防止"this"被改写TypeScript编译

Question

我正在使用 Polymer 1.5，我确实需要 "this" 变量不要映射到外部。我知道 typescript 会为一些 valid reasons 做这个。

declare var Polymer: any;
var MyBehavior = MyBehavior || {};

MyBehavior.FormSubmit = {
    _setInvalid: (query, status) => {
        var elems = Array.prototype.slice.call(Polymer.dom(this.root).querySelectorAll(query));
        elems.forEach(element => {
            if (status) {
                element.setAttribute('invalid', status);
            }
            else {
                element.removeAttribute('invalid');
            }
        });
    }
};

然后将映射到：

$this = this; 
var MyBehavior = MyBehavior || {};

MyBehavior.FormSubmit = {
    _setInvalid: (query, status) => {
        var elems = Array.prototype.slice.call(Polymer.dom($this.root).querySelectorAll(query));
        elems.forEach(element => {
            if (status) {
                element.setAttribute('invalid', status);
            }
            else {
                element.removeAttribute('invalid');
            }
        });
    }
};

看到上面的变量了吗？这将破坏代码。如果我可以访问 "this.root" 或等效项，那将创造奇迹。有没有办法阻止 TypeScript 移动 "this"?

P.S：我刚知道 PolymerTS！不幸的是，我无法让它从 Polymer 对象调用行为。

Answer 1

请注意，我使用的不是箭头函数，而是常规函数

MyBehavior.FormSubmit = {
    _setInvalid: function(query, status) {
        var elems = Array.prototype.slice.call(Polymer.dom(this.root).querySelectorAll(query));
        elems.forEach(element => {
            if (status) {
                element.setAttribute('invalid', status);
            }
            else {
                element.removeAttribute('invalid');
            }
        });
    }
};

箭头函数与常规函数语法的不同之处之一是，在箭头函数内部，this 关键字绑定到 class/object。

为了确保在将箭头函数 (ECMAScript 6) 转换为 ECMAScript 5 时 "this" 的含义不会改变，typescript 编译器使用

var _this = this;

技巧，这是一个古老的 JavaScript 模式。

防止"this"被改写TypeScript编译

Prevent "this" from being rewritten TypeScript compilation

typescript

polymer

polymer-1.0