之前的項目中需要一個購買數據商品並付款的功能，剛開始一直不敢使用面向對象的寫法，主要是沒有理清思路，而且那時的數據商品比較的複雜，就一直沒敢動，在網上也找些面向對象的寫法，把思路理清一遍，就想自己試著寫寫。
接下來我會一步一步分析，面向對象的寫法過程。整個流程大致分為：
1、先定義好一個商品列表的數據形式和商品總數集，類似：
var data = [{name: 'name', unitPrice: 10, num: 2}];var total = {type: 0, totalNum: 0, price: 0};很明顯在data 數組裡name 表示單個商品名稱，unitPrice 表示單個商品單價，num 表示單個商品數量；在total 對象裡type 表示商品種類、totalNum 表示商品總數量、price 表示商品總價。
2、創建一個購物車的函數對象ShoppingCart，並設置它的相應屬性，如下：
function ShoppingCart (name, unitPrice, num) { this.name = name; this.unitPrice = unitPrice; this.num = num; this.info = {name: this.name,unitPrice: this.unitPrice,num: this.num};}用一個info 來把單個商品的名稱、單價、數量保存起來，然後需要把這個info 放到data 數組裡並且計算商品總數集total，所以就需要設置這個函數對象的兩個方法。就在this.info 下面添加兩個方法：
this.add();
this.getTotal();
這裡要說明一下，為什麼要把這兩個方法放在函數對象的原型裡，當new 一個實例化對象時，就需要馬上添加這個商品信息和計算商品總數集，所以沒必要再用這個實例化對象調用這兩個方法。
然後使用對象的prototype 屬性，把方法都放在這個屬性裡來調用，如下：
ShoppingCart.prototype = { // 添加商品add: function() { var _this = this; data.push(_this.info); }, // 商品總數集getTotal: function () { total.type = data.length; total.totalNum = 0; total.price = 0; for (var i = 0; i < data.length; i++) { total.totalNum += data[i].num; total.price += data[i].num * data[i].unitPrice; } }}3、有添加就會有刪除單個商品，就在prototype 屬性裡再添加刪除商品的方法，刪除商品需要依據一個標識來刪除指定的商品，這裡我通過name 值來刪除，這時就需要一個方法去date 數組裡找對應這個name 的商品，如下：
// 刪除商品delect: function () { var _this = this; data.splice(_this.check(_this.name), 1); _this.getTotal();},// 根據名稱查商品check: function (name) { for (var i = 0; i < data.length; i++) { if (name == data[i].name) return i; }}4、修改單個商品數量，如下：
// 修改單個商品的數量changeNum: function (num) { var _this = this; if (num == 0) { _this.delect(); return; } var _index = _this.check(_this.name); data[_index].num = num; _this.getTotal();}這裡需要傳一個參數，來設置指定的商品的數量。
整體代碼如下：
var data = new Array;var total = {type: 0, totalNum : 0, price:0};function ShoppingCart (name, unitPrice, num) { this.name = name; this.unitPrice = unitPrice; this.num = num; this.info = {name: this.name,unitPrice: this.unitPrice,num: this.num}; this.add(); this.getTotal();}ShoppingCart.prototype = { add: function() { var _this = this; data.push(_this.info); }, getTotal: function () { total.type = data.length; total.totalNum = 0; total.price = 0; for (var i = 0; i < data.length; i++) { total.totalNum += data[i].num; total.price += data[i].num * data[i].unitPrice; } }, delect: function () { var _this = this; data.splice(_this.check(_this.name), 1); _this.getTotal(); }, changeNum: function (num) { var _this = this; if (num == 0) { _this.delect(); return; } var _index = _this.check(_this.name); data[_index].num = num; _this.getTotal(); }, check: function (name) { for (var i = 0; i < data.length; i++) { if (name == data[i].name) return i; } }}這個data 數組初始化數據可以是從後台傳過來的數據，但是必須數據形式和定義的一樣，並且要調用一下getTotal 這個方法獲取商品總數集。
最後就是簡單的new 一個個實例化，例如：
var goods1 = new ShoppingCart('123', 100, 2 )var goods2 = new ShoppingCart('456', 10, 3 )var goods3 = new ShoppingCart('789', 1, 4 )goods2.delect();good3.changeNum(2)goods2 = new ShoppingCart('1234', 11, 1 )goods2.changeNum(0)自行可以把data 和total 打印出來看看結果/(^o^)/~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。