javascript系列之構造對象

psychola 發布于2019-08-22 15:50 / 2658人閱讀

摘要：構造函數模式使用操作符后跟構造函數隱式原型指向由構造函數構造出來指向由函數構造使用對象字面量表示法還支持對象和數組字面量，允許使用一種簡潔而可讀的記法來創建數組和對象。通過同一個構造函數創建出來的對象，共享同一個原型對象。

構造函數模式

1.使用new操作符后跟Object構造函數

var  person = new Object();
person.name = "kitty";
person.age = 25;

person.__proto__(隱式原型)指向Object.prototype.

2.由構造函數構造出來

function Car(sColor,iDoors,iMpg) {
　　　this.color = sColor;
　　　this.doors = iDoors;
　　　this.mpg = iMpg;
　　　this.showColor = function() {
　　　　　　alert(this.color);
　　　};
}

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

person.__proto__指向Car.prototype.
3.由函數Object.create構造

var person1 = {
    name: "cyl",
    sex: "male"
};

var person2 = Object.create(person1);

使用“對象字面量”表示法

JavaScript還支持對象和數組字面量，允許使用一種簡潔而可讀的記法來創建數組和對象。

var person = {
    name : "kitty",
    age:25
};

工廠模式

function createCar(sColor,iDoors,iMpg) {
  　　var oTempCar = new Object;
  　　oTempCar.color = sColor;
 　　 oTempCar.doors = iDoors;
  　　oTempCar.mpg = iMpg;
  　　oTempCar.showColor = function() {
    　　　　alert(this.color);
　　　 };

  　　return oTempCar;
}

var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();      //輸出 "red"
oCar2.showColor();      //輸出 "blue"

前面的例子中，每次調用函數 createCar()，都要創建新函數 showColor()，意味著每個對象都有自己的 showColor() 版本。而事實上，每個對象都共享同一個函數。javascript中沒有什么static和成員變量之分，如果想在對象之間共享數據或方法，只能借助原型對象，將共享的變量和方法都放在原型對象中。

原型方式

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() {
       alert(this.color);
  　}
};

var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Bill");

alert(oCar1.drivers);  //輸出 "Mike,John,Bill"
alert(oCar2.drivers);  //輸出 "Mike,John,Bill"

混合的構造函數/原型方式(相對完美的解決方式)

聯合使用構造函數和原型方式，就可像用其他程序設計語言一樣創建對象。這種概念非常簡單，即用構造函數定義對象的所有非函數屬性，用原型方式定義對象的函數屬性（方法）。結果是，所有函數都只創建一次，而每個對象都具有自己的對象屬性實例。

function Car(sColor,iDoors,iMpg) {
  　　this.color = sColor;
  　　this.doors = iDoors;
 　　 this.mpg = iMpg;
  　　this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
 　　 alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
oCar1.drivers.push("Bill"); 

alert(oCar1.drivers);  //輸出 "Mike,John,Bill"
alert(oCar2.drivers);  //輸出 "Mike,John"

JS的構造函數都有一個prototype屬性，指向它的原型對象（其實就是個普通的JS對象）。通過同一個構造函數創建出來的對象，共享同一個原型對象。原型對象初始化的時候是空的，我們可以在里面自定義任何屬性和方法，這些方法和屬性都將被該構造函數所創建的對象繼承。如果原型發生了變化，那么所有實例都會跟著改變。

云服務器 GPU云服務器系列之系列之二架構之坑系列 javascript專題系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93793.html

JavaScript深入之new的模擬實現

摘要：深入系列第十二篇，通過的模擬實現，帶大家揭開使用獲得構造函數實例的真相一句話介紹運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一也許有點難懂，我們在模擬之前，先看看實現了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實現，帶大家揭開使用new獲得構造函數實例的真相 new 一句話介紹 new: new 運算符創建一個用戶定義的對象類型的實例或具...

tianlai 2019-08-20 16:17 評論0 收藏0
JavaScript深入之從原型到原型鏈

摘要：深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。讓我們用一張圖表示構造函數和實例原型之間的關系在這張圖中我們用表示實例原型。 JavaScript深入系列的第一篇，從原型與原型鏈開始講起，如果你想知道構造函數的實例的原型，原型的原型，原型的原型的原型是什么，就來看看這篇文章吧。構造函數創建對象我們先...

Songlcy 2019-08-21 15:32 評論0 收藏0
JavaScript系列 - 深入之從原型到原型鏈

摘要：本文詳情構造函數創建對象先使用構造函數創建一個對象在這個例子中，就是一個構造函數，我們使用創建了一個實例對象。本文詳情：https://github.com/mqyqingfen... 構造函數創建對象先使用構造函數創建一個對象 function Person(){ } var person = new Person(); person.name = Mit; console.lo...

shadajin 2019-08-26 12:01 評論0 收藏0
JavaScript深入之創建對象的多種方式以及優缺點

摘要：深入系列第十四篇，講解創建對象的各種方式，以及優缺點。也就是說打著構造函數的幌子掛羊頭賣狗肉，你看創建的實例使用都無法指向構造函數這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇，講解創建對象的各種方式，以及優缺點。寫在前面這篇文章講解創建對象的各種方式，以及優缺點。但是注意：這篇文章更像是筆記，因為《JavaScript高級程序設計》寫得真是太好了！ 1....

Terry_Tai 2019-08-21 11:40 評論0 收藏0
JavaScript深入之繼承的多種方式和優缺點

摘要：深入系列第十五篇，講解各種繼承方式和優缺點。優點融合原型鏈繼承和構造函數的優點，是中最常用的繼承模式。寄生組合式繼承為了方便大家閱讀，在這里重復一下組合繼承的代碼組合繼承最大的缺點是會調用兩次父構造函數。 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎...

JackJiang 2019-08-20 16:30 評論0 收藏0