Question

最近我决定将我的代码转换为typescript，这导致了将this从JavaScript替换为TypeScript的问题。

这是我正在努力的代码。打字稿：

/// <reference path="../typings/tsd.d.ts" />

class FormAjaxSubmit {

    form:JQuery;
    opt:any;

    constructor(element:string) {
        this.form = $(element);
        this.opt  = {
            boxID  : "#info",
            invData: {
                tag    : "[data-invalid]",
                tagTrue: "[data-invalid='true']"
            },
            msg    : {
                success: "",
                field  : ""
            }
        };
        // Even Listeners
        this.form
            .on('focusout', "[data-invalid]", e => {
                console.log(this); // outputs form.ajax object instead of current field with data-invalid 
                this.formVisuals(); // this method needs to be accessible too along with function's this
                e.preventDefault();
            });
    }

    private formVisuals() {
    }

}


$(() => {
    // Finally, we kick things off by creating the **App**.
    new FormAjaxSubmit("form.ajax");
});

我理解为什么会发生这种情况，因为this被打字稿分配给主类。所以它只是在顶层创建var _this = this并继续在整个代码中使用，这阻止我使用如下的旧JavaScript样式：

$("form.ajax").on("focusout", [data-invalid], function(e) { 
     console.log(this) // it outputs the current field with data-invalid tag instead of the form object itself.
     e.preventDefault();
}

所以问题是在打字稿中替换JavaScript this的方法。

Answer 1

函数表达式也存在于TypeScript中。它们不是“旧的JavaScript风格”。

this.form.on("focusout", "[data-invalid]", function(e) { 
     console.log(this); // works
     e.preventDefault();
});

基本上，在这些情况下不要使用箭头功能。

如果你想同时使用类和元素，那么你可以这样做：

this.form.on("focusout", "[data-invalid]", (e) => { 
     this;     // class
     e.target; // element
});

或者如果你想继续使用this作为元素而不是类，你可以这样做：

let self = this;
this.form.on("focusout", "[data-invalid]", function(e) {
     self; // class
     this; // element
});

我建议保留this作为课程，并使用箭头方法......通过保持this的含义保持一致来减少混淆。

将Javascript替换为Typescript

1 个答案: