JavaScript オブジェクト指向の 15 分間のチュートリアル

このガイドを読めば、美しいオブジェクト指向 JavaScript コードの書き方をすぐに学べるようになると約束します。開発者にとって、簡潔な JavaScript コードの作成を学ぶことは非常に重要です。Node.js などのテクノロジーの登場により、JavaScript を使用して MongoDB などの永続的なデータベースにクエリを実行できるようになりました。データストレージ。
今すぐオブジェクト指向 JS (OO JS) の作成を始めてください。ご質問がある場合、または何かを見逃した場合は、以下のコメント欄でお知らせください。
リテラル表記
リテラル表記は JavaScript でオブジェクトを作成する方法の 1 つにすぎません。はい、複数の方法があります。オブジェクト インスタンスを作成する場合は、リテラル表記法が推奨される方法です。
var bill = {};
上記のコードはあまり役に立ちません。空のオブジェクトを作成するだけです。このオブジェクトにいくつかのプロパティとメソッドを動的に追加してみましょう。
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahaha!' );
};
ここでは、「name」属性を追加し、値を「Bill」に割り当てました。 Eヤギ」。事前に空のオブジェクトを作成する必要はなく、上記のすべてを 1 ステップで行うことができます。
var bill = {
name: "Bill E Goat",
sound: function() {
console.log( 'bah!' );を使用する を使用する を使用するプロパティやメソッドへのアクセスも簡単です。
bill.name; // "Bill E Goat"
bill.sound(); // "bahaha"
属性名が有効な識別子でない場合でも、次のようにアクセスできます:
bill['name']; / / "Bill E Goat"
メソッドを呼び出すときは、メソッド名の後に括弧のペアを追加して呼び出す必要があることに注意してください。現在のサウンド メソッドをオーバーライドし、パラメーターを渡して呼び出しましょう:
bill.sound = function(noise) {
console.log(noise);
};
bill.sound("brrr!"); // " brrr!" 彼は寒いです
さて、パラメーター (ノイズ) を渡し、メソッド内でそれにアクセスしました。引き続き、name 属性にアクセスするメソッドを追加しましょう。
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill.sayName() // "Hello Bill E Goat"
this.propertyName
bill.sayName; // function
sound というローカル メソッドをオブジェクト sound に割り当てます。ここで、sound の後に括弧を追加し、呼び出すパラメータを渡すことができます。それがその方法です。ビルのクローンを作ろうとしたらどうなるでしょうか?
var sally = bill;
sally.name; // "ビル E ヤギ"、でも彼女の名前はサリーです
sally.name = "サリー";
sally.name; // "サリー"、より良い
bill.name; ; // "Sally"、ああ、Bill に何が起こったのか
上の例では、新しい変数 sally を作成し、それを bill と等しくしました。ここで、sally と bill はメモリ内の同じオブジェクトを参照します。一方のオブジェクトを変更すると、もう一方のオブジェクトにも影響します。
別の例を見てみましょう:
bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
varsayName = bill.sayName;
sayName; // function, OK;これまでのところは良好です
sayName(); // 「こんにちは」、なぜ Bill の名前が出力されなかったのですか?
bill の name 属性はローカル変数であり、sayName メソッドはグローバル スコープで作成されるため、この名前になります。 name の値をグローバル スコープで検索します。しかし、問題は名前が定義されていないことです。グローバル変数名を定義して、何が起こるかを見てみましょう:
var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"
ここでは、グローバル変数名を作成し、値 "Bearded Octo" を割り当てます。 SayName メソッドを呼び出すと、グローバル スコープで名前が検索され、値「Bearded Octo」にアクセスされます。コンストラクターの記法を見てみましょう。
コンストラクター記法
コンストラクター記法は、オブジェクト指向 JavaScript を記述するもう 1 つの方法です。オブジェクトの初期プロパティ値とメソッドを設定する必要がある場合、またはオブジェクトのさまざまなインスタンスを作成する予定だが、それらのプロパティとメソッドが異なる場合は、コンストラクター表記が推奨されます。まずは空のオブジェクトを作成しましょう:
function Game() {};
クラスであることを示すために最初の文字を大文字にするのが一般的であることに注意してください。このクラスを使用して新しいオブジェクトを作成しましょう:
var zelda = new Game();
zelda.title = "ゼルダの伝説"
smb.title = "スーパーマリオブラザーズ"; zelda.title; // 「ゼルダの伝説」
smb.title; // 「スーパーマリオブラザーズ」
オブジェクトに独自のプロパティが追加されました。オブジェクトを作成するときに、値をプロパティに渡したり、後で変更したりできます。
function Game(title) {
this.title = typeof title !== '未定義' ? title : "";
};
var zelda = new Game("ゼルダの伝説");
zelda.title;ゼルダの伝説"
zelda.title = "時のオカリナ";
zelda.title; // "時のオカリナ"
varblank = new Game();
blank.title; // ""
2行目可 A少しわかりにくい。ここでは三項演算子を使用していますが、これは if else ブロックを 1 行に収めるための単なる方法です。これは以下と同等です:
if (typeof title !== 'unknown') {
this.title = title;
} else {
this.title = "";
}
//
this と同じです.title = typeof title !== '未定義' ? title : "";
このオブジェクトの作成時に title パラメーターが渡されると、オブジェクトの title 属性が設定されます。渡されない場合は、デフォルト値「」に設定されます。
このプロパティにアクセスするメソッドを作成できます:
zelda.loveTitle = function() {
console.log( "I love " + this.title );
};
zelda.loveTitle() // "I love時のオカリナ」
それはきれいに見えますが、もっと良いかもしれません。 Game クラスにメソッドを追加して、Game クラスから作成されたすべてのオブジェクトがこのメソッドを持つようにすることができます。 Game.prototype.heartIt = function() {
console.log( "I heart " + this.title );
};
zelda.heartIt(); // "時のオカリナに感謝します"
smb.heartIt() // "スーパーマリオブラザーズに感謝します
結論
このチュートリアルが JavaScript オブジェクト指向の学習に役立つことを願っています。オブジェクト指向にも多くの側面があり、それについては今後のチュートリアルで紹介します
。