JavaScript コンストラクターとプロトタイプの例を示した詳細な説明

この記事では、JavaScript に関する関連知識を提供し、主にコンストラクターとプロトタイプに関する関連事項やプロトタイプ関連の内容を紹介します。一緒に見ていきましょう。お役に立てば幸いです。みんなに、役に立ちました。

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

1. コンストラクターとプロトタイプ

1.1 プロトタイプを使用してメモリの無駄の問題を解決する

欠点: メモリの無駄の問題があります。

オブジェクトが 2 つ以上ある場合、複合データ型の空間は複数回開かれます

#コンストラクター プロトタイプ##プロトタイプ#プロトタイプ オブジェクトは主にメモリの無駄の問題を解決します。プロトタイプを通じてコン​​ストラクターによって割り当てられた関数は所有されます。すべてのオブジェクトによって 共有されます。 JavaScript のすべてのコンストラクターには、別のオブジェクトを指すプロトタイプ プロパティがあります。このプロトタイプはオブジェクトであり、プロトタイプ オブジェクトのすべてのプロパティとメソッドはコンストラクターによって所有されます。この時点で、プロトタイプを使用して、オブジェクトのすべてのインスタンス オブジェクトで使用できるメソッドをプロトタイプに配置できます。

オブジェクト プロトタイプ

_ proto_

オブジェクト すべてのオブジェクトには属性があります_ proto_

コンストラクターのプロトタイプ プロトタイプ オブジェクトへのポインタ オブジェクトがコンストラクター プロトタイプ プロトタイプ オブジェクトのプロパティとメソッドを使用できる理由それは、オブジェクトに _ proto_ プロトタイプが存在するためです。

sy の _ proto_ と sym の _ proto_ は同じメソッド検索ルールです。まず sy を調べ、sym オブジェクトに sing メソッドがあるかどうかを確認し、あれば実行します。 _ _ proto _ _ があるため、このオブジェクトで Sing します。コンストラクター関数プロトタイプ オブジェクト Prototype に移動し、コンストラクター関数プロトタイプ オブジェクト Prototype に移動して、sing メソッドを見つけます (

簡単に言えば、次の場合に使用します)持っていない場合は、プロトタイプ オブジェクトに移動して探します ) 関数とオブジェクトが作成されると、プロパティが自動的に作成され、両方とも同じ空のオブジェクトを指します

1.2 コンストラクター コンストラクター コンストラクター Constructor

オブジェクト プロトタイプ (_

proto

_) およびコンストラクター (プロトタイプ) プロトタイプ オブジェクトにはプロパティがあります

constructor プロパティ、コンストラクター コンストラクター自体を参照するため、これをコンストラクターと呼びます。

どちらもコンストラクターを持っています。プロトタイプがオブジェクトの形式で追加される場合、プロトタイプ ポインターは変更され、新しいオブジェクトに追加します。この新しいオブジェクトのプロトタイプ オブジェクトはコンストラクターをポイントしていません。手動でポイントする必要があります

2. プロトタイプチェーン

2.1 js におけるメンバー検索ルール

オブジェクトのプロパティ (メソッドを含む) にアクセスする場合、まずオブジェクト自体がプロパティを持っているかどうかを確認します。そうでない場合は、そのプロトタイプ (つまり、._ proto _ が指すプロトタイプ プロトタイプ オブジェクト) を検索します。まだ存在しない場合は、プロトタイプ オブジェクトのプロトタイプ (Object のプロトタイプ オブジェクト) を探します。オブジェクトが見つかるまで (null) 同様に続きます。

2.2 プロトタイプ オブジェクト this は

1 を指します。コンストラクターでは、this はオブジェクト インスタンス shanyu # を指します##

<script>
        function Person(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        // 声明一个变量然后验证this指向是不是和实例化对象相同
        var that;
        Person.prototype.skill = function () {
            console.log('我会吃饭');
            that = this;
        }
        var shanyu = new Person('山鱼', 30);
        shanyu.skill();
        console.log(that === shanyu);
    </script>

2.3 組み込みオブジェクトの拡張

プロトタイプ オブジェクトを通じてカスタマイズされたメソッドを使用して、元の組み込みオブジェクトを拡張できます。

 <script>
        //  自定义对象应用，给Array添加一个自定义方法
        Array.prototype.sum = function () {
            var sum = 0;
            for (var i = 0; i < this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        var arr = [1, 2, 3, 4];
        console.log(arr.sum());
    </script>

配列および文字列の組み込みオブジェクトは拡張できません。プロトタイプオブジェクトの上書き操作 Array.prototype = {} この操作を行うと元のメソッドが上書きされますので、Array.prototype. メソッド名 = function(){} のみとなります。

3.call function

この関数を呼び出し、関数の実行中に this ポインタを変更します。パラメータは 3 つあります:

thisArg 現在の呼び出し関数 this arg1、arg2 が指すオブジェクト

    <script>
        function sing(x,y) {
            console.log("a~a~给我已被忘情水");
            console.log(this);
            console.log(x+y);
        }
        var fn = {
            name: '山鱼'
        }
        // call()可以改变这个函数的this指向此时这个函数的this就指向了o这个对象
        sing.call(fn,1,2)
    </script>

4 に渡されるその他のパラメータ。

## を継承# through us 入力すると、これが Son を指していることがわかります。つまり、Son は親コンストラクターで uname と uage を使用します

# #4.1 プロトタイプ オブジェクトの継承の利用

es6 より前には extends がなかったので、

コンストラクターとモデル オブジェクト

の組み合わせを使用して継承操作を実行できます

 <script>
        function Father(uname, uage) {
            this.uname = uname;
            this.uage = uage;
        }
        Father.prototype.eat = function () {
            console.log("我爱吃鸡腿");
        }
        // 子构造函数
        Son.prototype = new Father();
        Son.prototype.constructor = Son;
        function Son(uname, uage, swing) {
            Father.call(this, uname, uage);
            this.swing = swing;
        }
        Son.prototype.student = function () {
            console.log('我爱学习！！');
        }
        // 要向使用父亲原型对象里面的方法，可以实例化一下Father，然后
        // 这时候Son的this指向到了Father，所以我们要用constructor将this指回到Son
        var son = new Son('山鱼妹', 18, "游泳冠军！！！");
        // console.log(son.eat());
        console.log(son);
        console.log(Father.prototype);
    </script>

[関連する推奨事項: JavaScript ビデオ チュートリアル

、

Web フロントエンド ]

以上がJavaScript コンストラクターとプロトタイプの例を示した詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。