call
假設我們有一個程式：
1
2
3
4
5
6
7
8
9
| const person = {
firstName: 'Green',
lastName: 'tea',
fullname: function() {
return this.firstName + ' ' + this.lastName;
}
}
console.log(person.fullname());
|
將它輸出會是Green tea。
不過這樣的設計，如果你要宣告很多個person就會重複宣告fullname。
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const person1 = {
firstName: 'Green',
lastName: 'tea',
fullname: function() {
return this.firstName + ' ' + this.lastName;
}
}
const person2 = {
firstName: 'Oolong',
lastName: 'tea',
fullname: function() {
return this.firstName + ' ' + this.lastName;
}
}
|
所以我們可以使用call來達成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| const person = {
fullname: function() {
return this.firstName + ' ' + this.lastName;
}
}
const person1 = {
firstName: 'Green',
lastName: 'tea',
}
const person2 = {
firstName: 'Oolong',
lastName: 'tea',
}
console.log(person.fullname.call(person1));
console.log(person.fullname.call(person2));
|
apply
現在有一個程式長這樣：
1
2
3
4
5
| const obj = { name: 'John' };
let hello = function(a, b) {
return `${a} ${this.name} ${b}`;
}
console.log(greeting.call(obj, 'Hello', 'How are you'));
|
call的用法如之前提到的，把物件call特定的對象可以取用。
此外，call後面是可以接其他參數的，以這個例子，後面放了Hello 和 How are you
所以輸出會是：
Hello John How are you
換成apply的用法：
1
2
3
4
5
| const obj = { name: 'John' };
let hello = function(a, b) {
return `${a} ${this.name} ${b}`;
}
console.log(greeting.apply(obj, ['Hello', 'How are you']));
|
apply的用法跟call很像，比較不同的地方是，後面接的參數是使用array。
假設今天你希望使用array用在max上，但是裡面吃的參數是seperated的：
1
2
| const list = [2, 1, 5];
console.log(Math.max(2, 1, 5));
|
這個時候你可以使用apply：
1
2
| const list = [2, 1, 5];
console.log(Math.max.apply(null, list));
|
以這個例子，不需要assign其他東西，所以第一個參數使用null。
bind
當我們要把指定的物件綁定到對應的對象，我們會使用bind。
1
2
3
4
5
6
7
8
| const obj = { name: 'John' };
let hello = function(a, b) {
return `${a} ${this.name} ${b}`;
}
let johnSayHello = hello.bind(obj);
console.log(johnSayHello('Hello', 'How are you'));
|
