.
來存取[]
obj.method(x,y); // 和 obj.method(x,y)
obj["method"](x,y); // 調用 method 方法
student.studentId.toUpperCase();
funcName().method(); // 先呼叫函式 funcName,然後再呼叫 funcName 回傳物件的 method 方法。所以若 funcName 沒有回傳一個具有 method 方法的物件,或者 method 不是一個函式,那麼這句將會拋出一個錯誤。
// funcName(); 呼叫 funcName 函式 回傳一個物件
// method(); 回傳物件的 method 方法的呼叫
在物件導向程式設計中,方法和 this
關鍵字會是核心概念。
當一個函式作為方法被使用時,它實際上接收了一個隱含的引數(也就是調用該方法的物件)。
triangle.setSize(base, height); // 改變 `triangle` 的大小
setTriangleSize(triangle, base, height);
這兩行程式碼中調用的函式可能在 triangle
物件上執行完全相同的操作。
但是 triangle.setSize(base, height);
更直接地表達了正在改變 triangle
的大小,而 setTriangleSize(triangle, base, height);
則沒有很直接表達。
可以把方法調用後的回傳值再當作之後要調用的一部分來執行下一個要調用的方法
// 找出所有header,利用map()取出每個元素的 id 回傳,再利用get()將取出(回傳)的jQuery物件轉換成JS的陣列,再對此陣列進行排序(sort())。
$(":header").map(
function(){
return this.id
}
).get().sort();
// 使用document.querySelectorAll()選取所有heading元素並取得回傳的NodeList,使用Array.from 將 NodeList 轉換為一個真正的陣列,再利用map()取出每個元素的 id 回傳,再進行排序(sort())
let headers = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"))
.map(function(header) {
return header.id;
})
.sort();
在寫程式時,有時候會寫些方法(如一些任務或動作),但可能不需要回傳任何的值。那麼可以讓這些方法回傳 this
,直接指向目前物件的參考。
整個撰寫方式都是這樣的時候,就可使用方法鏈(Method Chaining)的設計風格
假設有個 shape
物件,它有許多方法如 setX
、setY
、setSize
、setOutline
、setFill
和 draw
。若每個方法都回傳 this
,那麼可以寫:
shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw();
先使用 filter
方法選擇所有的胡蘿蔔,再使用 map
方法計算每個胡蘿蔔名稱的長度,最後使用 reduce
方法計算總共有多少字元。
這些方法呼叫都在同一行程式碼中完成。每個方法都會回傳一個新的結果,再利用此結果呼叫下一個方法。
var vegetables = ["onion", "garlic", "onion", "shallot", "onion"];
var result = vegetables.filter(function (vegetable) {
return vegetable === "onion";
}).map(function (onion) {
return onion.length;
}).reduce(function (total, length) {
return total + length;
}, 0);
console.log(result); // 輸出:15