1. 程式人生 > >JS:面向物件程式設計(一)

JS:面向物件程式設計(一)

  1. Declare JavaScript Objects as Variables
    在我們深入 面向物件程式設計之前 ,讓我們先回顧一下Javascript的 物件(Object)
  2. Construct JavaScript Objects with Functions
    除了上一種方法外,我們還可以使用建構函式來建立物件。

建構函式 通常使用大寫字母開頭,以便把自己和其他普通函式區別開。

下面便是一個 建構函式 了:

var Car = function() {
  this.wheels = 4;
  this.engines = 1;
  this.seats = 1;
};

在 建構函式 中, this 指向被此 建構函式 創建出來的 物件 。所以,當我們在 建構函式 中寫:

  this.wheels = 4;

這時,它創建出來的新物件將帶有 wheels 屬性,並且賦值為 4.

你可以認為 建構函式 描述了它所創建出來的物件。

讓你的 MotorBike 建構函式 描述一個具有 wheels, engines 和 seats 屬性的 物件 ,並且為這些屬性設定值。

  1. Make Instances of Objects with a Constructor Function
    現在,我們把上一節課我們寫的 建構函式 在這裡用起來!

使用建構函式時,我們通過在它前面使用 new 關鍵字 來對它進行呼叫,如下:

var myCar = new Car();

myCar 現在成為了 Car 的一個 例項(instance),它被 建構函式 描述成下面的樣子:

{
  wheels: 4,
  engines: 1,
  seats: 1
}

記住:要使用 new 關鍵字 去呼叫建構函式。因為只有這樣,Javascript才知道這是要去構造一個新 物件 ,並且把建構函式中的 this 指向這個新物件。

現在,當 myCar (即 Car 的一個 例項 )建立後,他可以像普通物件一樣被使用,包括建立、訪問、修改它的屬性等,就像我們使用其他物件一樣。如下:

myCar.turboType = "twin";

我們的 myCar 變數現在有了一個 turboType 屬性了,且值為 “twin” 。

在編輯器中,使用 Car 這個建構函式去建立一個新的 例項 ,並且把這個例項賦值給 myCar 。

然後給 myCar 建立一個 nickname 屬性,且屬性值為一個字串
4. Make Unique Objects by Passing Parameters to our Constructor
我們之前寫的 建構函式 很好,但是我們不想總是建立相同的物件,怎麼辦呢?

為了解決這個問題,我們要向 建構函式 中新增 引數 。像下面這樣:

var Car = function(wheels, seats, engines) {
  this.wheels = wheels;
  this.seats = seats;
  this.engines = engines;
};

現在,我們可以在呼叫 建構函式 時傳入一組 引數 了。

var myCar = new Car(6, 3, 1);

這段程式碼將會使用這一組 引數 來創建出下面的物件:

{
  wheels: 6,
  seats: 3,
  engines: 1
}

現在該你試試了!改動 Car 的 建構函式 ,使它能夠通過使用 引數 來為 wheels 、 seats 、 engines 屬性進行賦值。

然後呼叫你剛剛改寫過的 建構函式 ,並傳入三個 引數 ,我們就能看到建立的新物件賦值給了 myCar 。
5. Make Object Properties Private
物件擁有自己的特徵,稱為 屬性,物件還有自己的函式,稱為 方法 。

在前面的課程(建構函式)中,我們使用了 this 指向當前(將要被建立的)物件中的 公有屬性 。

我們也可以建立 私有屬性 和 私有方法 ,它們兩個在物件外部是不可訪問的。

為了完成這個任務,我們在 建構函式 中,使用我們熟悉的 var 關鍵字去建立變數,來替代我們使用 this 建立 屬性 。

比如,我們想記錄我們的car行駛的 speed ,但是我們希望外面的程式碼對 speed 的修改只能是加速或減速(而不是變成字串、直接賦值成某個速度等其他操作),那麼如何達到這類操作的目的呢?

編輯器中的 建構函式 展示瞭如何實現這種控制模式。

該你自己試試了!修改 Bike 的 建構函式 ,使它有一個名為 gear 的 私有屬性 ,還有兩個公有方法,叫做 getGear 和 setGear ,這兩個方法用來獲得和設定 gear 的值。
6. Iterate over Arrays with map
map 方法可以方便的迭代陣列,例子:

var timesFour = oldArray.map(function(val){
  return val * 4;
});

map 方法會迭代陣列中的每一個元素,並根據回撥函式來處理每一個元素,最後返回一個新陣列。注意,這個方法不會改變原始陣列。

在我們的例子中,回撥函式只有一個引數,即陣列中元素的值 (val 引數) ,但其實,你的回撥函式也可以支援多個引數,譬如:元素的索引index、原始陣列arr。

使用 map 方法來為 oldArray 中的每一項增加3,並且在 newArray 中儲存它們。 oldArray 不應該被改變。
7. Condense arrays with reduce
陣列方法 reduce 用來迭代一個數組,並且把它累積到一個值中。

使用 reduce 方法時,你要傳入一個回撥函式,這個回撥函式的引數是一個 累加器 (比如例子中的 previousVal) 和當前值 (currentVal)。

reduce 方法有一個可選的第二引數,它可以被用來設定累加器的初始值。如果沒有在這定義初始值,那麼初始值將變成陣列中的第一項,而 currentVal 將從陣列的第二項開始。

下面的例子使用了 reduce 來讓陣列中的所有值相減:

var singleVal = array.reduce(function(previousVal, currentVal) {
  return previousVal - currentVal;
}, 0);

使用 reduce 方法來讓 array 中的所有值相加,並且把結果賦值給 singleVal 。
8. Filter Arrays with filter
filter 方法用來迭代一個數組,並且按給出的條件過濾出符合的元素。

filter 方法傳入一個回撥函式,這個回撥函式會攜帶一個引數,引數為當前迭代的項(我們叫它 val )。

回撥函式返回 true 的項會保留在陣列中,返回 false 的項會被過濾出陣列。

下面的程式碼示例展示了使用 filter 來移除陣列中值等於5的項:

注意: 我們忽略了第二引數和第三引數,因為例子中我們只需要第一引數就夠了。

array = array.filter(function(val) {
  return val !== 5;
});

使用 filter 來建立一個新陣列,新陣列的值是 oldArray 中值小於6的元素。不許改變原陣列 oldArray 。
9. Sort Arrays with sort
使用 sort 方法,你可以很容易的按字母順序或數字順序對陣列中的元素進行排序。

與我們之前用的陣列方法僅僅返回一個新陣列不同, sort 方法將改變原陣列,返回被排序後的陣列。

sort 可以把比較函式作為引數傳入。比較函式有返回值,當 a 小於 b,返回一個負數;當 a 大於 b ,返回一個正數;相等時返回0。

如果沒有傳入比較函式,它將把值全部轉成字串,並按照字母順序進行排序。

下面的例子將展示 sort 的使用,傳入的比較函式把元素按照從小到大的順序進行排列:

var array = [1, 12, 21, 2];
array.sort(function(a, b) {
  return a - b;
});

使用 sort 按照從大到小的順序排序 array 。
10. Reverse Arrays with reverse
你可以使用 reverse 方法來翻轉陣列。

var myArray = [1, 2, 3];
myArray.reverse();
結果myArray 變成了 [3, 2, 1]

使用 reverse 來翻轉 array 陣列。並賦值給 newArray.
11. Concatenate Arrays with concat
concat 方法可以用來把兩個陣列的內容合併到一個數組中。

concat 方法的引數應該是一個數組。引數中的陣列會拼接在原陣列的後面,並作為一個新陣列返回。

下面是一個拼接陣列的例子,用concat 把 otherArray 拼接在 oldArray 的後面:

newArray = oldArray.concat(otherArray);

使用 .concat() 將 concatMe 拼接到 oldArray 後面,並且賦值給 newArray。
12. Split Strings with split
你可以使用 split 方法按指定分隔符將字串分割為陣列。

你要給 split 方法傳遞一個引數,這個引數將會作為一個分隔符。

下面的例子展示了 split 方法的使用,按照 s 字母進行分割:

var array = string.split('s');

使用 split 方法來把字串 string 分割為陣列 array。
13. Join Strings with join
我們還可以使用 join 方法來把陣列轉換成字串,裡面的每一個元素可以用你指定的連線符來連線起來,這個連線符就是你要傳入的引數。

下面展示了使用 join 來將陣列中的每一項放入字串,並用 and 進行連線:

var veggies = ["Celery", "Radish", "Carrot", "Potato"];
var salad = veggies.join(" and ");
console.log(salad); // "Celery and Radish and Carrot and Potato" 

使用 join 方法,連線符為’ '把陣列 joinMe 轉化成字串 joinedString.