ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_js オブジェクト指向でクラスを記述する 3 番目の方法

javascript_js オブジェクト指向でクラスを記述する 3 番目の方法

WBOY
リリース: 2016-05-16 18:50:49
オリジナル
746 人が閲覧しました

前の 2 つの利点を活用してください:
a. コンストラクターを使用してクラス属性 (フィールド) を定義します
b. プロトタイプを使用してクラス メソッドを定義します。
3番目の方法があります。この方法はより多くの人が使用しているようです。
3. 包括的なコンストラクター/プロトタイプ

コードをコピーします コードは次のとおりです:

/* *
* 人物クラス: 人物を定義し、属性名と getName メソッドを持ちます
* @param {String} name
*/
function person(name) {
this.name = name;
}
person.prototype.getName = function() {
return this.name ;
}

この方法では、コンストラクターを通じて異なる名前を持つ人々を構築でき、オブジェクト インスタンスも getName メソッドを共有するため、メモリの無駄が発生しません。
しかし、このコーディング スタイルは、プロパティ、コンストラクター (関数)、メソッドがすべて中括弧で囲まれているほどコンパクトではないようです。
コードをコピーします コードは次のとおりです:

public class Person {
//属性 (フィールド)
文字列名;
//コンストラクター (関数)
人(文字列名) {
this.name = name;
//メソッド
String getName () {
return this.name;
}
}

js コードのスタイルをよりコンパクトにするために、プロトタイプ内にぶら下がっているメソッド コードを次のように移動します。関数 Person Inside の中括弧。

コードをコピー コードは次のとおりです:
function Person(name) {
this.name = name;
person.prototype.getName = function() {
return this.name;
}
}

それができるのはすごいようですこのように書いてください!確認

コードをコピー コードは次のとおりです:
var p1 = new Person("Jack ") ;
var p2 = new Person("Tom");
console.log(p1.getName());//ジャック
console.log(p2.getName());// Tom

エラーは報告されず、コンソールは正しく出力します。説明はこんな感じで書けます(笑)。
うーん、完璧ですね。
a. オブジェクト インスタンスはパラメータを渡すことで構築できます
b. オブジェクト インスタンスはすべて、メモリを無駄にせずに同じメソッドを共有します
c. コード スタイルも比較的コンパクトです

person.prototype.getName = function() {
return this.name;
}
を実行すると、不要な繰り返し操作が発生します。 getName メソッドはプロトタイプにハングしており、実行する必要があるのは 1 回だけであるためです。わずかな変更を加えます:

コードをコピーします コードは次のとおりです:
function person (name) {
this.name = name;
if(person._init==unknown) {
alert("一度だけ実行します!"); function() {
return this.name;
}
person._init = 1;
}
}


新しい 2 つのオブジェクト、


コードをコピーします コードは次のとおりです:
var p1 = new Person("Andy");//新しいのが初めて表示されます。一度しか実行しません。 '
var p2 = new Person("Lily");//新しいオブジェクトは今後実行されなくなります


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート