オブジェクト指向 Javascript の 1 つ (はじめての Javascript 入門)_js オブジェクト指向

1. Javascript の最大の特徴はその柔軟性です。フロントエンド開発者は、関数型プログラミング スタイルまたはより複雑なオブジェクト指向プログラミング スタイルのいずれかを使用できます。どのスタイルを採用しても、いくつかの非常に便利なタスクを実行できます。したがって、JavaScript はプロセス指向言語であり、オブジェクト指向言語のプログラミング パターンやイディオムを模倣できるオブジェクト指向言語でもあります。例を使用して、アニメーションの開始と停止を説明しましょう。

関数型プログラミングのスタイルに慣れている場合、コードは次のようになります:

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

function startAnimation() {
//アニメーションを有効にする
}
function stopAnimation() {
//アニメーションを停止します
}

このメソッドは単純ですが、状態を保存し、内部状態のみを操作するアニメーション オブジェクトを作成することはできません。以下ではクラスを定義します:

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

var Anime = function() {
//アニメーション クラス
};
Animation.prototype.start = function() {
//アニメーションを有効にする
}; function() {
//アニメーションを停止します
};
/*次のように使用します*/
var anim = new Anime();
anim .stop() ;


クラス定義を宣言にカプセル化する場合、コードは次のとおりです:

コードをコピー コードは次のとおりです。

var Anime = function() {

//アニメーション クラス
};
Animation.prototype = {
start: function() {
//アニメーションを有効にする
},
stop: function(){
//アニメーションを停止
}
}; 🎜>
この方法では、オブジェクトのプログラマーがより親しみやすいように見えるため、より複雑な記述方法を試すことができます:

コードをコピー

コードは次のとおりです。 Function.prototype.method = function(name, fn){ this.prototype[name] = fn; var Anime = function() {

//アニメーション クラス

}
Animation.method("start", function(){
//アニメーションを有効にする
}); Animation.method("stop", function( ){
//アニメーションを停止
});


新しいメソッドを追加するために、Function クラスのメソッド メソッドを拡張しました。 name は関数名を表し、fn は関数の特定の実装を表します。この記述方法に基づいて、関数サポート チェーン呼び出しを行うことができます:




コードをコピーします

コードは次のとおりです:

Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this; } var アニメーション = function( ) {

//アニメーション クラス

};
Animation.method("start", function(){
//アニメーションを有効にする
}).method("stop", function( ) {
//アニメーションを停止
});


これまで、コード量、コーディング効率、実行パフォーマンスが異なる 5 つの異なるプログラミング スタイルを見てきました。現在のプロジェクトに最適なプログラミング スタイルで作業できます。

2. Javascript は型付けが弱い言語です。変数を宣言するときに型を指定する必要はありませんが、型がないという意味ではありません。 Javascript には、ブール型、数値型、文字列型、オブジェクト型と関数型、そして最後に空型と未定義型の 3 つの基本型が含まれています。プリミティブ型は値によって渡され、他の型は参照によって渡されます。変数の代入に応じて型を変更したり、基本型同士を変換したりすることができます。 toString() は数値またはブール値を文字列に変換でき、parseInt() と parseFloat() は文字列を数値に変換でき、二重の「not」演算は文字列または数値をブール値に変換できます。

3. Javascript 関数は「ファーストクラス」オブジェクトです。関数は変数に格納したり、引数として他の関数に渡したり、他の関数からの戻り値として渡したり、実行時に構築したりできます。関数を扱う場合、オブジェクト指向を構築するための基礎となる、優れた柔軟性と強力な表現力がもたらされます。匿名関数は、function() {...} を通じて作成できます (関数名なしで、変数に割り当てることもできます)。以下に例を示します。

コードをコピー


コードは次のとおりです。

(function( ){ var a = 10; var b = 5; alert(a * b);//Return 50 })();//関数定義はすぐに実行されます。 🎜>

すぐに実行できるのは関数宣言の後ろに括弧があるからです。しかし、括弧内に何もないということが完全に当てはまるわけではないことがわかります。

コードをコピー コードは次のとおりです。

(function(a, b){
alert (a * b);//Return 50
})(10, 5);//前の関数と同等

この匿名関数は前の関数と同等です。ただし、変数は関数内になく、内部で宣言されていますが、外部から直接渡されます。実際、この匿名関数は戻り値を持ち、それを変数に代入することもできます。

コードをコピー コードは次のとおりです。

var c = (function(a, b ){
return a * b;//Return 50
})(10, 5);//前の
alert(c) と同等;//50

匿名関数 最大の用途はクロージャの作成です。いわゆるクロージャは、埋め込み関数によって生成される保護された変数空間です。 Javascript には関数レベルのスコープがあるため、関数内で定義された変数には関数の外部からアクセスすることはできません。関数は、呼び出し元のスコープではなく、定義されているスコープ内でのみ実行されます。このように、変数を匿名関数でラップすることで変数を保護できます。たとえば、次のようにプライベート変数を作成できます:

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

var c;
(function(){
var a = 10;
var b = 5;
c = function(){
return a * b; //return 50
}
})();
c();//c は、匿名関数

の外部で実行された場合でも、a、b にアクセスできます。オブジェクトは「変数」です。すべてがオブジェクト (3 つの基本タイプを除く) であり、すべてのオブジェクトは変更可能です。これは、他の言語には存在しないいくつかのテクニックを使用できることを意味します。たとえば、関数に属性を動的に追加します。

コードをコピー コードは次のとおりです。

function displayError(error){
displayError.numTimesExecuted ;
alert(error);
}
displayError.numTimesExecuted = 0;// 定義済みのクラスとオブジェクトを変更できることを意味します

プロトタイプ メカニズム クラスのインスタンスが作成されて動的に追加された場合、そのインスタンスは定義されたオブジェクトに対して引き続き有効です。例:

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

function person(name, age ) {
this.name = 名前;
this.age = 年齢;
person.prototype = {
getName: function() {
return this.name; 🎜>},
getAge: function() {
return this.age;
}
} // まず 2 つの変数を定義します
var miracle = new Person(" ", 28 );
var mike = new Person("Mike", 32);
//メソッドを動的に追加
person.prototype.getGreeting = function() {
return "Hello " this.getName () "!";
//displayGreeting() は Miracle
miracle.displayGreeting = function() {
alert(this.getGreeting()); に対してのみ有効です。
}


オブジェクトの可変性に関連するのはリフレクション (「イントロスペクション」とも呼ばれます) です。これは、実行時にオブジェクトのプロパティとメソッドをチェックし、開発中であってもこの情報を使用してクラスをインスタンス化し、メソッドを実行します。名前を知る必要はありません。オブジェクトのこれら 2 つの特性を利用すると、オブジェクト指向言語の高度な機能を完全に模倣できますが、JavaScript のオブジェクトは実行時に変更できることに注意してください。

5. Javascript には「継承」を実装する才能があります。ここで簡単に説明します。JavaScript の継承には、「クラス」の継承とオブジェクトベースのプロトタイプの継承が含まれます。このトピックについては、次の記事で詳しく説明します。

最後に、JavaScript のような一見手続き型の言語を扱うためにオブジェクト指向とデザイン パターンのアイデアを使用する利点は何でしょうか。参考までに次の点をまとめました。

(1) 保守性。これはモジュール間の結合を減らすのに役立ち、プロジェクト内のコードをモジュールと機能の責任に応じて分割できます。

(2) コミュニケーションがとりやすい。大規模なチームの場合、他のチーム メンバーの詳細にあまり注目することなく、非常に簡単な言葉でデザイン パターンを使用して、実装を担当する機能モジュールの概要を提供できる可能性があります。

(3) パフォーマンスを向上させます。パターンを利用すると、クライアントに送信されるコードの量が減り、プログラムの実行速度が向上します。

もちろん、メリットもあればデメリットもあります。欠点は次のとおりです:

(1) 複雑さが比較的高くなります。保守性を確保するには高度なコードの再構築とモジュール分割が必要であり、一部の初心者にとってはすぐに適応するのは困難です。

(2)。一部のモードでは実際にパフォーマンスが低下します。ただし、プロジェクトのニーズによっては、この影響は些細なものであるか、許容できない場合があります。

したがって、適切なシナリオを使用することがデザイン パターンの真の適用であることを誰もが理解することをお勧めします。やみくもに適用したり、間違ったシナリオで使用したりすることは誤用であり、使用しない方がよいでしょう。