👨🏼‍⚖️ 🤝 👨🏿‍🍳 カンフー：JavaScriptスタイル 🧑🏼 👦🏾 👨‍🏫

この記事は、 habrahabrに関する別の記事へのコメントとして始まりました。最初のシートを書いた後、私はコメントが広すぎることに気付きました:)。私の意見では見逃した点に集中したいので、書くことにしました。この記事の制限は、すべてを可能な限りアクセス可能にすることを説明することであり、ここで用語の定義に数学的な正確性を求めないことですが、数学者が彼らだけに明確な高解像度の定義を見つけるリンクを囲みます:)

おそらくJSに関するすべての記事は、その過小評価についての言葉から始めるのが慣習です:)本当です:)数年前にJSが私のお気に入りの言語であると話したとき、彼らはちょうどHTMLで彼の最初のページを書いた10代の若者のように私を見ていたそして、彼が作品がどのように行くかを知っているだけだと言ったグランドマスターとして私を知っている人々:)。そのような人々はそれほど小さくはなりませんでした、悲しいかな:(

したがって、最初のポイント-JavascriptがJavaやC ++と根本的に異なることについては何も言われていません。言語を作成する際の基礎となるプログラミングのアプローチ（パラダイム）の違い。私は「どちらが良いですか？」と評価しません。いずれにせよ、誰がより便利ですか:)または好き:)

従来のクラスオブジェクトとプロトタイプ パラダイムの違い

JSを軽Mostするほとんどの人は、OOP言語ではないかのように彼のことを話します:)。まず、これらは2つの異なるものであり、まったく比較することはできません。もちろん、C ++またはJavaでプログラミングするときに習得したスキルを使用してJSでプログラミングできますが、それほど効果的ではありません。 JSの動作は異なります。クラスはなく、オブジェクトがあります（気を付けないで、記事を読んでください）。これは、JSで抽象化、カプセル化、継承、またはポリモーフィズムを実行できないという意味ではありません。カプセル化、継承、およびコンストラクターの動作の実装における主な違い。 JSでは、ほとんどすべてのプロトタイプ型言語と同様に、カプセル化という用語を使用する必要があり、クロージャーがあります。

短絡

habrで既に閉鎖に関する記事があったことに気づくでしょう。「指で」説明し、例を追加してみます。

JSのクロージャは、変数が意味をなす範囲です:)。これは、オブジェクトまたは関数の定義である場合があります。変数は、プリミティブまたはオブジェクトまたは関数のいずれかです。ふう...今、最愛の人、例：

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

function bicubic(count) { var values = []; for ( var i = 0; i < count; i++) { values[i] = ( function (n) { return function () { return Math.pow(n, 3); } } )(i); } return values; } var vals = bicubic(10); alert( vals[3]() ); * This source code was highlighted with Source Code Highlighter .

彼らが私にこれらの行を見せて、「これは何だ」と言うように頼んだら、私はそれを理解するために1分以上費やします:)これはまさにクラスベースの言語が過剰なコード記述につながるという声明でJSサポーターを強くするものですプログラマーは、階層とクラスの相互接続に焦点を合わせていますが、これは私の意見では正しいと思います。

順番に見てみましょう:)

配列を返すバイキュービック関数が作成されます。
トリックは、それらが配列メンバーであるということです-これらはパラメーターなしの関数です：Math.pow（n、3）。この場合、閉ざされた奇跡のために、nはサイクルの通過時にiの値になり、サイクルの後ではありません！
括弧内の魔法（...）（i）は、パラメーターiを使用した関数呼び出しと、括弧内のこの関数の定義です。

不必要にサイクルi = countを通過した後、これらの括弧なしでは、まったく異なる答えが得られます-定数10'000で、27があります。

ちなみに、この手法はサーキットブレークと呼ばれます。

そのため、 jQueryでは、このフレームワークのプラグインを構造内に記述することをお勧めしています（... your plugin ...）（）;。これにより、次のことが可能になります。

安全なコードを書く
グローバル変数でブラウザをオーバーロードしないでください

インスタンス、コンストラクター、オブジェクト、およびプロトタイプ

だから私は最近、JSにはクラスはないが、オブジェクトがあると書いた。次のことを念頭に置いていました。

クラス指向言語では、クラスコンストラクターを呼び出すことにより（場合によってはパラメーターのセットを使用して）、新しいインスタンスが作成されます。結果のインスタンスには、クラスによってハードコーディングされた構造と動作があります。ウィキペディアの行は次のとおりです。

プロトタイプ指向のシステム（たとえば、JS）では、新しいオブジェクトを作成するための2つのメソッドが提供されます。既存のオブジェクトのクローンを作成するか、ゼロからオブジェクトを作成します。オブジェクトをゼロから作成するために、プログラマーには、オブジェクトにプロパティとメソッドを追加するための構文ツールが用意されています。将来的には、クローンの完全なコピーを結果のオブジェクトから取得できます。クローン作成のプロセスでは、コピーはプロトタイプのすべての特性を継承しますが、その時点から、コピーは独立して変更可能になります。一部の実装では、コピーはプロトタイプオブジェクトへの参照を保存し、それらの機能の一部をそれらに委任します。ただし、プロトタイプを変更すると、そのすべてのコピーに影響する場合があります。他の実装では、新しいオブジェクトはプロトタイプから完全に独立しています。

デモンストレーション：

関数 win（）{
this .open = function （）
{
return "open 1" ;
}
}
win.open = function （）{
return "open 2" ;
}
アラート（win.open（））; // 1. 2を開く
win.prototype = {
保存：関数（）
{
return "open 3" ;
}
}
アラート（win.save（））; // 2.エラー-保存なし
win.prototype.open = function （）
{
return "open 4" ;
}
アラート（win.open（））; // 3.開く2
var vista = new win（）;
アラート（vista.open（））; // 4.オープン1
アラート（vista.save（））; // 5. 3を開く
vista.open =（
関数（）
{
return "open 5" ;
}
）（）;
アラート（vista.open）; // 6. 5を開く
アラート（win.open（））; // 7. 2を開く
*このソースコードは、ソースコードハイライターで強調表示されました。

「Open 4」は取得できません。なぜなら、 openメソッドはオブジェクト自体で定義されますが、保存には適用されません。

気配りのある読者は私に尋ねます-この悪魔的な混合物のコンストラクタはどこにありますか？はい、彼はここにいませんでした。コンストラクタはオブジェクトそのものであり、クローンが作成されると、new演算子を使用するか、オブジェクト自体を初期化します。デモンストレーション：

関数 win（）
{
var str = "open 1" ;
this .open = function （）
{
return str;
}
}
アラート（（新規勝利（））。オープン（））; // 1を開きます
*このソースコードは、ソースコードハイライターで強調表示されました。

JSでオブジェクトをゼロから作成する、「これ」！指の筋肉の努力を節約するのに役立つ例を挙げます。

関数プラグイン（オプション）
{
オプション=オプション|| {};
options.list = options.list || [];
//さらに安全に作業できます
//オプション、そのプロパティをチェック、たとえば
//そして、リストと配列のように
}
*このソースコードは、ソースコードハイライターで強調表示されました。

プロトタイプ、javascriptの「継承」

暗い部屋で黒猫を見つけることは非常に困難です、特にそこにいない場合:)

©民俗の知恵

JSには継承がなく、複数ではありません。各オブジェクトにはプロトタイプがあります。これは、複数のオブジェクトまたはそれらのインスタンス間で共有でき、その後変更できるオブジェクトです:)

まとめ

OOPパラダイムのために祈る子供たち、目を覚ますと、他の多くのプログラミングパラダイムがあります。最高ではない、特定のタスクに最適なものがあります。 JSは、その下にプロトタイププログラミングパラダイムの非常に強力な基盤があるため、そのニッチを長い間占有している言語の1つです。

残りは、彼らが何か役に立つことを学んだことを望みます:)

よろしく、アーサー・ドゥドニック

最も価値のある人間の特性-自己改善の欲求©

カンフー：JavaScriptスタイル

従来のクラスオブジェクトとプロトタイプ パラダイムの違い

短絡

インスタンス、コンストラクター、オブジェクト、およびプロトタイプ

プロトタイプ、javascriptの「継承」

まとめ

More articles:

従来のクラスオブジェクトとプロトタイプパラダイムの違い