hasOwnProperty()とは
オブジェクト自身が(継承されていない)、引数に指定されたプロパティを持っているかどうかを示す真偽値を返すメソッド。
インスタンス名.hasOwnProperty('検索したいプロパティ、メソッド名')の形。
例)bob.hasOwnProperty('hello') // -> true or false
inとは
inというキーワードを使うとプロトタイプチェーンを遡って、指定したプロパティ、メソッドがあるか真偽値を返す。
'検索したいメソッド名など' in インスタンス名の形。
例)console.log('hello' in bob); // -> true or false
サンプルコード
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
hello() {
console.log('hello ' + this.name);
}
}
const bob = new Person('Bob',18);
const result = bob.hasOwnProperty('hello');
console.log(result);// -> false。helloメソッドはprototypeプロパティ内のあるメソッドで、Personコンストラクター関数自身にはないのでfalse
console.log('hello' in bob);// -> true。inを使用すると、プロトタイプチェーンも遡って、該当のプロパティ、メソッドがあるか確認し真偽値で返してくれる。
Object.hasOwn()とは
参考:https://sosukesuzuki.dev/posts/stage-3-object-hasown/
Object.hasOwn メソッドは、Object.prototype.hasOwnProperty()をObjectのスタティックメソッドにしたものだ。
つまり、次の2つのプログラムは同じ挙動になる。
hasOwnProperty()の上書きによる真偽値の変更や、Object.create(null)で生成されたオブジェクトにはhasOwnProperty()が存在しないなどの問題を、解決できるObject.hasOwn()。現段階でほぼ全ブラウザで使用できる点からこちらのメソッドを使用した方がよさそうです。
サンプルコード
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
hasOwnProperty(str){ // hasOwnProperty()の上書き
return true;
}
}
const bob = new Person('Bob',18);
bob.hasOwnProperty('hello'); // true ←
Object.hasOwn(bob, 'hello'); // false