Yuri's Blog | JavaScriptのビルトインオブジェクトのメソッドをどう使うか

こんにちは、Yu_riです。
今回はPJでなるほどな〜と思ったことを紹介します。
それは「ビルトインオブジェクトのメソッドの使い方」です。
知っておくとセキュアにビルトインオブジェクトを実行するという選択肢ができると思います。

「ビルトインオブジェクト」ってなに？

「組み込みオブジェクト」とも呼ばれます。
JavaScriptの実行環境に組み込まれているオブジェクトで、「Object」や「Array」、「String」などいろいろあります。

詳しくは↓
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects

ビルトインオブジェクトのメソッドの効果的な使い方

まずビルトインオブジェクトのメソッドをどう使うのかについて説明します。

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引数には、メソッドに渡す引数を指定できます。