JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで関数コンストラクターを使って関数を呼び出す方法とは？継承の仕組みを解説

JavaScriptでは、関数を呼び出す方法は大きく分けて3つあります。1つ目は「関数として」、2つ目は「メソッドとして」、そして3つ目は「関数コンストラクターとして」呼び出す方法です。

この中でも、関数コンストラクターを使った呼び出しは特に特別な存在です。なぜなら、この方法だけが「継承（インヘリタンス）」の仕組みを利用しているからです。実際にコンストラクター呼び出しを行うと、新しいオブジェクトが生成され、そのオブジェクトはコンストラクターが持つプロパティやメソッドを継承します。一方、最初の2つの呼び出し方法には、このような継承の仕組みは存在しません。

サンプルコード

以下の例では、まず通常の関数を定義し、その関数を関数コンストラクターとして呼び出しています。newキーワードを使って生成されたオブジェクトは、関数内で定義されたプロパティを継承します。そのため、引数として値を渡しただけで、radiusとheightのプロパティが自動的にオブジェクトに設定され、出力結果にも反映されていることがわかります。

<html>
<body>
    <script>
        function myArg(arg1, arg2) {
            this.radius = arg1;
            this.height = arg2;
        }
        var x = new myArg(1,2)
        document.write(JSON.stringify(x));
    </script>
</body>
</html>

実行結果

{"radius":1,"height":2}

このように、関数コンストラクターとして呼び出すことで、関数はオブジェクトの設計図として機能し、生成されたインスタンスがそのプロパティを受け継ぐことができます。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptで関数を「関数」として呼び出す方法と「メソッド」として呼び出す方法の違い

    JavaScriptでは、同じ関数でも呼び出し方によって「関数としての呼び出し」と「メソッドとしての呼び出し」という2つの使い方ができます。この2つの大きな違いは、関数内でthisが何を参照するかという点にあります。 2つの呼び出し方の違い 関数としての呼び出し：関数名を直接記述して呼び出します（例：add(2, 3)）。この場合、thisはグローバルオブジェクト（ブラウザ環境ではwindow）を参照します。 メソッドとしての呼び出し：オブジェクトのプロパティ経由で呼び出します（例：obj.welcome()）。この場合、thisはそのオブジェクト自身を参照するため、オブジェクトが持つプロパ