0

次のような Modal クラスを作成しました。

export class Modal {
        link: Link;
        constructor (link: Link) {
            this.link = link;
        }
        create() {
            this.link.Modal.$Modal = $.modal({ });
        }
        addSubmit() {
            this.link.Modal.$Form.submit(function () {
                var a = this.link;
                submitHandler(this.link);
                return false;
            });
        }
}

私が使用しているコードは次のとおりです。

var modal = new Modal(link);
modal.create();
modal.addSubmit();

ここに問題があります。リンクをパラメーターとして submitHandler 関数に渡したいと思います。しかし、そこにはないようです。また、「var a = this.link」という行ですべてを確認すると、変数「a」、「this」、および「link」にカーソルを合わせると、すべて「any」と表示されるようです。

4

1 に答える 1

4

JavaScript スコープを発見しました。最初は混乱する可能性があります。

JavaScript は機能的にスコープされています。これは、変数が宣言されている関数に属していることを意味します。

変数が関数の外で宣言されている場合、JavaScript はチェーンをたどって変数を見つけようとします。

コードを入力するコンテキストが、コードが呼び出されるコンテキストではない場合、これは混乱を招きます。あなたの場合、thissubmit 関数のコンテキストでは、送信される要素 (フォーム要素など) があります。submit 関数を書くクラスではありません。

動作するはずのアップデートは次のとおりです。

export class Modal {
    link: Link;
    constructor (link: Link) {
        this.link = link;
        this.link.Modal.$Modal = $.modal({ });
    }

    addSubmit() {
        var _this = this;
        this.link.Modal.$Form.submit(function () {
            var a = _this.link;
            submitHandler(_this.link);
            return false;
        });
    }
}

この例ではthis、オーバーライドされない名前の変数を変数に入れて、JavaScript ランタイムがそれを見つけるまで検索を停止しないようにします。this(フォーム要素としてローカルに定義されるため、すぐに検索を停止します)。ローカルの JavaScript は存在​​しない_thisため、クラスを表す変数が見つかるまでチェーンをたどります。

これを行うための TypeScript の短縮形もあり、上記で手書きしたものと同じ JavaScript になります。

export class Modal {
    constructor (public link: Link) {
        this.link.Modal.$Modal = $.modal({ });
    }

    addSubmit() {
        this.link.Modal.$Form.submit(() => {
            var a = this.link;
            submitHandler(this.link);
            return false;
        });
    }
}

最後に、関数の呼び出しが特定の順序で機能することに依存するコードの呼び出しは望ましくありません。これは、クラスの内部動作を公開する例であるため、クラスの使用法を次のように更新しました。

var modal = new Modal(link);
modal.addSubmit();

私はそれaddSubmitがオプションであると仮定しています - それ以外の場合は、呼び出し元のコードがそれについて知る必要なく、Modal クラスもそれを行う必要があります。

于 2012-11-15T14:31:55.397 に答える