コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript プロトタイプを理解する方法

hzc
リリース： 2020-06-28 13:07:59
オリジナル
2540 人が閲覧しました

プロトタイプは JavaScript における継承の基礎です。JavaScript の継承はプロトタイプベースの継承です。関数のプロトタイプ オブジェクトは JavaScript 内にあります。関数 A を作成すると、ブラウザはオブジェクト B を作成します。メモリ。 。

JavaScript プロトタイプを理解する方法

1. プロトタイプとは

プロトタイプは Javascript における継承の基礎です. JavaScript における継承はプロトタイプベースの継承です。

1.1 関数のプロトタイプ オブジェクト

JavaScript では、関数 A ( は関数の宣言を意味します ) を作成し、それを参照します。プロセッサはメモリ内にオブジェクト B を作成し、各関数はデフォルトでこのオブジェクトを指す属性 prototype を持ちます (つまり、prototype 属性の値はこのオブジェクト です)。このオブジェクト B は関数 A のプロトタイプ オブジェクトであり、関数のプロトタイプと呼ばれます。デフォルトでは、このプロトタイプ オブジェクト B は、この関数 A を指すプロパティ constructor を持ちます (つまり、コンストラクター プロパティの値は関数 A です)。

次のコードを見てください: 

<body>
    <script type="text/javascript">
        /*
            声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
            创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
            有一个属性叫constructor 执行了这个函数

            注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
        */
        function Person () {

        }       
    </script>
</body>
ログイン後にコピー

次の図は、関数を宣言した後に何が起こるかを示しています:

1.2 コンストラクターの使用オブジェクト

関数をコンストラクターとして使用し (理論的には、どの関数もコンストラクターとして使用できます)、new を使用してオブジェクトを作成する場合、オブジェクトにはデフォルトの非表示属性が設定されます。コンストラクターのプロトタイプ オブジェクト。 通常、この非表示の属性を表すために [[prototype]] を使用しますが、この属性には直接アクセスできません。

下のコードを見てください: 

<body>
    <script type="text/javascript">
        function Person () {

        }   
        /*
            利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
            指向了构造函数的原型对象。
        */
        var p1 = new Person();
    </script>
</body>
ログイン後にコピー

下の図を見てください:

説明:

  • 上の図からわかるように、p1 オブジェクトの作成には person コンストラクターが使用されていますが、オブジェクトの作成後、p1 オブジェクトは実際には person コンストラクターとは何の関係もありません。オブジェクトの [[ プロトタイプ ]] プロパティは、 Person コンストラクターのプロトタイプ オブジェクトを指します。

  • new Person() を使用して複数のオブジェクトを作成する場合、複数のオブジェクトが同時に Person コンストラクターのプロトタイプ オブジェクトを指すことになります。

  • このプロトタイプ オブジェクトにプロパティとメソッドを手動で追加すると、p1、p2、p3... これらのオブジェクトは、プロトタイプに追加されたプロパティとメソッドを共有します。

  • p1 の属性名にアクセスすると、それが p1 オブジェクト内で見つかった場合は、それが直接返されます。 p1 オブジェクト内で見つからない場合は、p1 オブジェクトの [[prototype]] 属性が指すプロトタイプ オブジェクト内を直接検索し、見つかった場合は返します。 (プロトタイプで見つからない場合は、プロトタイプのプロトタイプ-プロトタイプ チェーンの検索を続けます。これについては後で詳しく説明します)。

  • p1 オブジェクトを通じて属性名が追加された場合、プロトタイプ内の属性名は p1 オブジェクトに対してブロックされます。言い換えれば、p1 のプロトタイプ属性名にアクセスする方法はありません。

  • プロトタイプ内の属性名の値は、p1 オブジェクトを通じて読み取ることのみ可能ですが、プロトタイプ内の属性名の値を変更することはできません。 p1.name = "李思"; プロトタイプの値は変更されませんが、属性名が p1 オブジェクトに追加されます。

次のコードを見てください: 

<body>
    <script type="text/javascript">
        function Person () {        
        }
        // 可以使用Person.prototype 直接访问到原型对象
        //给Person函数的原型对象中添加一个属性 name并且值是 "张三"
        Person.prototype.name = "张三";
        Person.prototype.age = 20;

        var p1 = new Person();
        /*
            访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
            p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name
            就值。
            注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
        */
        alert(p1.name);  // 张三

        var p2 = new Person();
        alert(p2.name);  // 张三  都是从原型中找到的，所以一样。

        alert(p1.name === p2.name);  // true

        // 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
        //原型中的属性。
        p1.name = "李四";
        alert("p1：" + p1.name);
        // 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。    
        alert("p2:" + p2.name);  // 张三  
    </script>
</body>
ログイン後にコピー

2. プロトタイプに関連するいくつかのプロパティとメソッド

2.1 プロトタイプ属性

プロトタイプはコンストラクター内に存在します (実際には、どの関数にも存在しますが、プロトタイプがプロトタイプでない場合は注意を払いません)コンストラクター)、このコンストラクターのプロトタイプ オブジェクトを指します。

前の図を参照してください。

2.2 コンストラクター属性

コンストラクター属性はプロトタイプ オブジェクト内に存在し、コンストラクター関数を指します

次のコードを見てください。 ##

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判断一个对象的类型。  
    //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
    alert(p1 instanceof Person);    // true
</script>
ログイン後にコピー

必要に応じて、 Person.prototype プロパティを使用して、 Person のプロトタイプ オブジェクトとして新しいオブジェクトを指定できます。

しかし、この時点では問題が発生しています。新しいオブジェクトのコンストラクター プロパティは、人物コンストラクターを指さなくなりました。

次のコードを見てください: 

<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲

    alert(p1 instanceof Person); // true
    alert(Person.prototype.constructor === Person); //false
    //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
    /*
    Person.prototype = {
        constructor : Person    //让constructor重新指向Person函数
    }
    */
</script>
ログイン後にコピー

2.3 __proto__ 属性 (注: 左右に 2 つのアンダースコアがあります)

コンストラクター メソッドで作成する 新しいオブジェクトが作成されると、デフォルトでこのオブジェクトにアクセスできない属性 [[prototype]] が作成され、コンストラクターのプロトタイプ オブジェクトを指します。

ただし、一部のブラウザでは、この属性 [[プロトタイプ]] へのアクセスも提供されています (Chrome ブラウザと Firefox ブラウザ。IE ブラウザはサポートしていません)。アクセス方法: p1.__proto__

ただし、不注意な操作を行うと、このオブジェクトの継承プロトタイプ チェーンが変更されるため、開発者はこの方法でアクセスしないようにしてください。 

<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true

</script>
ログイン後にコピー

2.4 hasOwnProperty() メソッド

大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

那么如何判断这个对象的来源呢？

hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex属性是直接在p1属性中添加，所以是true
    alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
    // name属性是在原型中添加的，所以是false
    alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
    //  age 属性不存在，所以也是false
    alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));

</script>
ログイン後にコピー

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 对象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //对象和原型中都不存在，所以false

</script>
ログイン後にコピー

回到前面的问题，如果判断一个属性是否存在于原型中：

如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

<script type="text/javascript">
    function Person () {
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";

    //定义一个函数去判断原型所在的位置
    function propertyLocation(obj, prop){
        if(!(prop in obj)){
            alert(prop + "属性不存在");
        }else if(obj.hasOwnProperty(prop)){
            alert(prop + "属性存在于对象中");
        }else {
            alert(prop + "对象存在于原型中");
        }
    }
    propertyLocation(p1, "age");
    propertyLocation(p1, "name");
    propertyLocation(p1, "sex");
</script
ログイン後にコピー

三、组合原型模型和构造函数模型创建对象

3.1 原型模型创建对象的缺陷

原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。

==但是，这个共享特性对 方法(属性值是函数的属性)又是非常合适的。==所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。

3.2 构造函数模型创建对象的缺陷

在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。

<script type="text/javascript">
    function Person() {
        this.name = "李四";
        this.age = 20;
        this.eat = function() {
            alert("吃完东西");
        }
    }
    var p1 = new Person();
    var p2 = new Person();
    //每个对象都会有不同的方法
    alert(p1.eat === p2.eat); //fasle
</script>
ログイン後にコピー

可以使用下面的方法解决：

<script type="text/javascript">
    function Person() {
        this.name = "李四";
        this.age = 20;
        this.eat = eat;
    }
    function eat() {
        alert("吃完东西");
    }
    var p1 = new Person();
    var p2 = new Person();
    //因为eat属性都是赋值的同一个函数，所以是true
    alert(p1.eat === p2.eat); //true
</script>
ログイン後にコピー

但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。

3.3 使用组合模式解决上述两种缺陷

原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。

<script type="text/javascript">
    //在构造方法内部封装属性
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    //在原型对象内封装方法
    Person.prototype.eat = function (food) {
        alert(this.name + "爱吃" + food);
    }
    Person.prototype.play = function (playName) {
        alert(this.name + "爱玩" + playName);
    }

    var p1 = new Person("李四", 20);
    var p2 = new Person("张三", 30);
    p1.eat("苹果");
    p2.eat("香蕉");
    p1.play("志玲");
    p2.play("凤姐");
</script>
ログイン後にコピー

四、动态原型模式创建对象

前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

看下面的代码：

<script type="text/javascript">
    //构造方法内部封装属性
    function Person(name, age) {
        //每个对象都添加自己的属性
        this.name = name;
        this.age = age;
        /*
            判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
            则把这个funcion添加到原型中。
            如果是function，则代表原型中已经有了这个方法，则不需要再添加。
            perfect！完美解决了性能和代码的封装问题。
        */
        if(typeof this.eat !== "function"){
            Person.prototype.eat = function () {
                alert(this.name + " 在吃");
            }
        }
    }
    var p1 = new Person("志玲", 40);
    p1.eat();   
</script>
ログイン後にコピー

推荐教程：《JS教程》

以上がJavaScript プロトタイプを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript
ソース：php.cn
前の記事：JavaScript ファイルを HTML の下部に配置する理由 次の記事：jQuery と Vue の違いを深く理解する (コード付き)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...
から 2024-04-06 19:54:23
0
1
444
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
Imagick、Adobe Photoshop、Windows の比較 - 解像度の検出 (1 センチメートルあたりのピクセル数またはインチあたりのピクセル数) これは質問ではなく、DPI がさまざまなファイル形式でどのように保存されるかについての理解を深め、なぜ DPI が機能するのかを議論する試みです。私は画像 (JPG、PNG、Tif...
から 2024-04-06 16:01:27
0
1
397
Nuxtjs 認証モジュールの内部動作を理解する 実際に Nuxtjsauth モジュールをプロジェクトに統合しようとしていますが、認証モジュールが実際にどのように機能するのか理解できません。誰かがこの概念を理解するのを手伝ってく...
から 2024-04-06 15:38:16
0
1
371
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート