C# のように継承を実行できないことはわかっていますが、インターネット上で継承が可能であると言及されているのを見てきました。プレーンな JavaScript コードを使用することができない場合、 Ext JSを使用することは可能でしょうか。
6 に答える
JavaScript オブジェクト指向のパラダイムは、プロトタイプに基づいています。「クラス」はなく、オブジェクトだけです。
継承はさまざまな方法で実装できます。より一般的な 2 つの代替案は、「疑似古典」形式と「プロトタイプ」形式です。例えば:
疑似古典継承
これが最もポピュラーな方法だと思います。new演算子で使用するコンストラクター関数を作成し、コンストラクター関数のプロトタイプを介してメンバーを追加します。
// Define the Person constructor function
function Person() {}
Person.prototype.sayHello = function(){
alert ('hello');
};
// Define the Student constructor function
function Student() {}
// Inherit from Person
Student.prototype = new Person();
// Correct the constructor pointer, because it points to Person
Student.prototype.constructor = Student;
// Replace the sayHello method (a polymorphism example)
Student.prototype.sayHello = function () {
alert('hi, I am a student');
}
var student1 = new Student();
student1.sayHello();
プロトタイプ継承
基本的に、オブジェクトをパラメーターとして取り、古いオブジェクトから継承する空の新しいオブジェクトを返すヘルパー関数を作成します。オブジェクトはオブジェクトから継承します。
// Helper function
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
var person = {
sayHello : function () {
alert('Person object');
},
walk : function () {
alert('walk');
}
};
var student1 = Object.create(person);
student1.sayHello = function () {
alert('hello I am a student');
};
もう 1 つの興味深い形式は、寄生継承です。「派生」コンストラクターでは、「ベース」オブジェクト インスタンスを作成します。そのオブジェクトが拡張され、その新しいインスタンスが返されます。
// Person constructor function
function Person(name) {
this.name = name;
}
function Student(value) {
var that = new Person(value);
that.sayHello = function () {
alert('hello I am a student');
};
return that;
}
JavaScriptでオブジェクト指向プログラミングを行った場合は、次のようにクラスを作成できることがわかります。
Person = function(id, name, age){
this.id = id;
this.name = name;
this.age = age;
alert('A new person has been accepted');
}
これまでのところ、クラスの担当者には2つのプロパティしかなく、いくつかのメソッドを提供します。これを行うためのクリーンな方法は、その「プロトタイプ」オブジェクトを使用することです。JavaScript 1.1から、プロトタイプオブジェクトがJavaScriptに導入されました。これは、オブジェクトのすべてのインスタンスにカスタムプロパティとメソッドを追加するプロセスを簡素化する組み込みオブジェクトです。次のように、「prototype」オブジェクトを使用して、クラスに2つのメソッドを追加しましょう。
Person.prototype = {
/** wake person up */
wake_up: function() {
alert('I am awake');
},
/** retrieve person's age */
get_age: function() {
return this.age;
}
}
これで、クラスPersonを定義しました。Personからいくつかのプロパティを継承するManagerという別のクラスを定義したい場合はどうでしょうか。Managerクラスを定義するときに、このすべてのプロパティを再定義する意味はありません。クラスPersonから継承するように設定するだけです。JavaScriptには継承が組み込まれていませんが、次のように継承を実装する手法を使用できます。
Inheritance_Manager = {};
//継承マネージャークラスを作成します(名前は任意です)
次に、継承クラスに、baseClass引数とsubClassas引数を受け取るextendというメソッドを指定しましょう。extendメソッド内に、継承関数inheritance(){}という内部クラスを作成します。この内部クラスを使用する理由は、baseClassプロトタイプとsubClassプロトタイプの間の混乱を避けるためです。次に、次のコードのように、継承クラスのプロトタイプがbaseClassプロトタイプを指すようにします。inheritance.prototype=baseClass。プロトタイプ; 次に、継承プロトタイプを次のようにsubClassプロトタイプにコピーします。subClass.prototype= new inheritance(); 次に、subClassのコンストラクターを次のように指定します。subClass.prototype.constructor= subClass; サブクラスのプロトタイピングが終了したら、次の2行のコードを指定して、いくつかの基本クラスのポインターを設定できます。
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
拡張関数の完全なコードは次のとおりです。
Inheritance_Manager.extend = function(subClass, baseClass) {
function inheritance() { }
inheritance.prototype = baseClass.prototype;
subClass.prototype = new inheritance();
subClass.prototype.constructor = subClass;
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
}
継承を実装したので、それを使用してクラスを拡張できます。この場合、次のようにPersonクラスをManagerクラスに拡張します。
Managerクラスを定義します
Manager = function(id, name, age, salary) {
Person.baseConstructor.call(this, id, name, age);
this.salary = salary;
alert('A manager has been registered.');
}
Personから継承させます
Inheritance_Manager.extend(Manager, Person);
お気づきの方もいらっしゃると思いますが、Inheritance_Managerクラスのextendメソッドを呼び出して、この場合はsubClass Managerを渡し、次にbaseClassPersonを渡しました。ここでは順序が非常に重要であることに注意してください。それらを交換すると、継承は意図したとおりに機能しなくなります。また、サブクラスを実際に定義する前に、この継承を指定する必要があることに注意してください。次に、サブクラスを定義しましょう。
以下のようにメソッドを追加できます。Managerクラスは、Personクラスから継承するため、常にPersonクラスで定義されたメソッドとプロパティを持ちます。
Manager.prototype.lead = function(){
alert('I am a good leader');
}
それをテストするために、2つのオブジェクトを作成しましょう。1つはクラスPersonからのもので、もう1つは継承されたクラスManagerからのものです。
var p = new Person(1, 'Joe Tester', 26);
var pm = new Manager(1, 'Joe Tester', 26, '20.000');
http://www.cyberminds.co.uk/blog/articles/how-to-implement-javascript-inheritance.aspxで、完全なコードとその他のコメントを自由に入手して ください。
JavaScript の継承は、プロトタイプを通じて行われます。キーワードで何も定義しませんclass
が、新しいオブジェクトを構築するためのコンストラクターとして使用される関数を作成します (new
キーワードを使用)。
function person(name) {
this.name = name;
}
person.prototype.getName = function() {
return this.name;
}
var john = new person('john');
alert( john.getName() );
このプロトタイプ メソッドには、次の方法でアクセスできます。
person.prototype.getName
新しく作成されたすべてのオブジェクトは、 などのコア コンストラクター (古典的な継承言語の出身者によってクラス、またはコア オブジェクトと呼ばれることもあります) に基づいて構築されるObject
ため、JavaScript のすべてのオブジェクトは にアクセスできますObject.prototype
。すべてのオブジェクトに対してカスタム メソッドを作成する場合は、次のようにします。
Object.prototype.foo = function(){};
alert( typeof ({}).foo ) // 'function'
重要な注意事項:
- この
this
単語は現在のオブジェクトを参照するために使用されるため、が呼び出さthis.name
れたときに作成されるオブジェクトの name プロパティを設定します。new person
constructorName.prototype.nameOfMethod = function(){}
コンストラクターを定義した後、コンストラクターで新しいプロトタイプ メソッドを定義できます。コンストラクター内で定義する必要はなく、この方法の方が効率的です。- オブジェクトのプロパティを明示的に定義しない限り、私が作成したオブジェクトでは、オブジェクトに直接アタッチされたメソッド
john
がないため、インタプリタはオブジェクトのプロトタイプまで移動し、そこからメソッドにアクセスする必要があります。オブジェクトがプロパティを直接所有しているかどうかを確認するために使用できます。getName
john
john
person.prototype
hasOwnProperty
参照:
JavaScript は、プロトタイプ ベースの継承です。ただし、Ext-js を使用すると、構文を従来の継承構文に近づけることができます。ボンネットの下でまだプロトタイピングを行っているため、注意が必要なニュアンスがいくつかあることに注意してください。主にそれはロードアンドゴーであるため、スクリプトをロードする順序が重要であり、クラス定義は基本的にメモリに配置されます。
そこにはいくつかの良いチュートリアルがあります。最初のドキュメントを読み、このビデオを見ることをお勧めします。Ext は、JavaScript をより Java や C# のように感じさせ、作成するマークアップの量を減らすという点で非常に優れています。ただし、コンポーネントをカスタマイズするための学習曲線が高くなるというトレードオフがあります。言語のスコープをよりよく理解すると、継承の必要性を減らすために、より適切な関数であるミックスインを使用できるようになります。