【JavaScript】ビルトインオブジェクトのメソッドってどう使ってますか？
こんにちは、Yu_riです。
今回はPJでなるほどな〜と思ったことを紹介します。
それは「ビルトインオブジェクトのメソッドの使い方」です。
知っておくとセキュアにビルトインオブジェクトを実行するという選択肢ができると思います。
「ビルトインオブジェクト」ってなに？
「組み込みオブジェクト」とも呼ばれます。
JavaScriptの実行環境に組み込まれているオブジェクトで、「Object」や「Array」、「String」などいろいろあります。
詳しくは↓
ビルトインオブジェクトのメソッドの効果的な使い方
まずビルトインオブジェクトのメソッドをどう使うのかについて説明します。
const obj = {
name: "Yu_ri"
};
obj.hasOwnProperty("name"); //True
例で使用したのはビルトインオブジェクト「Object」クラスが持っているhasOwnPropertyメソッドです。
上記の変数 obj は「Object」クラスのインスタンス（正しくは、インスタンスへの参照）が格納されているので、「Object」クラスのメソッドが使用できるということです。
もっと詳しく。。
hasOwnPropertyメソッドは、「Object」クラスからプロトタイプ継承されています。
プロトタイプ継承とは？
https://ja.javascript.info/prototype-inheritance
⚫︎ インスタンスからビルトインオブジェクトのメソッドを使用する問題とは。。？
下の例を見てください。
const obj = {
name: "Yu_ri",
hasOwnProperty(key) {
console.log("Hello")
}
};
obj.hasOwnProperty("name"); //Hello
先ほどまでTrueを返していたhasOwnPropertyメソッドが「Hello」という文字列を出力しました。
これはご覧の通り、インスタンスに対してhasOwnPropertyメソッドを追加したことが原因です。
上記の例では、規模が小さいためhasOwnPropertyメソッドを追加したのは自分だと分かるため対処できますが、規模が大きくなると自分が予期していないメソッド追加などがあるかもしれません。
（実際にこのようなケースに出会ったことはないですが。。
⚫︎ セキュアにビルトインオブジェクトのメソッドを使用する
const obj = {
name: "Yu_ri",
hasOwnProperty(key) {
console.log("Hello")
}
};
Object.prototype.hasOwnProperty.call(obj, "name"); //True
//以下でも可
Object.hasOwnProperty.call(obj, "name"); //True
上記のようにObjectクラスから呼びだすことで、インスタンスに同じ名前のメソッドが存在するか気にする必要はありません。
Objectのprototypeが触られなければ、いつでも同じ挙動をとります。
（余談：ビルトインオブジェクトのprototypeに手を加えることをプロトタイプ汚染と言います）
ちなみに。。
callメソッドは、第1引数に呼び出し元オブジェクト（this）を指定した値で束縛することができます。今回は変数objにnameプロパティが存在するか調べたいので第1引数にはobjを設定しています。また第2引数には、メソッドに渡す引数を指定できます。
おわり
今回はビルトインオブジェクトのメソッドをセキュアに使用する記述方法を紹介しました。
他の人のコードを見るのは本当に勉強になるなと感じます。
今後も勉強になったことをどんどん投稿していきます。
Discussion