typescript - 防止 "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 关键字绑定(bind)到类/对象。

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

var _this = this;

Trick，这是一种古老的 JavaScript 模式。