JavaScript の柔軟性により、誰もが自分の習慣に従ってコードを書くことができます。関数型プログラミング手法があり、JavaScript に代わる関数型プログラミングであるオブジェクト指向の出現により、現在広く使用されているオブジェクト リテラルもあります。ここで、いくつかのよく知られたプログラミングの習慣について簡単に説明します。
1. オブジェクトリテラル:
引用した内容は以下の通りです。 var 人 = {
名前：ヌル、
setName:関数(名前){
this.name = 名前;
this.name を返します。
}、
getName:function(){
アラート(この名前);
}
} |
JavaScript の特性を持つプログラミング メソッド。これには、クラス単位で属性名、メソッド setName および getName が含まれています。この時点から、メソッド person.setname('R') を呼び出すのは比較的簡単です。 person の属性とメソッドはすべてプライベートではなく、呼び出すことができます。
2.プロトタイプコンストラクター呼び出しモード
引用した内容は以下の通りです。 var 人 = function(){
this.name = null;
}
Person.prototype.setName = 関数(名前){
this.name = 名前;
}
Person.prototype.getName = function(){
アラート(この名前);
} |
Person クラスを作成し、プロトタイプを使用してクラスを拡張し、メソッドを追加することも非常に一般的なプログラミング方法です。オブジェクト リテラルとの最大の違いは、このクラスのメソッドを呼び出すときに、最初に new を使用する必要があることです (Java と同様)。 var p = new Person();p.getName(); new を使用せずに直接作成すると、このエラーは報告されず、エラーの原因を見つけるのが困難になります。これは Person.prototypel を指していることに由来しており、Person には setName メソッドがありません。
3. 関数型プログラミングに匿名関数を使用する
引用した内容は以下の通りです。 （関数（）{
変数名;
var setName = function(n){
名前 = n;
}
window['person']['setName'] = setName;
var getName = function(){
アラート(名前);
}
window['person']['getName'] = getName;
})() |
クラスの出現の最大の利点の 1 つは、グローバル変数の出現を減らすことです。ただし、関数型プログラミングにまだ慣れている場合は、匿名関数を作成してクロージャを実行することができます。グローバル変数の外観を気にする必要はありません。上記のように、外部変数を使用して内部関数または変数を呼び出すことができます。プライベート変数とプライベートメソッドを作成します。
4. クラスプログラミング（何と呼ぶかわかりません）
引用した内容は以下の通りです。 var person = function(){
変数名 = null;
戻る{
setName:function(n){
名前 = n;
}、
getName:function(){
アラート(名前);
}
}
} |
これはオブジェクト リテラルと非常に似ていますが、メソッドとプロパティをプライベートにできる点が異なります。メソッドの呼び出しは基本的にオブジェクト リテラルと同じです。
5.メソッドチェーン
引用した内容は以下の通りです。 var 人 = function(){
this.name = null;
}
人物.プロトタイプ = {
setName:関数(名前){
this.name = 名前;
これを返します。
}、
getName:function(){
アラート(この名前);
これを返します。
}
} |
jQuery は最も古典的なメソッド チェーン ライブラリです。メソッド チェーンが何であるかをまだ理解していない場合は、次の例を見てください。
引用した内容は以下の通りです。 var p = 新しい人();
p.setName('トム').getName().setName('レイ').getName(); |
各メソッドは return this で終わるため、メソッド連鎖クラスが作成されます。
これらは私がよく知っている方法です。人それぞれの特徴があるため、方法は無限にあります。
1. このポインタについて
これは複数のカテゴリを作成するときに使用されますが、これは実際にはどのような役割を果たしているのでしょうか。まず、継承の例を見てみましょう。
まず Person クラスを作成します。
引用した内容は以下の通りです。 var 人 = function(){
this.name = null;
}
Person.prototype.setName = 関数(名前){
this.name = 名前;
}
Person.prototype.getName = function(){
アラート(この名前);
}
Person.prototype.getAge = function(){
var age = this.age || '';
アラート(年齢);
} |
次に、Children クラスを作成し、Person のすべてのメソッドとプロパティを統合します。
引用した内容は以下の通りです。 var Children = function(年齢){
this.name = null;
this.age = 年齢;
}
Children.prototype = new Person() // Person のプロパティとメソッドを継承します。
Children.prototype.ageJudge = function(){ //Children 用の新しいメソッドも追加します
if(この年齢 > 18){
アラート('大人~');
} それ以外 {
alert('18歳未満の方～');
}
}
Children.prototype.getName = function(){ //getName メソッドをオーバーライドする
var about = this.name + ' ' + this.age;
アラート(約);
}
var tom = 新しい Children(12);
var age = tom.getAge(); //12
var judge = tom.ageJudge(); //18歳未満〜
var setN = tom.setName('トム');
var get = tom.getName(); //トム 12 |
これは継承であり、次に単純な関数の再利用を見ていきます。
引用した内容は以下の通りです。 var SetColor = function(){
this.style.backgroundColor = '#000' //これはウィンドウを指します。
}
document.body.onclick = SetColor //この時点では body を指します。
documnet.getElementById('color').onmouseout = SetColor //これは documnet.getElementById('color') を指します。 これの機能を見た後、これを使用する必要があるかどうかという質問が生じます。簡単な例を見てみましょう。 var setColor = {
init:function(obj){
this.obj = obj //これは setColor を指します。
this.obj.onclick = this.color;
}、
カラー:関数(){
this.style.backgroundColor = '#000' //これは obj を指します。
}
} |
たった 1 つのクラスで、これは 2 つの場所を指しており、学習したばかりの人はこれによって混乱することがあります。また、コードの書き方が少し変わります。
引用した内容は以下の通りです。 var setColor = {
init:function(obj){
setColor.obj = obj;
setColor.obj.onclick = setColor.color;
}、
カラー:関数(){
this.style.backgroundColor = '#000'; //これによりメソッドの再利用が容易になります。
}
} |
このようにすることで、コードをより明確にすることができます。そのため、コードを記述する際には、継承や再利用が行われないことが明らかな場合は、そのコードを再利用できるかどうかを考慮する必要があると個人的に感じています。これはできるだけ使用しないでください。さらに一般的な問題は次のとおりです。
引用した内容は以下の通りです。 var 人 = function(){
this.name = null;
}
Person.prototype.setName = 関数(名前){
this.name = 名前;
}
Person.setName('tom'); //間違った方法: setName メソッドのこれは Person.prototypel を指すことになります。Person には setName メソッドがありません。 |
前に述べたように、このクラスの this が var p = new Person();p.setName('tom'); として記述されていない場合、コンパイル時または実行時にこのエラーは発生しません。エラーが報告されることがあるので、コードを書くときは常に慎重に選択します。
2. クラスのカプセル化
Java では、外部呼び出しを避けるためにクラスのメソッドまたはプロパティをプライベートとして設定できますが、JavaScript にはそのような設定がありません。次のコードを見てください。
引用した内容は以下の通りです。 var 人 = {
名前：ヌル、
init:関数(名前){
this.setName(名前);
}、
setName:関数(名前){
this.name = 名前;
this.name を返します。
}
}
person.init('トム'); |
このクラスには、合計 2 つのメソッド (init と setName) があり、init から setName を実行するか、将来追加されるさまざまなメソッドのみを実行したいので、表示したくないです。
person.setName('トム');
正確には、setName メソッドをプライベートにし、name 属性をプライベートにすることで、クラスの使用時に他のプログラマーが呼び出されたくないメソッドを呼び出すことができなくなります。
では、クラスを適切にカプセル化するにはどうすればよいでしょうか? 別のプログラミング方法を試して、改訂版がどのようになるかを確認してください。
引用した内容は以下の通りです。 var person = function(){
変数名 = null;
var setName = function(n){
名前 = n;
名前を返します。
}
戻る{
init:関数(n){
setName(n);
}
}
} |
このように、本来プライベート化する予定だったメソッドやプロパティもプライベート化することができ、外部から直接呼び出すことはできません。ただし、このプログラミング方法は、特に初心者にとっては読みやすいものではありません。この種のコードは非常に見にくくなり、通常のコードよりも多くのメモリを消費します。
さて、今回はここまでです。次回時間があるときにクロージャとスコープについて話します。
