問題タブ [arrow-functions]

私は自分のプロジェクトを ES2015 を使用するように変換していますが、jQuery の .on イベント ハンドラーに関しては、「this」キーワードを自然に処理するために問題が発生しました。

これが私のコード例です：

ES2015 を使用するために上記のコードの最初の行を書き直す方法がわかりません。

関数 handlerEditBtnClick では、「this」をクラスにする必要がありますが、クリックされたボタンへのアクセスも必要です。

私の試行 (上記のコードの 2 行目) では、クリックされたボタン DOM 要素にアクセスできません。少なくとも、アクセスすることは考えられません。

ありがとう、

ルーク

編集 これは handlerEditBtnClick() 関数です。

「これ」が2つの異なるものである必要がある場所がわかります.. this.editItem();以外のhandlerEditBtnClick内からeditItem関数を呼び出す方法が完全にはわかりません。

入力しやすいように、名前は単なる一般的な名前であることに注意してください

これが Node.js コンソール (4.1.1 および 5.3.0 でテスト済み) では機能するのに、ブラウザー (Chrome でテスト済み) では機能しないのはなぜですか?

このコード ブロックは、ログを記録する無名関数を作成して呼び出す必要がありますOk。

また、上記はNode.js で機能しますが、これは機能しません。

これも：

パラメータが追加されると、実際にSyntaxErrorすぐに呼び出す部分で a がスローされるのは奇妙です。

またはthis.variableのような RxJS 関数内を除いて、コンポーネントの任意の部分で変数にアクセスするために使用できます。subscribe()catch()

以下の例では、プロセスの実行後にメッセージを出力したいと考えています。

を実行するdoSomething()と、undefinedになります。このシナリオは、ローカル変数を使用して解決できます。

これは に関連していると思いますが、 の内部にthisアクセスできないのはなぜですか?this.messagesubscribe()

react-rocket-boilerplateから構築されたプロジェクトにmaterial-uiコンポーネントを取り込もうとしています。

次のエラーが表示されます。

[23:55:11] gulp-notify: [コンパイル エラー] C:/react-rocket-boilerplate/app/js/components/Sidebar.js: ファイルの解析中に予期しないトークン (13:15): C:\react-ロケットボイラープレート\app\js\components\Sidebar.js

注: Sidebar.js は、material-ui ドキュメント サイトで提供されている最初の leftNav の例 (「SIMPLE CONTROLLED LEFTNAV」) の正確なコピーであり、コンポーネント名だけが変更されています。

Sidebar.js は次のとおりです。

問題の行は次のとおりです。

(13:15)の文字は「handleToggle」の直後のスペースです。

代わりに次の構文を使用できます。

...エラーを解決しますが、呼び出されたときに「this」にアクセスできません。

アロー関数は、このコンテキストで使用するとコンパイルされます。

役立つ可能性のあるすべての追加情報を喜んで提供させていただきますので、お知らせください。

また...コンポーネント定義のためのこれらの異なる構文/形式の用語はありますか?

TypeScript v1.7.5 を使用すると、 のコンテキストがthis混乱しているか、正しくトランスパイルされていないように見えます。または、何かが足りない。アロー関数の内側は、関数の外側thisと同じものを参照していると思っていたのに、変化しています。this私は状況をデバッグしました。結果は以下のコメントに示されています。

ソースTS

結果の JS (ES5)

結果の JS が次のようにコールバックをバインドすることを期待していました。

thisコールバック内の値を保持する必要があるため、コード全体でアロー関数を使用しています。しかし、なぜこれが正しく機能していないように見えるのか、私は混乱しています。

ノート

thisアロー関数内で具体的に使用しようとする場合に限り、 TypeScript は次の回避策を作成します。

わかりました。でも、bind を使用したほうがよいのではないでしょうか。これは、アロー関数内から関数を呼び出す問題をまだ解決していません。これらの関数呼び出しは のコンテキストを失いますがthis、これは適切な動作ではありません。

For some reason, ES6 code that runs well in the current Chrome or Firefox cannot run in Safari - for example, arrow functions. As I know, Safari has ok support for ES6. Is there something that needs to be done?

Example:

Or if it is a full .html file:

Safari (I am using 9.0.3) keeps on giving SyntaxError: Unexpected token '>'

コードを JSDoc (EcmaScript 2015、WebStorm 12 Build 144.3357.8) で文書化しようとしています。

パラメータを文書化したいアロー関数があります。この2つの例は機能します（オートコンプリートを取得します）：

forEachしかし、たとえば、関数内のアロー関数をドキュメント化したい場合、オートコンプリートが機能しません (以下のすべて):

誰かがこの仕事を手に入れることができましたか？

これは、ES2015 で名前付きアロー関数を作成するにはどうすればよいですか? のバリエーションです。質問ですが、具体的な目的は、関数オブジェクトに名前を付けて、Chrome CPU プロファイラーで使用できるようにすることです。

私は次のことを試しました：

しかし、私が何をしても、CPUプロファイラーはそれを(anonymous function).

興味深いことに、エラーをスローすると、スタック トレースはdisplayNameプロパティを使用します。