オブジェクトイニシャライザー
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ メソッドが簡単につくれる
◆ プロパティのキーに式を書ける
◆ プロパティのキーに式を書ける
method definition
ES6 ではクラス定義が追加されましたが クラス構文を使わない人にも役立つメソッド定義方法がありましたクラスに興味がなくて クラス関係は調べてなかったので知ったのは最近です
var obj = {
es5: function(a){return a + 1},
es6af: a => a + 1,
es6md(a) {return a + 1}
}
es5: function(a){return a + 1},
es6af: a => a + 1,
es6md(a) {return a + 1}
}
ES6 では Arrow Function を使った関数定義と method definition の 2 つの方法が使えます
どちらでも function と書かなくて済むのが良いところです
オブジェクトのプロパティの場合はたいてい this を使うので Arrow Function にできないことが多いので method definition はうれしいものです
ですが 完全な syntax sugar ではなくて違いがあります
Arrow Function のほうは this や arguments が新規に作られなくて親のものを見れるというところです
そして両方に共通するのが コンストラクタになれないということです
つまり new するとエラーです
prototype プロパティも持っていません
(作っても new できるようにはなりません)
Arrow Function の方は自分自身に this でアクセスできないわけですから 仕方ないと思います
ですが method definition はできてもいいんじゃないのかなって思います
メソッドなんだし new はしないと思いますけどわざわざ削るようなところ?
内部的に Arrow Function で処理されてるのかなって思いましたが this と arguments はちゃんと作られていました
考えてみたら メソッドで this 使えなくするはずないですね
コンストラクタになれないと言っても new 演算子が使えないだけですから自分で prototype 用意して new の動きをすれば問題なしです
といっても Arrow Function の方は this が使えないのでコンストラクタで何かすることはできないです
また 関数じゃなくてジェネレータの場合は プロパティの名前の最初に * をつけると作れます
var o = {
*g(val){yield val + 1}
}
*g(val){yield val + 1}
}
computed property
これまでは オブジェクト定義時にオブジェクトのキーに変数は使えなかったです一度オブジェクトを作って 配列のようにアクセスしてプロパティを追加する必要がありました
var x = "abc"
var obj = {
x: function(){return 1}
}
console.log(obj.abc) // undefined
console.log(obj.x) // function (){}
obj[x] = function(){}
console.log(obj.abc) // function (){}
var obj = {
x: function(){return 1}
}
console.log(obj.abc) // undefined
console.log(obj.x) // function (){}
obj[x] = function(){}
console.log(obj.abc) // function (){}
ES6 ではキー名に変数が使えます
[] の中に式を書くと 評価されたものがキー名になります
"," を使う場合は () で囲む必要があります
var obj2 = {
["normal" + ~~(Math.random()*1000)]: a => a + 1,
["method" + ~~(Math.random()*1000)](a) {return a + 1},
[(location.href, "one")]: 1
}
console.log(obj2.one) // 1
console.log(obj2.method221(10)) // 11
["normal" + ~~(Math.random()*1000)]: a => a + 1,
["method" + ~~(Math.random()*1000)](a) {return a + 1},
[(location.href, "one")]: 1
}
console.log(obj2.one) // 1
console.log(obj2.method221(10)) // 11
[] でキー名を作っても関数が new できるものなら new できます
var obj3 = {
["a" + 1]: function(a){return a + 1}
}
new obj3.a1
// obj3 { }
["a" + 1]: function(a){return a + 1}
}
new obj3.a1
// obj3 { }
コンストラクタ名が obj3.a1 じゃなくて obj3 なのは Chrome の仕様みたい
あくまでブラウザの表記で JavaScript でこの値を取得できないので心配するところはないです