[解決済み] ES6オブジェクトのメソッド:アロー関数の使用
質問
ES6では、これらは両方とも合法です。
var chopper = {
owner: 'Zed',
getOwner: function() { return this.owner; }
};
と、省略記法として
var chopper = {
owner: 'Zed',
getOwner() { return this.owner; }
}
新しい矢印の関数も使えるのでしょうか?試しに
var chopper = {
owner: 'John',
getOwner: () => { return this.owner; }
};
または
var chopper = {
owner: 'John',
getOwner: () => (this.owner)
};
メソッドにアクセスできないことを示唆するエラーメッセージが表示されます。
this
. これは単なる構文の問題なのでしょうか、それともES6オブジェクトの内部でfat-arrowメソッドを使用することはできないのでしょうか?
どのように解決するのですか?
アロー関数は、単に昔ながらの関数の短縮版として、あらゆる場面で使われるように設計されているわけではありません。を使った関数の構文を置き換えるためのものではありません。
function
キーワードを使用する関数構文を置き換えるものではありません。アロー関数の最も一般的な使用例は、短い "ラムダ" として、再定義しないことです。
this
を再定義しない、短い "ラムダ" として使用され、ある関数へのコールバックとして関数を渡すときによく使われます。
アロー関数はオブジェクトのメソッドを書くのに使うことはできません。なぜなら、あなたが見つけたように、アロー関数は
this
で囲まれているため
this
は、オブジェクトを定義したときのものです。ということになります。
// Whatever `this` is here...
var chopper = {
owner: 'Zed',
getOwner: () => {
return this.owner; // ...is what `this` is here.
}
};
オブジェクトにメソッドを書きたい場合、単純に従来の
function
構文、または ES6 で導入されたメソッド構文を使用します。
var chopper = {
owner: 'Zed',
getOwner: function() {
return this.owner;
}
};
// or
var chopper = {
owner: 'Zed',
getOwner() {
return this.owner;
}
};
(両者には小さな違いがありますが、重要なのはあなたが
super
で
getOwner
をコピーした場合、あるいは
getOwner
を別のオブジェクトにコピーした場合)。
es6 メーリングリストでは、似たような構文を持つ矢印関数にひねりを加えることについての議論がありました。
this
. しかし、この提案は、単なるシンタックスシュガーであり、人々が数文字をタイプするのを節約することを可能にし、既存の関数構文に対する新しい機能を提供しないため、評判が良くありませんでした。トピックを参照してください。
非拘束矢印関数
.
関連
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] アロー関数」と「ファンクション」は同じものですか?
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】Node.jsのrequireとES6のimport/exportを使い分ける。
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] ECMAScriptとは?
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ