フレキシブルな言語---JavaScript
18005 ワード
四年間の大学生活を終えて、白さんは自信満々に応募したM会社に来ました.今日は入社初日です.プロジェクトマネージャーは認証フォームの機能を割り当てました.内容は多くなく、ユーザー名、メールボックス、パスワードなどを検証するだけです.
入社初日
白さんは需要を受けてみました.簡単な感じで、いくつかの関数を書きました.
その時、白が提出するコードに頭を振っているのを見たプログラマーの小銘が、「白さん、ちょっと待ってください.提出しないでください.」
どうしましたか
グローバル変数がたくさん作成されましたね.
変数?関数をいくつか書いただけです.
関数は変数ではないですか?
その時、シロは戸惑って、「関数は変数か?」と思って、顔を一瞬沈めました.
関数の別の形式
メイさんはこの状況を見て急いで笑いながら言いました.「焦らないでください.見てください.このようにいくつかの変数を宣言してあなたの機能を実現したらいいですか?」
「はい、これだけは事前に声明しておきますが、このように見ると3つの関数を変数に保存して機能を実現しています.あなたが書いているのはあなたの変数名をFunctionの後ろに置いているだけです.あなたの変数も表しています.だからあなたも3つのグローバル変数を宣言しています.」
これは何か問題がありますか?
「機能的にはもちろん大丈夫ですが、今日はチームに参加しました.チーム開発の中であなたが書いたコードは自分のことだけではなく、他人に影響を与えないことも考えなければなりません.他の人も同じ方法を定義すれば、既存の機能が上書きされます.いろいろな方法を定義すれば、このカバーの問題は分かりにくいです.」
「どうやって避けるべきですか?」白さんが聞きました.
「それらを一つの変数に保存してもいいです.カバーまたはカバーされるリスクを減らすことができます.もちろんカバーされると、すべての機能が無効になります.このような現象も明らかで、あなたも自然に気づきやすいです.」
「でも、どうすればいいですか?」白さんは、待ちきれないほど追いかけてきました.
オブジェクトで変数を編集
「当てるとすぐ聞きます.」
はい、簡単に話してください.
オブジェクトはご存知ですか?属性と方法があります.もし私たちがその属性や方法にアクセスするなら、点文法で下へ検索してもいいです.測定対象を作成して、私たちの方法を中に入れます.
えっと、そうですか?でも、文法を通して使い方ができるなら、私達もこのように作成できますか?
オブジェクトの別の形式
もちろんです.まず対象を宣言して、それに方法を追加します.もちろんJavaScriptの関数も対象です.だから、そうしてもいいです.
「でもコピーは何の役にも立たないですか?」と、白さんが聞きました.
例をあげましょう.デザインが好きなら、この本を買って帰って、あなたの仲間が見たら、とても役に立ちます.彼らもどうしますか?本はこれです.でも、もしあなたが買ったのがプリンタだったら、いいですよね.たとえパートナーがいくら多くても、彼ら全員に一冊ずつ印刷する能力があります.
「えっと、ちょっと分かりましたが、どうすればいいですか?」
真贋の相手
小銘は「簡単にコピーしたいなら、これらの方法を関数の対象に置いてもいいです.」と説明しました.
「うん、そうです」銘さんは続けて言いました.「新しい相手を作ることによって、私達の需要を完成させましたが、彼は本当の意味でクラスの創建方式ではなく、作成した対象aと対象のCheckObjectは何の関係もありません.(帰ってきた相手自体はCheckObjectの対象とは関係がないです.)だから、もう少し改造します.」
「じゃあ、これを使って、前のように相手を作る方法はありますか?」と尋ねた.
いいえ、クラスである以上、キーワードnewで作成します.
「もし私と私の子供たちがクラスを具体化したら、私たちはみんな自分なりの方法を持っているでしょう」と白さんが不思議そうに聞きました.
検出クラス
もちろん、すべての方法を関数の内部に置いています.thisによって定義されています.だから、newキーワードを使って新しいオブジェクトを作成するたびに、新しく作成したオブジェクトはクラスのthis上の属性をコピーします.だから、これらの新規作成の対象は自分なりの方法があります.処理します.」
「わかりました.でも、このように定義するクラスは次のようにしますか?」
「間違いないです.しかし、3つの方法を呼び出しましたが、対象のa書に対して3回書きました.これは避けられます.あなたが宣言した方法の最後に現在のオブジェクトを返します.JavaScriptでthisは現在のオブジェクトを指しています.だから、それを返してもいいです.例えば最初に書いた相手は覚えていますか?変更は簡単です.これでいいです.」
シロはこれらの見たこともないコード方式を振り返っています.心の中はとても興奮しています.小銘はシロがJavaScriptにこんなに夢中になっているのを見ました.
「prototype.jsのコードを見たら、次のような書き方を思いついたと思います.」
「prototype.jsは何ですか?」白さんが聞きました.
「JavaScriptフレームの中には多くの方法が封入されています.その最大の特徴は、ソースオブジェクト(JavaScript言語は、Function、Aray、Objectなどのオブジェクトクラスを提供しています.)の拡張です.たとえば、各関数に検出メールを追加する方法は、このようにすればいいです.」
「えっと、この方法は変わっていますね.でも、チェーン式の添加方法は、addMethodでthisを返してもいいですか?これでいいですか?」
シロは考えました.「添加方法はthisを戻すことができるので、添加方法ごとにthisを戻すことができますか?」
白さんはこう書きました.
methods.checkName()checkEmail()
白さんは興奮して言いました.
方式を変えて使う方法.
「でも、あなたがテストする時は、関数式の呼び方を使いますか?クラスの呼び方に慣れている学生にとっては、このように簡単に変えられます.」
「JavaScriptは柔軟な言語であり、もちろん関数はその中で1等の公民を演じています.だからJavaScriptを使って、より多くの優雅な芸術コードを作成することができます.」
入社初日
白さんは需要を受けてみました.簡単な感じで、いくつかの関数を書きました.
function checkName(){
//
}
function checkEmail(){
//
}
function checkPassword(){
//
}
......
自分のコードをチームのプロジェクトに提出します.その時、白が提出するコードに頭を振っているのを見たプログラマーの小銘が、「白さん、ちょっと待ってください.提出しないでください.」
どうしましたか
グローバル変数がたくさん作成されましたね.
変数?関数をいくつか書いただけです.
関数は変数ではないですか?
その時、シロは戸惑って、「関数は変数か?」と思って、顔を一瞬沈めました.
関数の別の形式
メイさんはこの状況を見て急いで笑いながら言いました.「焦らないでください.見てください.このようにいくつかの変数を宣言してあなたの機能を実現したらいいですか?」
var checkName = function(){
//
}
var checkEmail = function(){
//
}
var checkPassword = function(){
//
}
同じです.ただ…」「はい、これだけは事前に声明しておきますが、このように見ると3つの関数を変数に保存して機能を実現しています.あなたが書いているのはあなたの変数名をFunctionの後ろに置いているだけです.あなたの変数も表しています.だからあなたも3つのグローバル変数を宣言しています.」
これは何か問題がありますか?
「機能的にはもちろん大丈夫ですが、今日はチームに参加しました.チーム開発の中であなたが書いたコードは自分のことだけではなく、他人に影響を与えないことも考えなければなりません.他の人も同じ方法を定義すれば、既存の機能が上書きされます.いろいろな方法を定義すれば、このカバーの問題は分かりにくいです.」
「どうやって避けるべきですか?」白さんが聞きました.
「それらを一つの変数に保存してもいいです.カバーまたはカバーされるリスクを減らすことができます.もちろんカバーされると、すべての機能が無効になります.このような現象も明らかで、あなたも自然に気づきやすいです.」
「でも、どうすればいいですか?」白さんは、待ちきれないほど追いかけてきました.
オブジェクトで変数を編集
「当てるとすぐ聞きます.」
はい、簡単に話してください.
オブジェクトはご存知ですか?属性と方法があります.もし私たちがその属性や方法にアクセスするなら、点文法で下へ検索してもいいです.測定対象を作成して、私たちの方法を中に入れます.
var CheckObject = {
checkName : function(){
//
},
checkEmail : function(){
//
},
checkPassword : function(){
//
}
}
「この時、私たちはすべての関数をCheckObjectオブジェクトとする方法で、これは一つのオブジェクトしかないです.名前のCheckObject.checkNameを検出するなど、それらを使うのも簡単です.私たちが元々使っていた関数の前にもう一つのペアの名前が増えました.」えっと、そうですか?でも、文法を通して使い方ができるなら、私達もこのように作成できますか?
オブジェクトの別の形式
もちろんです.まず対象を宣言して、それに方法を追加します.もちろんJavaScriptの関数も対象です.だから、そうしてもいいです.
var CheckObject = function(){};
CheckObject.checkName = function(){
//
}
CheckObject.checkEmail = function(){
//
}
CheckObject.checkPassword = function(){
//
}
「前の方法と同じように使っています.例えば、CheckObject.checkName()」と銘記は続けて言います.「今はあなたのニーズに応えることができますが、あなたが書いた相手の方法を使いたいと思われても困るのです.このオブジェクトは一つのコピーができないからです.あるいは、この対象クラスはnewキーワードで新しいオブジェクトを作成した場合、新たに作成したオブジェクトはこれらの方法を引き継ぐことができません.」「でもコピーは何の役にも立たないですか?」と、白さんが聞きました.
例をあげましょう.デザインが好きなら、この本を買って帰って、あなたの仲間が見たら、とても役に立ちます.彼らもどうしますか?本はこれです.でも、もしあなたが買ったのがプリンタだったら、いいですよね.たとえパートナーがいくら多くても、彼ら全員に一冊ずつ印刷する能力があります.
「えっと、ちょっと分かりましたが、どうすればいいですか?」
真贋の相手
小銘は「簡単にコピーしたいなら、これらの方法を関数の対象に置いてもいいです.」と説明しました.
var CheckObject = function(){
return {
checkName : function(){
//
},
checkEmail : function(){
//
},
checkPassword : function(){
//
}
}
}
シロはコードを見て考えて言いました.「えっと、この関数を呼び出すたびに、前に書いたオブジェクトを返します.他の人がこの関数を呼び出すたびに新しいオブジェクトに戻ります.このように実行すると、表面上はCheckObjectのオブジェクトです.実際には新しいオブジェクトに戻ります.このようにすると、それぞれの人が使う時にはお互いに影響しません.たとえば、メールを検出したいです.」このようにしましょう.」var a = CheckObject ();
a.checkEmail ();
クラスでもいいです「うん、そうです」銘さんは続けて言いました.「新しい相手を作ることによって、私達の需要を完成させましたが、彼は本当の意味でクラスの創建方式ではなく、作成した対象aと対象のCheckObjectは何の関係もありません.(帰ってきた相手自体はCheckObjectの対象とは関係がないです.)だから、もう少し改造します.」
var CheckObject = function(){
this.checkName = function(){
//
}
this.checkEmail = function(){
//
}
this.checkPassword = function(){
//
}
}
「上のような相手は類として見られます」と続けた.「じゃあ、これを使って、前のように相手を作る方法はありますか?」と尋ねた.
いいえ、クラスである以上、キーワードnewで作成します.
var a = new CheckObject();
a.checkEmail();
「これでCheckObject類で作成した対象ができます.」「もし私と私の子供たちがクラスを具体化したら、私たちはみんな自分なりの方法を持っているでしょう」と白さんが不思議そうに聞きました.
検出クラス
もちろん、すべての方法を関数の内部に置いています.thisによって定義されています.だから、newキーワードを使って新しいオブジェクトを作成するたびに、新しく作成したオブジェクトはクラスのthis上の属性をコピーします.だから、これらの新規作成の対象は自分なりの方法があります.処理します.」
var CheckObject = function(){};
CheckObject.prototype.checkName = function(){
//
}
CheckObject.prototype.checkEmail = function(){
//
}
CheckObject.prototype.checkPassword = function(){
//
}
「このようにオブジェクトのインスタンスを作成する時、作成したオブジェクトが持つ方法は全部同じです.プロトタイプのプロトタイプに依存して順次探します.見つけた方法は同じです.CheckObjectオブジェクト類の原型に結び付けられます.」var CheckObject = function(){};
CheckObject.prototype = {
checkName : function(){
//
},
checkEmail : function(){
//
},
checkPassword : function(){
//
}
}
「ただし、この2つの方法は混ぜてはいけないということを覚えておいてください.そうでないと、後で対象となるプロトタイプのオブジェクトに新しいオブジェクトを割り当てたら、プロトタイプのオブジェクトに値を付ける前の方法を上書きします.」「わかりました.でも、このように定義するクラスは次のようにしますか?」
var a = new CheckObject();
a.checkName();
a.checkEmail();
a.checkPassword();
方法はまたこのように使うことができます.「間違いないです.しかし、3つの方法を呼び出しましたが、対象のa書に対して3回書きました.これは避けられます.あなたが宣言した方法の最後に現在のオブジェクトを返します.JavaScriptでthisは現在のオブジェクトを指しています.だから、それを返してもいいです.例えば最初に書いた相手は覚えていますか?変更は簡単です.これでいいです.」
var CheckObject = {
checkName : function(){
//
return this;
},
checkEmail : function(){
//
return this;
},
checkPassword : function(){
//
return this;
}
}
私たちはこの時彼を使いたいです.このようにすればいいです.CheckObject.checkName().checkEmail().checkPassword();
「もちろん同じ方式でもクラスの原型の対象に入れることができます.」var CheckObject = function(){};
CheckObject.prototype = {
checkName : function(){
//
return this;
},
checkEmail : function(){
//
return this;
},
checkPassword : function(){
//
return this;
}
}
「ただし、使う時もまず作成してください.」var a = new CheckObject();
a.checkName().checkEmail().checkPassword();
関数の祖先シロはこれらの見たこともないコード方式を振り返っています.心の中はとても興奮しています.小銘はシロがJavaScriptにこんなに夢中になっているのを見ました.
「prototype.jsのコードを見たら、次のような書き方を思いついたと思います.」
「prototype.jsは何ですか?」白さんが聞きました.
「JavaScriptフレームの中には多くの方法が封入されています.その最大の特徴は、ソースオブジェクト(JavaScript言語は、Function、Aray、Objectなどのオブジェクトクラスを提供しています.)の拡張です.たとえば、各関数に検出メールを追加する方法は、このようにすればいいです.」
Function.prototype.checkEmail = function(){
//
}
この方法を使う時に便利になります.関数形式に慣れたら、そうしてもいいです.var f = function(){};
f.checkEmail();
「慣れれば、あなたもそうしてもいいです.」var f = new Function();
f.checkEmail();
「しかし、あなたがこのようにすることは私達のところでは許されません.元のオブジェクトFunctionを汚染しているので、他の人が作成した関数もあなたの作成した関数に汚染され、不必要な出費を引き起こします.しかし、統一的な添加方法の機能方法を抽象的に示すことができます.」Function.prototype.addMethod = function(name, fn){
this[name] = fn;
}
「メールの検証と名前の検証方法を追加したいなら、そうしてもいいです.」var methods = function(){};
またはvar methods = new Function();
methods.addMethod('checkName', function(){
//
});
methods.addMethod('checkEmail', function(){
//
});
methods.checkName();
methods.checkEmail();
チェーンで追加できますか?「えっと、この方法は変わっていますね.でも、チェーン式の添加方法は、addMethodでthisを返してもいいですか?これでいいですか?」
Function.prototype.addMethod = function(name, fn){
this[name] = fn;
return this;
}
もちろんです.だからもうちょっと方法を考えたらいいです.var methods = function(){};
methods.addMethod('checkName', function(){
//
}).addMethod('checkEmail', function(){
//
});
じゃ、白さん、チェーンを使いたいなら、どうすればいいですか?シロは考えました.「添加方法はthisを戻すことができるので、添加方法ごとにthisを戻すことができますか?」
白さんはこう書きました.
var methods = function(){};
methods.addMethod('checkName', function(){
//
return this;
}).addMethod('checkEmail', function(){
//
return this;
});
そしてテストします.methods.checkName()checkEmail()
白さんは興奮して言いました.
方式を変えて使う方法.
「でも、あなたがテストする時は、関数式の呼び方を使いますか?クラスの呼び方に慣れている学生にとっては、このように簡単に変えられます.」
Function.prototype.addMethod = function(name, fn){
this.prototype[name] = fn;
}
私たちは前のように方法を追加します.var Methods = function(){};
methods.addMethod('checkName', function(){
//
}).addMethod('checkEmail', function(){
//
});
「ただし、私たちは使う時には注意して、直接に使うのではなく、newキーワードで新しいオブジェクトを作成します.」var m = new Methods();
m.checkEmail();
シロは興奮してこの一行のコードを見て、思わず「これは芸術です」と叫びました.「JavaScriptは柔軟な言語であり、もちろん関数はその中で1等の公民を演じています.だからJavaScriptを使って、より多くの優雅な芸術コードを作成することができます.」