首頁 > web前端 > js教程 > 主體

JavaScript中的物件與原型(一)

黄舟
發布: 2016-12-23 15:25:33
原創
1051 人瀏覽過

 一 工廠模式

  一 工廠模式


  我們知道,要建立一個物件我們可以用以下程式碼:

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'
登入後複製

 用這樣的方法建立物件比較簡單直觀,也是JavaScript種建立物件最基本的方法。但是這樣就有一個問題,如果我們需要建立多個對象,那麼我就得寫很多重複的程式碼。例如我們想建立另一個物件user1,我們就得重新將上面的程式碼重新寫一遍,這在實際開發過程中是不合適的,這樣如果物件過多,程式碼量將大大增加。

  為了解決這樣的問題,我們可以使用一種叫做工廠模式的方法,這種方法 就是為了解決實例化物件產生大量重複程式碼的問題。

function create(name, age) {
  var obj = new Object(); 
  obj.name = name; 
  obj.age = age;
  obj.run = function () {
    return this.name +' '+ this.age;
  };
  return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());
登入後複製

 從上面的程式碼我們可以看出,工廠模式解決了實例化時程式碼大量重複的問題,但又出現了一個問題,那就是識別問題,我們根本無法弄清楚他們到底是哪個物件的實例。例如

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true
登入後複製

 以上程式碼標明box1是Object對象,但是我們無法知道具體是哪一個物件建立的。

  二 建構子(建構方法)

  為了解決上面的問題,我們可以用建構方法去建立物件。構造函數和普通函數的唯一差別,就是呼叫的方式不同。但是,構造函數同樣是函 數。

function User(name, age) { //构造函数模式
  this.name = name;
  this.age = age;
  this.run = function () {
    return this.name + ' '+this.age;   };
}
登入後複製
  建立物件的時候用new運算子就可以了:
var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);
登入後複製

 現在我們就可以偵測user1或user2是不是屬於User。

alert(user1 instanceof User);//true 
登入後複製


 可見,使用建構子的方法,即解決了重複實例化的問題,也解決了物件辨識的問題。

  使用建構子時執行的過程如下:

  1.執行 new 建構子()時,後台執行了 new Object();

 『

  3.執行建構子內的程式碼;

  4.後台直接回傳新物件。

  接下來我們來看看建構子內部的函數問題。如果我們執行以下語句:

alert(user1.run==user2.run);//结果返回的是false
登入後複製

 結果回傳的是false,這就表示方法其實也是一種引用位址。如果我們同樣重複創建了多個對象,那麼每個對像中的方法都會在記憶體中開闢新的空間,這樣浪費的空間就比較多。要解決這個問題,我們就需要用到實例屬性或方法的共享,下一篇文章將繼續探討解決這個問題。

 以上就是JavaScript中的物件與原型(一)的內容,更多相關內容請關注PHP中文網(www.php.cn)!

🎜🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!