1. 程式人生 > >JavaScript建構函式解析

JavaScript建構函式解析

         JavaScript語言是一門面向物件的語言,但是JavaScript中並沒有類的概念的。於是JavaScript採用建構函式的方式來模擬類的效果,即我們通過函式來建立物件。這也證明了函式在JavaScript中具有非常重要的地位。

一、簡單例子:

	var Book = function(name, price) {
		this.name = name;
		this.price = price;
		}
	var java = new Book('Java', 82);

普通函式與建構函式本質上沒有任何區別,只是我們呼叫的方式不同而已,關鍵在於一個字 new

呼叫建構函式:

newfunction_name();

呼叫普通函式:function_name();

在函式中有一個this物件,this始終代表該函式的呼叫者。

如果是建構函式,this就是構造出來的新物件。

如果是普通函式,this就是 window 物件。

如果使用new關鍵字呼叫,那麼函式的 return語句不再起作用,因為這時還回的是 this

下面的例子可以很清楚的看到這點:
	 var Book = function(name, price) {
        this.name = name;
        this.price = price;
        if (this == window) {
          return 'name = ' + name + ", price = " + price;
        }
		else{
			alert("this book's name" + name +"price is "+ price)
		}
      }
	  var result = Book("Java", 100);
	  alert(result);
	  var book=new Book("Java", 100);

  執行結果如下。首先彈出:


表示當前使用呼叫普通函式的方法呼叫Book()函式時this就是 window 物件。

    然後彈出的結果為:表示如果使用new關鍵字呼叫,this就是構造出來的新物件。


二、js物件的動態特性:


    物件的成員屬性和方法可以動態新增。

<script type="text/javascript">
	  
	function Foo(){  
		this.name="Foo";  
	}  
	var obj = new Foo();  
	obj.name = "Foo1";  
	obj.m = "m";  
	delete obj.name; 
	 
	alert("name:"+obj.name+"\nm:"+obj.m); 
</script>

    執行結果:

、理解公共屬性,私有屬性,公共方法,私有方法。

    建構函式就是使自己的物件多次複製,同時例項根據設定的訪問等級可以訪問其內部的屬性和方法理解了上面簡單的例子我們詳細區別一下類的公共屬性,私有屬性,公共方法,私有方法。

<script type="text/javascript">
function myObject(msg){
     //特權屬性(公有屬性)
     this.myMsg = msg; //只在被例項化後的例項中可呼叫
     this.address = '上海';
     
     //私有屬性
     var name = '韓義';
     var age = 24;
     var that = this;
     
     //私有方法
     function sayName(){
         alert("the person is"+ name);
     }
     //特權方法(公有方法)
     //能被外部公開訪問
     //這個方法每次例項化都要重新構造而prototype是原型共享,所有例項化後,都共同引用同一個
     this.sayAgeAndName = function(){
         sayName()
		 alert("his age is"+age); //在公有方法中可以訪問私有成員
     }
     //私有和特權成員在函式的內部,在建構函式建立的每個例項中都會包含同樣的私有和特權成員的副本,
     //因而例項越多佔用的記憶體越多
 }
 

 //例項化
 var m1 = new myObject('111');
<!-- myObject.sayName()//have no method 'sayName' --> 
alert( m1.myMsg);//111
<!-- alert(mi.name); //undefined, 靜態屬性不適用於一般例項 -->
m1.sayAgeAndName();//24,呼叫共有方法訪問私有屬性
alert(myObject.age);//undefined ,不能訪問使用屬性。

 </script>

    通過執行結果,很容易理解這些概念。

四、簡單物件建立方式比較:

    1.簡單方式

	var person = new Object();
	person.name = “LL”;
	person.age = 22;

問題:建立多個相似物件,大量重複程式碼

2工廠模式

	function Person (name,age){
	           var o = new Object();
	           o.name = name;
	           o.age = age;
	           o.getName=function(){
	                    alert(this.name);
		}
	           return o;
	}
	var person1 = new Person(“LL”,22);
	person1.getName() ;         //”LL”

1根據接受的引數來構建一個包含所有必要資訊的Person物件,多次呼叫,每次返回一個包含兩個屬性和一個方法的物件。
2優點:解決了建立多個相似物件的問題

     問題:物件識別的問題,即怎樣知道一個物件的型別

     解決:建構函式

3建構函式模式
	function Person(name,age){
	           this.name = name;
	           this.age = age;
	           this.getName = function(){
		         alert(this.name);
		};
	}
	var person1 = new Person(“LL”,22);

1)與工廠模式比較

a.沒有顯示的建立物件;

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

c.沒有return語句;

d.將例項標識為一種特定的型別(instanceof);

2)建構函式與普通函式區別

a.習慣:建構函式始終一個大寫字母開頭,非建構函式以一個小寫字母開頭

b.唯一區別:呼叫方式不同,用new呼叫為建構函式,不用new為普通函式