js面對物件程式設計

js面對物件程式設計
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

        說到js,很大一部分人會說我很熟悉,在日常的web開發中經常用,那麼你的js程式碼是符合面對物件思路的嗎?那你會問我程序導向的js程式碼有什麼不好嗎?我的感受是面對物件的js編碼更加簡潔,減少了混亂,可維護行增強,適合編寫富客戶端時應用。

好了,首先看看js裡如何定義物件:

<html>
	<head>
		<script type="text/javascript">
			
			var obj=new Object();
			obj.name='josh';
			obj.age='26';
			console.log(obj.name);
			console.log(obj.age);
			
		</script>
	</head>
	<body>
	</body>
</html></span>

        大家可以用firebug的console看下執行結果。在這段非常簡單的程式碼中,我們new了一個Object型的物件,如果學過像java或C#這樣面嚮物件語言的人,對這樣的物件定義方式一定非常熟悉,只不過開頭的變數定義換成了var,這是由於js是弱型別的緣故。

        Object型別屬於js的內建物件型別,定義了obj之後,我們給obj的name和age屬性進行了賦值。這裡需要注意的事,js的物件可以動態新增屬性和方法,不像java,物件只能包含類的內容。我們在上面的程式碼中再新增兩個方法:

var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			console.log(obj.getName());
			console.log(obj.getAge());
      

既然能新增,也能刪除:

var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			delete obj.age;
			delete obj.getAge;
			console.log(obj.age);  //undefined
			console.log(obj.getAge()); //obj.getAge is not a function

        那麼js物件的動態新增屬性方法的機制是什麼呢?在最根本的層面上,js物件是一個屬性的集合,非常類似於其他語言中的雜湊表,或者在java裡更為常用的map,因此我們可以再使用的任何時候,動態的新增屬性或方法。

在js中,物件被認為是引用型別,為不同的變數賦相同物件的話,那麼執行的就是同一物件

var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			obj1=obj;
			obj.age='30';
			console.log(obj1.getAge());

       好了,上面的用的object物件,屬於js的內建物件,除了Object型別還有Function,Array,Date,Error,Regexp,這些內建物件型別都屬於引用型別

var func=new Function('console.log("Hi");');
			var arr=new Array('Eric','lisa','josh');
			var date=new Date();
			var error=new Error("something bad happen");
			var reg=new RegExp('\d ');

        js還提供了5中原始型別:分別是Boolean,Number,String,Null,Undefined。

//string
			var name='Eric';
			var selection='a';
			
			//number
			var num=10;
			var f=1.1;
			
			//boolean
			var flag=false;
			
			//null
			var obj=null;
			
			//undefined
			var ref;

        大家需要知道的事,Number型別既可以包含整形,也可以包含浮點型。這裡也需要說說null和undefined的區別,undefined表示變數定義了,但未初始化,null表示物件不存在。

之所以介紹原始型別,是因為大家平常會見到這樣的程式碼:

var name='Eric';
			var lowcasename=name.toLowerCase();   //eric
			var fistLetter=name.charAt(0);		  //E

就是在原始型別的的變數上呼叫了方法,這其實是js的內容為我們實現了一個裝箱的機制

var name='Eric';
			// 將原始型別使用new建立了一個對應的物件型別
			var temp=new String(name);
			var lowcasename=temp.toLowerCase();   //eric
			var fistLetter=temp.charAt(0);		  //E

除了上述使用new的方式簡歷物件,還可以使用literal Form(字串)的方式

//new object 的方式
var obj=new Object();
			obj.name='josh';
			obj.age='26';
			obj.getName=function(){
				return this.name;
			}
			obj.getAge=function(){
				return this.age;
			}
			
			//literal Form
			var obj1={
				name:'josh',
				age:'26',
				getName:function(){
					return this.name;
				},
				getAge:function(){
					return this.age;
				}
			}
			
			//new Array的方式
			var arr=new Array('Eric','lisa','josh');
			//literal Form
			var arr1=['Eric','lisa','josh'];
			

        至此,本文講了 js物件動態增刪屬性及其機制,js的內建原始型別和引用型別 還有物件的兩種定義方式,有了這些基礎,我們後將陸續講解js物件的方方面面,包括繼承、封裝和多型。

相關文章

程式語言 最新文章