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'));
|