詳解JavaScript基於物件導向之創建對象

我們建立的每個函數都有一個透過prototype(原型)屬性，這個屬性是一個對象，它的用途是包含可以由特定類型的所有實例共享的屬性和方法。邏輯上可以這麼理解：prototypt透過條用建構函數而創造的那個物件的原型物件。使用原型的好處就是可以讓所有物件實例共享它所包含的屬性和方法。也就是說，不必在建構函式中定義物件訊息，而是直接將這些資訊加入原型

原型方式利用了物件的prototype 屬性，可以把它看成是建立新物件所依賴的原型。這裡，首先用空構造函數來設定函數名。然後所有的屬性和方法都直接被賦予prototype屬性。我重寫了前面的例子，程式碼如下：

function Car() { }; 
//将所有的属性的方法都赋予prototype属性 
Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.showColor = function() { 
  return this.color; 
}; 
var Car1 = new Car(); 
var Car2 = new Car(); 
document.write(Car1.showColor()+"
");//输出：blue 
document.write(Car2.showColor());//输出：blue

在這段程式碼中，先定義建構函式Car()，其中無任何程式碼。接下來的幾行程式碼，透過為Car的 prototype 屬性加入屬性去定義Car物件的屬性。當呼叫new Car()時，原型的所有屬性都會立即被賦予要建立的對象，這意味著所有Car實例存放的都是指向 showColor() 函數的指標。從語義上講，所有屬性看起來都屬於一個對象，因此解決了前面的工廠方式和構造函數方式存在的問題

此外，使用這種方式，還能用instanceof 運算符檢查給定變數所指向的物件的類型：

程式碼如下:

document.write(Car1 instanceof Car);    //输出：tru

原型方式看起來是個不錯的解決方案。遺憾的是，它並不盡如人意。首先，這個建構函數沒有參數。使用原型方式，不能透過給建構函式傳遞參數來初始化屬性的值，因為Car1和Car2的color屬性都等於 "blue"，doors屬性都等於4，mpg屬性都等於25。這意味著必須在物件建立後才能改變屬性的預設值，這點很令人討厭，但還沒完。真正的問題出現在屬性指向的是對象，而不是函數時。函數共享不會造成問題，但物件卻很少被多個實例共享。請思考下面的例子：

function Car() { };//定义一个空构造函数，且不能传递参数 
Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.drivers = new Array("Mike","John"); 
Car.prototype.showColor = function() { 
  return this.color; 
}; 
var Car1 = new Car(); 
var Car2 = new Car(); 
Car1.drivers.push("Bill"); 
document.write(Car1.drivers+"
");//输出：Mike,John,Bill 
document.write(Car2.drivers);//输出 ：Mike,John,Bill

上面的程式碼中，屬性drivers是指向Array物件的指針，該陣列包含兩個名稱"Mike"和 "John"。由於 drivers是引用值，Car的兩個實例都指向同一個陣列。這意味著為Car1.drivers加值 "Bill"，在 Car2.drivers 中也能看到。輸出這兩個指標中的任何一個，結果都是顯示字串 "Mike,John,Bill"。由於創建物件時有這麼多問題，你一定會想，是否有種合理的創建物件的方法呢？答案是有，需要聯合使用建構子和原型方式

混合的建構子/原型方式(建議使用

混合使用建構函式方式和原型方式，就可像用其他程式設計語言一樣建立物件。方法）。 >
現在就更像創建一般物件了。 ，所以沒有記憶體浪費。 Car2.drivers 顯示的是"Mike,John"。方式的特性，卻沒有他們的副作用。

對於習慣使用其他語言的開發者來說，使用混合的構造函數/原型方式感覺不那麼和諧。的封裝。

Java很好地打包了Car类的所有属性和方法，因此看见这段代码就知道它要实现什么功能，它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为，在构造函数内部找属性，在其外部找方法的做法不合逻辑。因此，他们设计了动态原型方法，以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.drivers = new Array("Mike","John"); 
 //如果Car对象中的_initialized为undefined，表明还没有为Car的原型添加方法 
 if (typeof Car._initialized == "undefined") { 
   Car.prototype.showColor = function() { 
    return this.color; 
   }; 
   Car._initialized = true; //设置为true，不必再为prototype添加方法 
 } 
} 
var Car1 = new Car("red",4,23);//生成一个Car对象 
var Car2 = new Car("blue",3,25); 
Car1.drivers.push("Bill");//向Car1对象实例的drivers属性添加一个元素 
document.write(Car1.drivers+"
");//输出：Mike,John,Bill 
document.write(Car2.drivers);//输出：Mike,John

 直到检查typeof Car._initialize是否等于"undefined"之前，这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义，构造函数将用原型方式继续定义对象的方法，然后把 Car._initialized设置为true。如果这个值定义了(它的值为 true时，typeof 的值为Boolean)，那么就不再创建该方法。简而言之，该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次，传统的 OOP开发者会高兴地发现，这段代码看起来更像其他语言中的类定义了。 

我们应该采用哪种方式呢？      

如前所述，目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方式也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。总之JS是基于面向对象的一门客户端脚本语言，我们在学习它的面向对象技术的时候要的留意JS与其他严谨性高的程序语言的不同。也要正确使用JS创建对象的合理的方式，推荐使用构造函数与原型方式的混合方式创建对象实例。这样可以避免许多不必要的麻烦。

以上就是JavaScript基于面向对象之创建对象的全部内容，希望对大家的学习有所帮助。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn