javascript中創建物件的幾種方法總結_javascript技巧

前言：

隨著web 2.0 的興起（最具代表性的是Ajax技術了），javascript不再是程式設計師眼中的「玩具語言」。 程式設計在不斷的簡化，可是「使用者體驗、效能、相容性、可擴充......」要求卻在不斷提高，隨之湧現出Prototype、jQuery、ExtJs、Dojo等優秀的框架（類別庫） ，大大簡化了web開發。

越來越多的人開始深入研究和使用javascript，當然，企業對開發者的要求也越來越高。就拿自己的經驗來講，零幾年的時候，我可以拿javascript寫一些頁面UI效果，做網站的表單驗證等操作，當時覺得已經很酷了。但換到現在，如果連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  = {};//JSON
 Cat.name="kity"; //加上屬性並賦值
 Cat.age=2;
 Cat.sayHello=function(){
  alert("hello " Cat.name ",今年" Cat["age"] "歲了");//可以使用「.」的方式存取屬性，也可以使用HashMap的方式存取
 }
 Cat.sayHello();//呼叫物件的（方法）函數

2.用function(函數)來模擬class (無參建構子)

2.1 建立一個對象，相當於new一個類別的實例

複製程式碼

複製程式碼

程式碼如下:


function Person(){

}
var personOne=new Person();//定義一個function，如果有new關鍵字去"實例化",那麼該function可以看作是一個類別

personOne.name="dylan ";

personOne.hobby="coding";
personOne.work=function(){

alert(personOne.name " is coding now...");
}
personOne.work();

2.2 可以使用有參構造函數來實現，這樣定義更方便，擴展性更強（建議使用）

複製程式碼


程式碼如下:


function Pet(name,age,hobby){

function Pet(name,age,ho){
this name=name;//this作用域：目前物件

   this.age=age;
   this.hobby=ho;

   this.eat=function(){
   this.name ",我喜歡" this.hobby ",也是個吃貨");   }}
var maidou =new Pet("麥兜",5,"睡覺");//實例化/創建物件  maidou.eat();//呼叫eat方法(函數)

3.使用工廠方式來建立（Object關鍵字）

複製程式碼


程式碼如下:

var wcDog =new Object(>

var wcDog =new Object(>var wcDog =new Object(>
var wcDog =new Object(> wcDog.age=3;

 wcDog.work=function(){   alert("我是" wcDog.name ",汪汪汪...... "); }  wcDog.work();

4.使用原型物件的方式  prototype關鍵字

複製程式碼 程式碼如下:function Dog(){ } D.protype.旺財"; Dog.prototype.eat=function(){ alert(this.name "是個吃貨"); } var wangcai =new Dog(); wangcai .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 のソース コードを研究したり、他のプラグインを参照して書き直したり、独自のプラグインを開発したりする必要がある場合もあります。また、他の人のコーディング スタイルを理解することも必要になります。これらのクラスライブラリとプラグインはすべてオブジェクト指向/オブジェクトベースに基づいています。