ホームページ ウェブフロントエンド jsチュートリアル JAVASCRIPT オブジェクトの作成と 6 つの継承モードの理解と空想

JAVASCRIPT オブジェクトの作成と 6 つの継承モードの理解と空想

Oct 15, 2016 pm 05:38 PM

JS には、プロトタイプ チェーン、借用コンストラクター、結合継承、プロトタイプ継承、寄生継承、寄生結合継承の合計 6 つの継承パターンがあります。理解と記憶を容易にするために、プロセスをイメージして 6 つのモードを簡単に説明しました。

それは非常に長い物語ですが、ヌワの人類創造と呼ぶことにしましょう。

オブジェクトの作成

ヌワは人 (オブジェクトを作成) を 1 つずつつまんで、遅すぎるため、マシン (機能) を設計し、どのような種類のマシン (機能) を作成して、どのような特性があるかを彼に伝えましたこの人が持っていた機能が機械を作ります。これはファクトリー パターンです (同じインターフェイスを使用してオブジェクトを作成すると、大量の繰り返しコードが生成され、関数 (モールド) が発明されます)。

でも、機械で人間を作るのも面倒(土を掘る、泥を練る、目をつまむ、鼻をつまむ…) そこで思いついたのが、鼻や目などをつまんでカプセル化するというアイデアです。事前にバックアップのために機械を改造し、その機械がどのような目と鼻を持っているかを伝えてください。そのような機械はコンストラクターです。

全員が実行できるようにするには、マシンが全員に「実行」関数をインストールする必要があり、このプロセスは遅すぎるため、サードパーティ (コンストラクターへの関数メソッドの定義) を見つける必要があります。 ) 関数の外、グローバル スコープ内)。サードパーティは、私がつまむすべての人に実行する機能をインストールする責任を負い、毎回の処理の必要性を節約するためにマシン上でそれを使用します。 OK、人は走ることができ、とても便利ですが、構築された人にはまだ「ジャンプ」と「歩行」の N 個の機能が必要です。そして、このようにマシンを構築します。意味がありません。それでNuwa(開発者)はプロトタイプモードを早くから作成しました...私のWaは素晴らしいです。

プロトタイプモードの各関数は、プロトタイプオブジェクトを指すポインタであるプロトタイプ属性を持ちます。プロトタイプ オブジェクトには、すべてのインスタンスで共有できるプロパティとメソッドが含まれています。このプロトタイプ オブジェクトには、プロトタイプ属性が配置されている関数へのポインタを含むコンストラクター属性があります。

少しややこしいようですが、ヌワさんの視点で考えるとわかりやすいです。作成者であるヌワさんもさまざまな型(プロトタイプオブジェクト)を発明しており、これから作り始めようとしています。 1. 人のようなものを作成する -->用途 そんな人を作るための型です。結局のところ、どんな型を使ってでも作ることができるのです。人間が作るすべての機械 (機能) は独自の型 (プロトタイプ オブジェクト) を持ち、その機械には型を指す [プロトタイプ] というラベルが付いています。この型には生産マークを付けることができる [コンストラクター] 属性があります。この機械を指して、この機械は金型の製造に使用されることを示します。したがって、あるタイプの人物を作りたい場合は、型を変更するだけで済みます。これはプロトタイプ オブジェクトの便利で高速な利点です。

制作プロセスは以下の通りです: 1. マシンAのビルド: function jqA(){}; //モールド(プロトタイプオブジェクト)を指すprototype属性があります

: jqA.prototype={

constructor: jqa、//ラベル付けに相当します。マシンa、

}

}

irine can me in me in me in my lify can lili fir liliの人生で、白い肌を持つことができ、できること、そしてできることができます。走る。

3 このタイプの人物を作成します var person1=new jqA();

of person イ テンプレート A が処理され、テンプレート A を指します

完璧ですが、問題が発生しますこのようにして生み出された人々は皆同じで、同じように肌が白くて優雅な美女が5人出てきましたが、さらに同じように背が低くて醜い人たちが5人出てきました。 つまり、マシン A はテンプレートを使用しながら、女性の指示に従ってさまざまな特徴を持つ人物を作成することもできます。たとえば、この人は目が青い、あの人は太っているなどです。 。この追加機能は、コンストラクターによって実装されます ---》コンストラクターとプロトタイプパターンを組み合わせて使用​​します

制作プロセスは次のとおりです:

        //组合使用构造函数模式和原型模式
            function  Person(name,skill,country) {
                this.name=name;
                this.age=skill;
                this.country=country;
                this.member=["刘封","刘婵"];
            } //机器可以听命令
 
            Person.prototype={
                constructor:Person,
                sayName:function () {
                    alert(this.name);
                }
            }  //还可以用模板
             var person1=new Person('马超','铁骑','蜀国');
             var person2=new Person('刘备','仁德','蜀国');
ログイン後にコピー

この時、Nuwaはマシンとテンプレートの世話をするのが面倒すぎて、同時に、マシンにテンプレートを直接インストールしました 中: コンストラクターでプロトタイプ オブジェクトを初期化します ---》動的プロトタイプ モードの方が便利です

制作プロセスは次のとおりです:

    function  Person(name,skill,country) {
                  this.name=name;
                  this.skill=skill;
                  this.country=country;
             if(typeof this.sayCountry !=undefined){
                   Person.prototype.sayCountry=function () {
                       alert(this.country);
                   };
               }
              }
            var friend=new Person('张飞','咆哮','蜀国');
            friend.sayCountry();
ログイン後にコピー

何か質問はありますか? OK、寄生コンストラクター モードを提供します。マシンに内部マシンを追加します。この内部マシンは生産を担当し、生産された人材を外部マシンに提供し、外部マシンはそのような人材を外部に提供します。 (通常は使用しません...)

継承 (私の理解—_—)

  问题:女娲要造另一批人B,这批人的模板B造好了,但是想让这批人有之前造过的那批人的特点,怎么办?先让这些人过滤一下先前的模板A,在放到B中造就ok,这样类‘B人'就继承了‘A’类人的特点。如何过滤:父实例=子原型 建B的模板,造一个a出来,这个a肯定要过滤A模板,所以让B的模板等于a就ok,问题解决。 

 //父函数,机器A,A类人。它的实例a中有[[Prototype]]属性和自定义的property属性

    function SuperType(){
    this.property=true;
    }
    //在SuperType原型对象(模具A)中添加getSuperValue方法
    SuperType.prototype.getSuperValue=function(){
    return this.property 
      }
 
    //子函数,机器B,B类人。构造函数SubType,它的实例中有[[Prototype]]属性和自定义的subproperty属性
    function SubType(){
    this.subproperty=false;
      }
    //继承了SuperType (原型链)
    SubType.prototype=new SuperType();  //机器B=a
    //在SubType原型对象(模具B)中添加getSubValue方法
    SubType.prototype.getSubValue=function(){
return tis.subproperty;
    };  
    var insatance=new SubType();
    alert(insatance.getSuperValue()); //true
ログイン後にコピー

问题:引用类型值会改变,因为实例共享属性,和原型模式中的问题相同

解决方案:经典继承 (借用构造函数):其实就是把模具A设计到机器B中,但是它已经不是模板了,机器B会给生产的b们添加这些A中的属性和方法,但是可以人为控制,女娲又命令机器B根据传递不同的命令生产不同的b。

  

在子类构造函数的内部调用超类构造函数

     相当于把父类的属性实例化到子类中?Java中的super() 存在疑问

 

   function SuperType(){
  this.colors=['red','blue','green'];
    }
    function SubType(){
    //继承了SuperTYpe
    SuperType.call(this);
     }
    var insatance1=new SubType();
    insatance1.colors.push('black');
    alert(insatance1.colors);// 'red,blue,green,black'
 
    var insatance2=new SubType();
    alert(insatance2.colors);//'red,blue,green'
ログイン後にコピー

1传递参数:

      借用构造参数可以在子类型构造参数中向超类型构造参数传递参数

 

     function SuperType(name){
   this.name=name;
      }
      function SubType(){
    //继承了SuperTYpe,同时还传递了参数
    SuperType.call(this,'赵云');
 
    //实例属性
    this.age=29;
    }
ログイン後にコピー

    var insatance=new SubType();

    alert(insatance.name); //赵云

    alert(insatance.age); //29

为了确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数之后,再添加应该在子类型中定义的属性。

问题:浪费劳动力,在机器中创建A具有的功能和属性,那么A模板就没用了,相当于回到工厂模式,都有打火机了,还要钻木取火吗....

  解决方案:组合继承

    在公司加班没事做,现在赶着下班,故事编不下去了,后面的继承模式搬之前的记录吧..   

  原型链和构造函数技术组合到一起,使用原型链实现对原型属性和方法的继承,借用构造函数来实现对实例属性的继承。这样通过在原型上定义方法实现了函数的复用,有能够保证每个实例都有它自己的属性

    原型继承:方法可以,实例属性无法继承; 借用构造函数:实例属性可以,方法不行。 一起用,完美。

     

  function SuperType(name){
   this.name=name;
   thi.colors=['red','blue','green'];
     }
    SuperType.prototype.sayName=function(){
   alert(this.name);
    };
 
    function SubType(name,age){
  //继承属性
  SuperType.call(this,name);
  this.age=age;
    }
     //继承方法
   SubType.prototype=new SuperType();
 
   SubType.prototype.sayAge=function(){
    alert(this.age);
   }
 
  var instance1=new SubType('zhaoyun',29);
  instance1.colors.push('black');
  alert(instance1.colors); //'red,blue,green,black'
  instance1.sayName();//zhaoyun
  instance1.sayAge();//29
 
  var insatance2=new SubType('诸葛瑾',25);
  alert(instance2.colrs);'red,blue,green'
  instance22.sayName();//诸葛瑾
  instance2.sayAge();//25
ログイン後にコピー


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

chart.js:パイ、ドーナツ、バブルチャートを始めます chart.js:パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js:ラインチャートとバーチャート(チュートリアル2)、およびレーダーチャートと極地域チャート(チュートリアル3)を学びました。 パイとリングチャートを作成します パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。 パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します

初心者向けのタイプスクリプト、パート2:基本データ型 初心者向けのタイプスクリプト、パート2:基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル(ES6によって導入)とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull

See all articles