javascript建立物件簡單介紹

admin發表於2017-04-05

ECMAScript有兩種開發模式:

1.函式式(過程化);

2.物件導向(OOP);

建立物件:

(1).普通的建立物件:

[JavaScript] 純文字檢視 複製程式碼
// 建立一個物件,然後給這個物件新的屬性和方法;
var box = new Object();// 建立一個Object物件;
box.name = 'lee';// 建立一個name屬性並賦值;
box.age = 100;
box.run = function(){// 建立一個run()方法並返回值;
  return this.name+this.age+'執行中...';
} 
console.log(box.run());// 輸入屬性和方法的值;
// 缺點:想建立類似的物件,就會產生大量的程式碼;

(2).工廠模式建立物件:

[JavaScript] 純文字檢視 複製程式碼
// 這種方法就是為了解決例項化物件產生大量程式碼重複的問題;
  function createObject(name,age){// 集中建立函式體;
    var obj = new Object;// 函式體內建立Object;
    obj.name = name; 
    obj.age = age;
    obj.run = function(){
      return this.name+this.age+"執行中...";
    };
    return obj;
  }
  var box1 = createObject("lee",100);// 例項化;呼叫函式並傳參;
  var box2 = createObject("jack",200);// 例項二;
  console.log(box1.run()+box2.run());// 例項保持相對獨立;
// 缺點:物件與例項的識別問題;無法搞清楚它們到底是那個物件的例項;
  console.log(typeof box1);// Object;

(3).建構函式建立物件:

[JavaScript] 純文字檢視 複製程式碼
// ECMAScript採用建構函式(構造方法)可用來建立特定的物件;
  function Box(name,age){// 建構函式模式;
    this.name = name;// this代表物件Box;
    this.age = age;
    this.run = function(){
      return this.name+this.age+"執行中...";
    };
  }
  var box1 = new Box("lee",100);// 要建立物件的例項必須用new操作符;
  var box2 = new Box("jack",200);// box1和box2都是Box物件的例項;
  console.log(box1 instanceof Box);// true;很清晰的識別box1從屬於Box;
// 使用建構函式,即解決了重複例項化的問題,有解決了物件識別的問題;

使用建構函式與工廠模式不同之處:

(1).建構函式方法沒有顯示的建立物件(new Object);

(2).直接將屬性和方法賦值給this物件;

(3).沒有return語句;

建構函式規範:

(1).函式名(function Box)和例項化構造名(new Box)相同且大寫;

(2).通過建構函式建立例項物件,必須使用new運算子;

[JavaScript] 純文字檢視 複製程式碼
//建構函式和普通函式的區別:
  var box = new Box('lee',100);// 構造模式呼叫;
  Box('lee',200);// 普通模式呼叫,無效;
  var o = new Object();
  Box.call(o,'jack',200);// 物件冒充呼叫;
  // 將Box物件作用域擴充到物件o;Box()方法的執行環境已經變成了物件o裡;

建構函式的問題:

使用建構函式建立每個例項的時候,建構函式裡的方法都要在每個例項上重新建立一遍;

因為ECMAScript中的函式是物件,因此每定義一個函式,也就是例項化了一個物件;

以這種方式建立函式,會導致不同的作用域鏈和識別符號解析;

相關文章