javascript_javascript スキルでオブジェクトを作成するいくつかの方法の概要

はしがき:

Web 2.0 (最も代表的なものは Ajax テクノロジー) の台頭により、JavaScript はプログラマーの目にはもはや「おもちゃの言語」ではありません。 プログラミングは常に簡素化されていますが、「ユーザー エクスペリエンス、パフォーマンス、互換性、スケーラビリティ...」に対する要件は常に向上しており、Prototype、jQuery、ExtJs、Dojo などの優れたフレームワーク (クラス ライブラリ) が登場し、大幅に簡素化されています。ウェブ開発。

JavaScript を徹底的に勉強し、使用し始める人が増えています。もちろん、企業は開発者に対してますます高い要件を求めています。私自身の経験を例に挙げてみましょう。2000 年代初頭には、JavaScript を使用していくつかのページ UI エフェクトを記述し、Web サイトのフォーム検証やその他の操作を行うことができました。当時、それは非常に素晴らしいことだと思いました。しかし今、XMLHttpRequest と JSON が何であるかさえ知らず、JavaScript でのオブジェクト指向/オブジェクトベースのプログラミングさえ理解していなくても、それでも自分を優秀な Web プログラマーと呼ぶ勇気がありますか? (最先端のテクノロジーに注目している友人は、node.js と MongoDB を知っているはずです。どちらも JavaScript から切り離すことはできません。)

JavaScript の柔軟性は、人によって好き嫌いが分かれるところです。通常、始めるのは簡単ですが、習得するのは困難です。 JavaScript OOP/オブジェクトベースのプログラミングを理解することは、プログラマの JavaScript レベルを判断するための分かれ目です。 JavaScript オブジェクトベースのプログラミングでは、最も基本的なことは「オブジェクトの作成」ですが、他の言語指向言語 (Java、C#、C) に慣れている多くのプログラマーは、これに戸惑ったり、適応するのが難しいと感じたりすることがよくあります。したがって、この記事ではまず、JavaScript でオブジェクトを作成する一般的な方法をいくつか紹介します。

1. 単純なオブジェクトの作成 オブジェクト リテラル {} を使用してオブジェクトを作成します (最も単純で理解しやすく推奨)

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

var Cat = {};//JSON
Cat.name="kity"; // 属性を追加し、値を割り当てます
Cat.age=2;
Cat.sayHello=function(){
alter("hello " Cat.name ", 今年は " Cat["age" ] " is old ");//「.」を使用して属性にアクセスすることも、HashMap を使用して
}
Cat.sayHello();// オブジェクトの (メソッド) 関数を呼び出します

2. 関数を使用してクラスをシミュレートします (引数なしのコンストラクター)

2.1 クラスの新しいインスタンスに相当するオブジェクトを作成します

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

function Person(){

}
var personOne=new Person();//関数を定義します。「インスタンス化」する新しいキーワードがある場合、その関数はクラスと見なすことができます
personOne.name="dylan ";
personOne.hobby="coding";
personOne.work=function(){
alert(personOne.name " は現在コーディング中です...");
}

personOne.work();

2.2 パラメーター化されたコンストラクターを使用して実装できるため、定義がより便利でスケーラブルになります (推奨)

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

function Pet(name,age,hobby){
this . name=name;//このスコープ: 現在のオブジェクト
this.age=age;
this.hobby=hobby;
this.eat=function(){
alter("私の名前は「 this.name 」、「 this.hobby 」が好き、そしてグルメでもあります。");
}
}
var Maidou =new Pet("McDull",5,"sleeping") ;// オブジェクトの変換/作成の例

maidou.eat();//eatメソッド(関数)を呼び出す

3. ファクトリメソッドを使用して(オブジェクトキーワード)を作成します

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

var wcDog =new Object();
wcDog .name="Wangcai";
wcDog.age=3;
wcDog.work=function(){
alert("私は " wcDog.name "、ワンワンワン... ... ");
}

wcDog.work();

4. プロトタイプ オブジェクトのプロトタイプ キーワードの使用方法

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

function Dog(){

}
Dog.prototype.name =" Wangcai";
Dog.prototype.eat=function(){
alert(this.name "Is a foodie");
}
var wangcai =new Dog();
旺彩 .eat();

5. 混合モード (プロトタイプとコンストラクター)

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

function Car(name,price){
this.name=name;
this.price=price
}
Car。プロトタイプ. sell=function(){
alert("私は " this.name "、私は " this.price "10,000 元を販売します");
var camry =new Car("Camry",27);camry.sell();

6. 動的プロトタイプ メソッド (次のように考えることができます)これは混合モードの特殊なケースです)

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

function Car(name,price){

this.name=name;
this.price=price;
if(typeof Car.sell=="unknown"){
Car.prototype .sell=function(){
alert("私は " this.name " で、" this.price "10,000 元を販売しています");
}
Car.sell= true;
}
}

var camry =new Car("Camry",27);camry.sell();

上記は、JavaScript でオブジェクトを作成する最も一般的に使用される方法です。初心者はそれを見て失神したり、不安になったりするかもしれません。実際、心配する必要はありません。これらの方法のうち 1 つまたは 2 つを習得するだけでよく、他の方法を理解するだけで済みます。これが JavaScript の柔軟性です。それぞれの方法には長所と短所があるため、明確な推奨事項はありません。理解しやすく習得しやすい方法を選択してください。さらに、コーディング スタイルは人によって異なる場合があります。将来的には、jQuery のソース コードを研究したり、他のプラグインを参照して書き直したり、独自のプラグインを開発したりする必要がある場合もあります。また、他の人のコーディング スタイルを理解することも必要になります。これらのクラスライブラリとプラグインはすべてオブジェクト指向/オブジェクトベースに基づいています。