新しいプロトタイプベースのオブジェクトを作成するためのJavaScriptのオブジェクト指向のJavaScript

        // 実際にオブジェクトのクラスを作成
        するvar学生= { 
            名: "ロボット" 
            高さ: 1.6 
            RUN:関数(){ 
                にconsole.log(この 'でruningて' .nameの+ ); 
            } 
        } 
        関数createStudent(名){
             / / ベースの学生は、オブジェクトのプロトタイプチェーンに基づいてオブジェクトを作成し、オブジェクトに渡すことができます)Object.create(の新しいオブジェクトのプロトタイプを作成
            するvar S = Object.create(学生は);
             // 新しいオブジェクトを初期化します。 
            s.name = 名前;
             返すSを; 
        } 
        VAR暁= createStudent( "小の明" )。
        xiaoming.run(); 
        console.log(暁明.__ proto__ ==学生)。// 

上記は、継承するプロトタイプチェーンの一例です

 

 

JavaScriptのオブジェクトを作成します

各オブジェクトのプロトタイプを設定するには、JavaScriptはそのプロトタイプオブジェクトを指して、作成されます。

私たちが使用している場合obj.xxx、プロパティへのアクセスオブジェクトは、JavaScriptエンジンは、最初のプロパティの現在のオブジェクトを見たときに、見つからない場合は、それが見つからない場合は、それがバックにトレースされている、そのプロトタイプオブジェクトを見つけるためにObject.prototypeあなたが発見していない場合は、最終的には件名、および、のみ返すことができますundefined

たとえば、作成Array対象に:

 ARR = [1、2、3]。

プロトタイプチェーンは次のようになります。

ARR ----> Array.prototypeを---->のObject.prototype ----> はnull

Array.prototypeこれは、定義されたindexOf()shift()というように、あなたはすべてのことができArray、オブジェクト上で直接これらのメソッドを呼び出します。

私たちは、関数を作成する場合:

関数FOO(){
     戻り 0 
}

関数はオブジェクトであり、そのプロトタイプチェーンは次のようになります。

FOO ----> Function.prototype ---->のObject.prototype ----> はnull

ためFunction.prototypeの定義apply()方法、従って、全ての機能を呼び出すことができるapply()方法。

プロトタイプチェーンが非常に長い場合だと思うのは簡単、それ以来遅くなって探して多くの時間を過ごすことになり、オブジェクトのプロパティにアクセスし、そのプロトタイプチェーンが長すぎる行うことがないように注意してください。

コンストラクタ

直接に加えて{ ... }外部オブジェクトを作成し、JavaScriptは、オブジェクトを作成する機能を構築する方法を使用することができます。その使用は最初のコンストラクタを定義することです。

関数学生(名){
     この .nameの= 名前。
    この .hello = 機能(){ 
        警告( 'こんにちは、' + この .nameの+ '!' ); 
    } 
}

あなたはねえ、これは通常の関数ではありません、求めることができますか?

これは確かに一般的な機能ですが、JavaScriptには、キーワードを使用することができnew、この関数を呼び出すために、そしてオブジェクトを返します。

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

あなたが書いていない場合がありますnew、これは正常な機能である、それが返されますundefinedしかし、あなたが書いた場合new、それがバインドされているコンストラクタ、となりthisのオブジェクトが新たに作成されたをポイントして、デフォルトに戻すthis、すなわち、最終的に記述する必要はありませんreturn this;

新しく作成されたxiaomingプロトタイプチェーンは、次のとおりです。

暁明----> Student.prototype ---->のObject.prototype ----> はnull

換言すれば、xiaoming関数プロトタイプは、を指しStudentプロトタイプ。あなたが作成した場合はxiaohongxiaojunその後、これらのオブジェクトとプロトタイプはxiaoming同じです。

暁明↘ 
xiaohong - →Student.prototype ---->のObject.prototype ----> ヌル
xiaojun↗

new Student()オブジェクトも作成プロトタイプから得られたconstructor関数を指すプロパティStudent自体:

xiaoming.constructor === Student.prototype.constructor。//  
Student.prototype.constructor ===学生。// 

Object.getPrototypeOf(暁明) === Student.prototype。// 

暁明のは、instanceof学生。// 

なお、オブジェクトのコンストラクタで構築にはprototypeプロパティではありません

コンストラクタは、prototypeプロパティを持っています

今、私たちは信じてxiaomingxiaohongこれらのオブジェクトはから「継承」されていますStudent

しかし、小さな問題があり、観察します:

xiaoming.name; // '小明' 
xiaohong.name。// '小红' 
xiaoming.hello。// 機能:Student.hello() 
xiaohong.hello。// 機能:Student.hello() 
xiaoming.hello === xiaohong.hello。// 

xiaomingそしてxiaohong、それぞれname異なる、これは、そうでなければ、我々は誰が誰であるかを区別することはできません、右です。

xiaomingそして、xiaohongそれぞれのhello機能が、関数名とコードが同じであるものの、それらは、2つの異なる機能です!

私たちが合格した場合new Student()、オブジェクトの多くを作成するhello機能はそれだけで同じ機能を共有する必要があり、実際にあるが、それは多くのメモリを節約できます。

さんが共有ターゲット作成してみましょうhello機能を、オブジェクトの検索原理の性質に応じて、私達はちょうど置くhello移動する機能をxiaomingxiaohongその上に試作品で一緒にこれらのオブジェクトを、それがありますStudent.prototype

次のようにコードを変更します。

関数学生(名){
     この .nameの= 名; 
} 

Student.prototype.hello = 機能(){ //これはメモリ保存することです 
    (アラートを 'こんにちは、' + この .nameの+ '!' ); 
};

newプロトタイプベースのJavaScriptの作成オブジェクト、それは簡単なことです!

新しい書き込みを行う方法を忘れて

関数はオブジェクトを作成するためのコンストラクタとして定義されていますが、忘れてしまっている場合は、書き込み呼び出したときにnewどのように行うには?

厳密モードでは、this.name = nameエラー、ので、this結合はundefined非厳密モードでthis.name = nameあるため、ないエラーthis結合であるwindowので、誤ってグローバル変数作成され、nameそして戻りundefined、結果が悪くなります。

だから、書くことを忘れないでくださいコンストラクタを呼び出しますnew慣例により、正常な機能とコンストラクタ、区別するために、コンストラクタ最初の文字を大文字にする必要がありますが、として文法チェッカーのいくつかのように、最初の文字は、小文字、通常の関数であるべきjslintはあなたがリークが検出された書き込みを助けることができるようになりますnew

最後に、我々は書くことができるcreateStudent()パッケージ内のすべての機能をnew操作します。このような一般的なプログラミングモデル:

 

関数学生(小道具){
     この .nameの= props.name || '匿名'; // デフォルト値'匿名' 
    この .grade = || props.grade 1; // デフォルト値1 
} 

Student.prototype.hello = 関数(){ 
    警告( 'こんにちは、' + この .nameの+ '!' ); 
}; 

関数createStudent(小道具){
     返す 新新(小道具||学生を{})
}

このcreateStudent()機能は、いくつかの大きな利点があります:まず、必要はありませんnewあなたも渡すことができますので、2番目のパラメータは非常に柔軟で、渡すことはできません呼び出すために:

VaRの暁= createStudent({ 
    名: '小明' 
})。

xiaoming.grade; // 1

オブジェクトが作成されている場合は、我々だけで、財産の残りの部分はデフォルト値を使用することができます必要なプロパティの一部を渡す必要があり、多くの属性があります。引数がオブジェクトであるので、我々は、パラメータの順序を覚えておく必要はありません。あなたから起こる場合はJSON、オブジェクトを取得するには、直接作成することができますxiaoming

 

おすすめ

転載: www.cnblogs.com/fqh123/p/10963248.html