在 Javascript 裡面，函式通常會有四種不同的呼叫方式：
1. The Method Invocation Pattern
2. The Function Invocation Pattern
3. The Constructor Invocation Pattern
4. The Apply Invocation Pattern
說明如下：
* 在 Method Invocation Pattern 裡面， this 會指到呼叫方法的物件。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
C:\>node > var foo = { ... name: "Victor", ... greeting: function(){console.log(this.name + " says hello!");} ... }; undefined > foo.name 'Victor' > foo.greeting() Victor says hello! undefined > |
- 在 Function Invocation Pattern 裡面， this 會指到 global 物件。如果是物件的方法裡面的 nested 的 function，內部的 function 的 this 變數還是會指到 global 物件，所以有可能會出錯。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C:\>node > var foo = { ... name:"Victor", ... bar: function() { ..... console.log(this.name); ..... var innerFunc = function(){ ....... console.log(this.name); ....... }; ..... innerFunc(); ..... } ... }; undefined > foo.bar() Victor undefined undefined > name = "Global Name!" 'Global Name!' > foo.bar() Victor Global Name! undefined > |
- 在 Constructor Invocation Pattern 裡面，當你使用 new 來建立一個新的物件時，this 會指到新建立的 object，而 __proto__ 會指到 Constructor 函式的 prototype 。這個很直觀，所以不用舉例。
-
使用 Apply Invocation Pattern 時，第一個參數會指定給 this 變數。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
C:\>node > var foo = function(){ ... console.log(this.name); ... } undefined > foo() undefined undefined > name = "Global Name!"; 'Global Name!' > foo() Global Name! undefined > foo.apply({name:"Random Object Name!"}) Random Object Name! undefined > var bar={name:"I am bar!"}; undefined > foo.apply(bar) I am bar! undefined > |
參考資料：
- Javascript: The Good Parts (by Douglas Crockford)
Leave a Reply