JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

WBOY
リリース: 2022-08-04 10:16:45
転載
2835 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に、オブジェクトを作成する JavaScript コンストラクター関数に関する関連問題を紹介します。コンストラクター (コンストラクター) は、コンストラクターおよび型関数とも呼ばれます。この関数は、オブジェクト テンプレート。コンストラクターは任意の数のインスタンスを生成できます。インスタンス オブジェクトは同じ属性と動作特性を持っていますが、同等ではありません。一緒に見てみましょう。皆さんのお役に立てれば幸いです。

JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

[関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド ]

コンストラクターとは

JavaScript コンストラクター (Constructor) は、コンストラクターおよび型関数とも呼ばれます。その機能はオブジェクト テンプレートに似ています。コンストラクターは、任意の数のインスタンスを生成できます。インスタンス オブジェクトは同じ属性と動作特性を持ち、しかし平等ではありません。
コンストラクターを使用して、さまざまなクラスのオブジェクトを作成します。

コンストラクタの作成

コンストラクタは通常の関数です。作成方法に通常の関数との違いはありません。コンストラクタは頭文字を大文字にするのが通例です

コンストラクタと通常の関数の違い

コンストラクタと通常の関数の違い関数は呼び出しメソッドです。 違いは、

    通常の関数は直接呼び出されます。
  • コンストラクターは、新しいキーワードを使用して呼び出す必要があります。
これは、問題

Three このフォームのポインティング状況。

  • 関数として呼び出された場合、これはウィンドウです。

  • メソッドとして呼び出された場合、これはメソッドを呼び出した人です

  • コンストラクターの形式で呼び出された場合、これは新しく作成されたオブジェクトです

コンストラクターの実行フロー

  • 新しいオブジェクトをすぐに作成します

  • 関数内で新しいオブジェクトを this に設定します。コンストラクターで this を使用して、新しいオブジェクトを参照できます (つまり、this は Newly を指します)作成されたオブジェクト)

  • #関数内のコードを 1 行ずつ実行します
  • #新しく作成されたオブジェクトを戻り値として返します

同じコンストラクターを使用して作成されたオブジェクトはオブジェクトのクラスと呼ばれ、コンストラクターはクラスとも呼ばれます。コンストラクターを通じて作成されたオブジェクトを、このクラスのインスタンスと呼びます。上記に関する限り、Obj はクラスであり、obj はクラス Obj のインスタンスです。 JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

コンストラクター インスタンス

2 つのクラス (1 つは Person クラス、もう 1 つは Dog クラス) を作成します。

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script>
        //构造一个创建人的类
        function Person(name , age , gender){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = function(){
                console.log(this.name)
            }
        }

        //构造一个创建狗的类
        function Dog(name , age ){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.sayHello = function(){
                console.log(&#39;汪汪汪~~&#39;);
            }
        }

        //创建一个人的实例
        var per = new Person(&#39;苏凉&#39;,21,&#39;男&#39;);
        console.log(per);
        per.sayName();

        //创建一个狗的实例
        var dog = new Dog(&#39;旺财&#39;,5);
        console.log(dog);
        dog.sayHello();
    </script>
    
ログイン後にコピー

実行結果:

コンストラクターの利点は、さまざまなオブジェクトを区別できることです。つまり、作成されたオブジェクトがどこにあるかを明確に把握できることです。まず、通常のオブジェクトを使用してオブジェクトを作成する場合と、ファクトリ モードを使用してオブジェクトを作成する場合では、オブジェクトの種類を区別することはできず、すべて 1 つの大きなクラス (オブジェクト) に属します。 JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

instanceof キーワード

instanceof を使用して、オブジェクトがクラスのインスタンスであるかどうかを確認します

構文:

オブジェクト インスタンスオブ コンストラクター

はいの場合は true を返し、それ以外の場合は false を返します

  console.log(dog instanceof Dog); //true
  console.log(dog instanceof Person); //false
  console.log(dog instanceof Object); //true
ログイン後にコピー
すべてのオブジェクトは Object の子孫であるため、instanceof がチェックされると、任意のオブジェクトと 0object は true を返します。

パフォーマンスの最適化

パーソン コンストラクターを作成する

パーソン コンストラクターでは、オブジェクトごとに SayName メソッドが追加されます

現在、メソッドは内部に作成されていますコンストラクター、つまり、コンストラクターが実行されるたびに新しいsayNameメソッドが作成されます。

つまり、すべてのインスタンスのsayNameは一意です。

これは大量のメモリを占有し、新しく作成されたオブジェクトごとに新しいメソッドが作成されます。

解決策: 以下に示すように、新しく作成したオブジェクトのメソッドを個別に抽出します。JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script>
		//将新创建对象的方法单独提取出来
        function sayName(){
            console.log(this.name)
        }

        //构造一个创建人的类
        function Person(name , age , gender){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = sayName;
        }
        var per = new Person(&#39;苏凉&#39;,21,&#39;男&#39;);
        var per1 = new Person(&#39;小红&#39;,18,&#39;女&#39;);
        console.log(per);
        per.sayName();
        per1.sayName();
        console.log(per.sayName == per1.sayName); //true
    </script>
    
ログイン後にコピー

persayNameメソッドはper1のsayNameメソッドと同じです。これにより、別のインスタンスを作成するときに新しいsayName メソッドを作成する問題が解決され、メモリ使用量が大幅に削減されます。 JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

知識の拡張

(1.) コンストラクターが必要な理由:

理由オブジェクトを作成するどちらの方法でも、一度に 1 つのオブジェクトしか作成できません。

(2.) コンストラクターとは:

コンストラクター: オブジェクト内の同じプロパティとメソッドの一部を抽象化し、それらを関数にカプセル化します

(3.)利用构造函数创建对象及使用方法

构造函数的函数名从第一个单词开始,每个单词的首写字母都要大写。

JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

/ /4.在构造函数里面我们的属性和方法前面都必须加this关键字

//声明构造函数语法格式:
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
//调用构造函数语法格式:
new 构造函数名();
ログイン後にコピー

以下是构造函数语法格式的案例:

JavaScript コンストラクターがオブジェクトを作成する (概要の共有)

【相关推荐:javascript视频教程web前端

以上がJavaScript コンストラクターがオブジェクトを作成する (概要の共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート