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物件的方方面面,包括繼承、封裝和多型。

相關文章

程式語言 最新文章