防止"this"被重写TypeScript编译

Question

我正在使用Polymer 1.5,我真的需要"this"变量不要映射到外面.我知道打字稿是出于某些正当理由而这样做的.

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"？

PS:我刚才知道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');
            }
        });
    }
};

箭头函数与常规函数语法的不同之处在于,在箭头函数内,该关键字被绑定到类/对象.

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

var _this = this;

Trick,这是一种旧的JavaScript模式.