紹介前に注意
現在は(2024/05)__proto__がMDNにおいて非推奨とされています。だから、ここでは__proto__について学ぶためだけに述べており、実際の使用は控えるべきだと考えます。
Property
簡単に説明すると、__proto__はJavaScriptにおけるプロトタイプの概念を具現化にしています。これを用いて、オブジェクトは他のオブジェクトからプロパティを継承し、Object.prototypeにあるプロパティにアクセスすることができるようになります。
[[Prototype]]
オブジェクトの間のプロトタイプチェーンを内部的に表すための属性です。
直接コードからアクセスすることができません。
__proto__
外部アクセスが禁止されている[[Prototype]]にアクセスできるようにする属性です。
例を見てみましょう！
たとえば、以下のようないくつかの変数があります
let dog = {
foot: 4,
bark: function () {
console.log('woof!')
}
}
let shibainu = {
color: 'brown'
}
もしshibainuのfootを取得しようとすると.、undefinedを表示されます。
console.log(shibainu.foot) // undefined
これを実現するには、どうすればよいでしょうか？
この場合は、たった一行のコードを追加するだけ済みます。(もちろんObject.create()を使うなど、他にも方法はあります。)
let dog = {
foot: 4,
bark: function () {
console.log('woof!')
}
}
let shibainu = {
color: 'brown'
__proto__: dog
}
shibainu.bark() // woof!
console.log(shibainu.foot) // 4
console.log(dog.color) // undefined
注意：__propo__を手動で設定することは、できる限り避けるべきです。
図で理解
hasOwnProperty
どんなオブジェクトも他のオブジェクトのプロパティを継承できます。継承すると、継承元のオブジェクトのプロパティを自分のものとして使用できるようになります。しかし、ここで疑問が生じます。継承したプロパティは本当に自分自身のものと言えるのでしょうか？
Object.hasOwnPropertyを使用して、そのプロパティがオブジェクト自身に直接存在しているかを確認することができます。
// dog
console.log(dog.hasOwnProperty('foot')) // true
console.log(dog.hasOwnProperty('bark')) // true
console.log(dog.hasOwnProperty('color')) // false
// shibainu
console.log(shibainu.hasOwnProperty('foot')) // false
console.log(shibainu.hasOwnProperty('bark')) // false
console.log(shibainu.hasOwnProperty('color')) // true
文字だけでは理解しづらいかもしてませんので、図を見てみましょう。
-
shibainuで__proto__を追加します
-
shibainu.bark() // woof!の実行プロセス
結論
__proto__は非常に強力な機能ですが、もともとECMAScriptの最初の仕様に含まれていませんでした。一部のブラウザによって導入され、徐々に普及しましたが、その後、ECMAScriptの2015仕様に正式に追加されたもかかわらず、現在はブラウザから徐々に非推奨とされています。できれば、使用を避けることが望ましいです。
代わりにObject.setPrototypeOfやObject.getPrototypeOfを使用が推奨されています。
これに関する質問や、追加、修正、削除すべき点があれば、コメント、メール、またはDMでお知らせください。
ありがとうございます！！！