【JavaScript】ECOMAScript2015を使うからこそ理解したいObject.create ,Object.defineProperty,Object.definePropertiesの違い
下の様にclassが書けるようになったけど、、
class A {
constructor(name){
this.name = name;
}
}
export default class B extend A {
constructor(address){
super(this)
this.address = address
}
}
じゃあ他には？？てなったらこういうのもあります。
function Employee (name, dept){
this.name = name || "";
this.dept = dept || "general";
}
function WorkerBee (projs) {
this.projects = projs || [];
}
WorkerBee.prototype = new Employee;
var workerbee = new WorkerBee();
workerbee
//継承された親のメンバを持つ
他には、、
コンストラクタを定義して継承、継承元から呼びメンバを持つ
function f (name){
this.name = name;
}
function ff(address){
f.apply(this, ["kenji"]);//callでも可
this.address = address;
}
ff.prototype = Object.create(f.prototype);//スーパークラスへのprototypeを代入
var ff = new ff("meguro");
ff
//kenji
//meguro
またはObject.createを使って継承関係を定義したりします。
ぼんやしていたObject.createをこの際はっきりさせる!
トランスパイルされたコードを読むために今一度仕様から確認する。
Object.create ,Object.defineProperty,Object.definePropertiesの違いを「なんとなく」じゃだめ。
Object.create
第一引数に任意のオブジェクトのprototypeを渡し、
第二引数に自身がもつプロパティディスクリプタを定義し、それを継承したインスタンスを返す.
newのobjectを渡して生成
var o = Object.create({}, { p: { value: 42 } })
oはwritable,enumerable,configurableはfalse
objを指定してthis.nameに割り当てたインスタンスを生成
let obj = {
say: function(){
console.log(this.name, this.address);
}
}
//継承
let obj2 = Object.create(obj, {name : {value: "kenji"}});
obj2.say()
//"kenji, undefined"
//さらに継承
let obj3 = Object.create(obj2, {address: {value: "meguro"}});
obj3.say();
//"kenji, meguro"
Object.defineProperty
・Object.defineProperty(プロパティをsetする対象オブジェクト, プロパティ/関数名, {パラメータ, ...});
・「一度作ったオブジェクト」に特別な内部属性をもったプロパティを1つ定義する//返り値は第一引数で渡ってきて再定義されたオブ稀有と
・第二引数はpropety名、第三引数は定義したいディスクリプタをハッシュオブジェクトとして渡す
・既存のプロパティは上書き
・各種設定のdefaultはfalse
let obj = {}
Object.defineProperty(obj, 'job', {value: "comedian"});
obj.job
//"comedian"
obj.job = "fa"
obj.job
//"comedian" //defaultは書き換え不可,列挙不可,変更不可
Object.defineProperties
・Object.defineProperties(プロパティをsetする対象オブジェクト,{プロパティ/関数名{パラメータ, ...}});
・「一度作ったオブジェクト」に新たなプロパティを複数の定義できる
・第二引数はpropertyeのキーとしてディスクリプタを持つオブジェクト
・既存のプロパティは上書き
let obj = {}
let o2 = Object.defineProperties(obj, {job: {value: 'comedian', writable: true, enumerable: true, configurable: true}, address: {value: 'meguro'}});
列挙されるのはjobだけ
for (var key in o2){
console.log(key)
}
//'job'
※プロパティの内容＝デスクリプタ
参照
レガシーもモダンもいろんな方法を覚えて引き出し多くしたいですね。
ではまたーーー