這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !
系統提示:「If winter comes , can spring be far behind ?--P. B. Shelley」,PixiJS青銅玩家還卡關於自定義function階段,僅獲得經驗提昇等級。
abc分別是apply()、bind()、call(),雖然說apply()、call()要綁在一起講,順序有點不對,但是這樣對我來說比較好記(常常忘記他們的名稱)
所以這次的任務就是要從自定義函數keyboard
中來認識abc家族(?)
function keyboard(keyCode) {
var key = {};
key.code = keyCode;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
//The `downHandler`
key.downHandler = function(event) {
if (event.keyCode === key.code) {
if (key.isUp && key.press) key.press();
key.isDown = true;
key.isUp = false;
}
event.preventDefault();
};
//The `upHandler`
key.upHandler = function(event) {
if (event.keyCode === key.code) {
if (key.isDown && key.release) key.release();
key.isDown = false;
key.isUp = true;
}
event.preventDefault();
};
//Attach event listeners
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
window.addEventListener(
"keyup", key.upHandler.bind(key), false
);
return key;
}
主要是以下這個部份,因此想了解下bind()
,也連帶順便認識一下apply()
、call()
:
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
window.addEventListener(
"keyup", key.upHandler.bind(key), false
);
***
先來看看MDN以及ECMAScript上對於this的解釋:
感覺上this就是一個很靈活的小東西,在不同情況下,他可以指向不同的值。
而apply()
、call()
、bind()
這三個函式都是用來改變this指向的對象,或者說可以綁定this指向的對象。
***
所以我想從this綁定開始寫起,其他應該先不會研究。
關於this的綁定,有四種方法:
至於apply()
、call()
、bind()
被歸類在明確綁定的部份,其他可能只會簡單的先帶過。
***
1. 預設綁定
person()
2. 隱含綁定
指向:用來呼叫該函數的物件
舉例:
結果如下
可以從上方執行的函式觀察到,最後執行的兩段程式差異性:
person1.whatYourName();
sayYourName();
第一段:我們利用物件person1
的屬性來呼叫sayYourName()
,此時的this指向的是「呼叫該函數的物件」,也就是person1
。
所以當執行sayYourName()
裡面的console.log後,印出來的this.name
就會是person1
中的name
。
第二段:直接執行sayYourName()
,此時的this指向的是全域,但是全域中沒有name
屬性啊,所以得到的就會是"undefine"。
3. 明確綁定
apply()
、call()
、bind()
的參數apply() & call()
這兩個一起講,因為太相似了。
call()
this
指向的內容、後面的參數則依序為function test的參數a,b,c所要帶入的內容。apply()
call()
一樣,第一個參數傳入this要指向的對象,不同的是傳入function test的參數方式,apply()
是利用陣列來作為參數傳入。call()
都是一樣的bind()
我們先看下面這段程式碼:
印出的結果為
直接執行func()
得到結果為"undefined"的原因,是因為執行func()
時,this指向的會是全域(這跟我們呼叫的方法有關),所以就會想是不是有辦法讓我們可以設立一個函數,不管怎麼呼叫,他的this都不會改變,於是bind()
就誕生了!
此時利用bind()
,將sayYourName()
裡面的this與person1
綁在一起,因此當我需要this.name
時,他就會去找person1
中的屬性name
了,並且把他儲存成一個函數,之後我們就可以直接使用這個函數,也不必擔心this出什麼差錯,而指向不如我們預期的東西。
對了,還是印出一下結果
***
怕命名上有點混淆,所以這邊改一下上方範例:
印出結果如下
4. new運算子綁定
apply()
、call()
、bind()
,所以這裡就...不繼續寫了(加上我沒時間了QAQ)***
回到Treasure Hunter Game
window.addEventListener(
"keydown", key.downHandler.bind(key), false
);
當"keydown"被觸發時,則執行key.downHandler.bind(key)
,而他這邊做的事情就是把key
物件中的屬性downHandler()
中的this指向綁定到key
本身身上,如此一來downHandler()
這個函式就可以取用key
物件中的屬性去使用。
從物件導向概念、this概念,再到apply()
、call()
、bind()
,今天花了大概5個小時的時間不間斷的去理解,幸好有生出來(不然就白蹺課了),也把一直有點逃避的內容給理解起來,儘管還是很不熟悉,但是比過去有更懂了些!
今天是用Treasure Hunter Game官方教程來寫鐵人賽的最後一天,然而鐵人賽還有4天,究竟後面幾天能不能熬過去(突然發現這好像不是能不能的問題...因為一定要撐完)
目前規劃剩下27,28,29天會分別來寫遊戲相關的擴充內容:(雖然也不保證當天有沒有辦法生出來就是了,但是會盡力!)
至於第30天當然就拿來寫心得啦¯_(ツ)_/¯