【JavaScript】Object.create()【中級者】

  • このエントリーをはてなブックマークに追加

Object.createは、新しいオブジェクトを指定したプロトタイプオブジェクトから生成するためのメソッドである。
このメソッドを使うことで、新しいオブジェクトが指定したプロトタイプオブジェクトのプロパティやメソッドを共有することができる。



プロトタイプという言葉は通常、プロトタイプオブジェクトを指す。プロトタイプオブジェクトは、他のオブジェクトが継承する共通のプロパティやメソッドを保持するオブジェクトである。これらのプロパティやメソッドは、継承元のオブジェクトのプロトタイプチェーンを通じてアクセス可能になる。

Object.create()で新しく生成したオブジェクトとDeep copy(ディープコピー)したオブジェクトは似ているけど挙動が若干違う。
これは、また今度勉強しよ。使い分けがいまいち分からない。
Object.create()で新しく生成したオブジェクトとDeep copy(ディープコピー)したオブジェクトとShallow copy(シャローコピー)したオブジェクトの使い分けは?この辺の使い分けが不明。


const protoObj = { 
  sayHello: function() {
    console.log('Hello from prototype!');
  }
};

const newObj = Object.create(protoObj);

newObj.sayHello = function() {
  console.log('Hello from newObj!');
};

protoObj.sayHello();// Hello from prototype!
newObj.sayHello();// Hello from newObj!

protoObj.greeting = 'Greetings from prototype!';
console.log(protoObj.greeting); // Greetings from prototype!
console.log(newObj.greeting); // Greetings from prototype!

プロトタイプを利用した継承の方法の1つとして、Object.create()を使う方法がある。
Child.prototype = Object.create(Parent.prototype) の場合、Child.prototype の変更は Parent.prototype に影響を与えない。
Child.prototype = Parent.prototype の場合、Child.prototype の変更が Parent.prototype にも影響を与える。


function Parent() {
  this.parentProperty = 'I am a parent';
}

Parent.prototype.parentMethod = function() {
  console.log('Parent method');
};

function Child() {
  // Childコンストラクタが呼ばれたとき、Parentコンストラクタも呼び出す。
  Parent.call(this);
  
  this.childProperty = 'I am a child';
}

console.log(typeof Parent);// function
console.log(typeof Parent.prototype);// object

// ParentのプロトタイプをChildのプロトタイプとして指定
Child.prototype = Object.create(Parent.prototype);

// この場合、Child.prototype変更するとParent.prototypeも変更される。
//Child.prototype = Parent.prototype;

Child.prototype.childMethod = function() {
  console.log('Child method');
};

const childInstance = new Child();
childInstance.childMethod();  // Child method
childInstance.parentMethod();  // Parent method

Child.prototype.anotherMethod = function() {
  console.log('Another method');
};

const childInstance2 = new Child();
childInstance2.anotherMethod();  // Another method

const parentInstance2 = new Parent();
parentInstance2.anotherMethod();  // Uncaught TypeError: parentInstance2.anotherMethod is not a function
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*