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

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 までご連絡ください。
JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles

ホット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ヘンタイを無料で生成します。

ホットツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。