JavaScript物件導向的簡單介紹

JavaScript是一門OOP，而有些人說，JavaScript是基於對象的。1) 如何建立對象：1. 使用constructor，例如：var obj = new Object() // var 可以省略var obj = new Date() 2. 使用對象字面值(object literals)，例如： 程式碼var obj = "123" // 建立一個String對象var obj = /^abc$/ //建立一個RegExp對象更加複雜的情況是，我們可以直接產生一個自訂的只有屬性的對象： 程式碼var obj = {name:"killercat",home:"www.i170.com/user/killercat"}document.write(obj.name+"<br />")document.write(obj.home)結果：killercatwww.i170.com/user/killercat2) JavaScript中的屬性：str = "www.i170.com/user/killercat" // str 一個字串對象的引用document.write(str.length)通過對象的引用加上"."再加上屬性名稱，可以訪問到這個屬性，也可以修改這個屬性，甚至是添加一個屬性，比如：var obj = new Object()obj.name = "killercat"  // 為對象直接添加一個屬性document.write(obj.name) // 訪問對象的屬性obj.name = "kcat" // 修改對象的屬性document.write(obj.name)枚舉屬性值：使用 for ... in 語句可以枚舉屬性(具體來說就是枚舉屬性名稱)，前面已經提到過，比如for(ele in window){    document.write(ele+"<br />")}如何得到屬性值？obj = new Object()obj.p1 = "a"obj.p2 = "b"obj.p3 = "c"for(ele in obj)    document.write(obj.ele)  // 這是新手可能犯的錯誤，obj.ele 的值是undefined應該這樣訪問屬性值：document.write(eval("obj."+ele))未定義的屬性：obj = new Object()document.write(obj.name)結果是：undefined刪除屬性：obj = new Object()obj.name = "killercat"delete obj.namedocument.write(obj.name)結果是：undefined理解屬性：我們知道在Java,c++中，屬性要麼屬於某個類(類屬性或說是靜態屬性)，要麼屬於對象，也就是說，同一個類的對象，一定有一樣的屬性，但是JavaScript不一樣，同樣是Object的對象，卻可以有不同的屬性。除了這類的屬性，JavaScript中還有靜態屬性(變數)。3) Constructor源於某些未知原因，有些人似乎不願意在JavaScript提到classes這個詞，取代的是"對象的類型(object types)"，甚至有些人直接叫函數，於是可以看見這樣的說法：“我們通過預先定義好的函數，產生了一個對象”。本文使用類，這個名詞。JavaScript 定義方法的方式和定義類的方式一模一樣：function User(name,sex){ // 定義了類 User    this.name = name;    this.sex = sex;}user = new User("kc","man")document.write(user.name+"<br />"+user.sex)contructor的作用就是在初始化屬性(變數)4) 方法以下例子引用於<<__JavaScript: The Definitive Guide>>function Rectangle_area(  ) { return this.width * this.height; }function Rectangle_perimeter(  ) { return 2*this.width + 2*this.height; }function Rectangle_set_size(w,h) { this.width = w; this.height = h; }function Rectangle_enlarge(  ) { this.width *= 2; this.height *= 2; }function Rectangle_shrink(  ) { this.width /= 2; this.height /= 2; }function Rectangle(w, h){    this.width = w;    this.height = h;    this.area = Rectangle_area;    this.perimeter = Rectangle_perimeter;    this.set_size = Rectangle_set_size;    this.enlarge = Rectangle_enlarge;    this.shrink = Rectangle_shrink;}這種風格可能和Java,c++很不同。方法中的this表示調用它的對象的引用。5) prototypeprototype是一個對象，每個類都包含一個prototype對象(注意，每個類一個，而不是每個對象一個)。看看下面的例子：function User(name){    this.name = name}User.prototype.name = "killercat"  // 類名.prototype.屬性(或方法)user = new User("who"+"<br />")document.write(user.name)delete user.namedocument.write(user.name)再看一個例子：function User(name){}User.prototype.name = "human"user1 = new User()user2 = new User()document.write(user1.name+"<br />")document.write(user2.name)結果：humanhuman說明了，每個類一個prototype對象，而不是每個對象單獨一個。obj.x 這條語句的尋找順序是，先在obj中找x屬性，假如沒有，再進入obj對應的類中找prototype.x，對於方法來說，也一樣。因此，不要出現這樣的語句： user.prototype.name = "xxx" 必須是 user.name = "xxx" (prototype對象屬於一個類，而不是一個對象)類名.prototype.屬性  // 相當於一個執行個體變數(屬性)，對方法也一樣類名.屬性  // 相當於一個靜態變數(屬性)，對方法也一樣，調用的時候必須使用"類名.屬性"，不能使用"類對象.屬性"，因為它屬於一個類，而不是一個對象。例如：function User(name){    this.name = name}User.type = "human"user = new User("kc")document.write(User.type + "<br />")document.write(user.type)結果：humanundefined另外，每個prototype都有一個constructor屬性，預設用於儲存constructor的定義，例如上面的user對象，調用：user.constructor得到：function User(name) { this.name = name; }我們可以通過typeof，知道參數的類型，假如是對象，就返回"object"，假如是方法就返回"function"6) 利用prototype實作類別間的繼承，例如：// 父類function Circle(r){    this.r = r;   }Circle.PI = 3.14;Circle.prototype.getArea = function (){       return Circle.PI * this.r * this.r;};Circle.prototype.toString = function (){       if(( typeof this == "object") && (this.constructor == Circle)){        return "circle with a radius " + this.r ;    }    else{        return "unknown object";    }   };Circle.max = function (c1,c2){    return c1.r >= c2.r ? c1 : c2;};// 子類function ColorCircle(r,color){    this.r = r;    this.color = color;}ColorCircle.prototype = new Circle(0);  // 儲存父類的對象ColorCircle.prototype.constructor = ColorCircle;  // 為constructor 改名字ColorCircle.prototype.toString = function(){    if(( typeof this == "object") && (this.constructor == ColorCircle)){        return this.color+" circle with a radius " + this.r ;    }    else{        return "unknown object";    }   }ColorCircle.prototype.getColor = function(){    return this.color;}ColorCircle.prototype.setColor = function(color){    this.color = color;}   也就是，使用prototype儲存父類的對象，在構造子類的時候，父類對象同時被構造(因為prototype被構造)。也就是JavaScript繼承其實就是讓子類的prototype對象儲存父類的對象。