# PixiJS 切換場景（2）Constructor Function
###### tags: `PixiJS`
2022.10.20(Thu.)
## ▉ Introduction
為了學習切換場景，所以先看了[奔跑吧！台北：程式幕後分享](https://medium.com/@chiunhau/%E5%A5%94%E8%B7%91%E5%90%A7-%E5%8F%B0%E5%8C%97-%E7%A8%8B%E5%BC%8F%E5%B9%95%E5%BE%8C%E5%88%86%E4%BA%AB-e02d0a565559)的文章，裡面提到了一篇文章「[Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)」，然後打開來後發現...我在看的程式碼語言是JavaScript嗎？（完全看不懂QQ）
### Keywords
整理一些從[Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)中看見的Keywords：
module, export, class, constructer, super, extends
不過在學習上述關鍵字的路上，碰到了更多的關鍵字...所以決定乘著這個機會，一步步的把他補齊。
****
## ▉ Constructor Function
接著要來看的是Constructor Function，但在進入主題之前，先回頭看看前面Factory Function的範例：
```javascript!
function createPerson(name){
var talkObject = {};
talkObject.name = name;
talkObject.talk = function(){
return `hello I am ${this.name}`;
}
return talkObject;
}
```
現在我們創造2個名字：
```javascript!
const Sam = createPerson("Sam");
Sam.talk(); //hello I am Sam.
const Sean = createPerson("Sean");
Sean.talk(); //hello I am Sean.
```
接著來看看這兩個talk會不會是相同的物件？
```javascript!
Sam.talk === Sean.talk
```
得到的結果是false！
但是神奇的事情發生了，我們現在來看看String底下的slice() method：
```javascript!
"Sam".slice === "Sean".slice
```
得到的結果竟然是true！？
這是因為slice這個method是被定義於String的prototype之上，也就是說他們都是被建立在同一個String的prototype物件上的。
前面talk method的部份會在每次創建新物件使用talk()時，就複製一次整個talk()給該變數。
至於String的部份，則是去「參考」slice()這個函式去做使用。
＊＊＊
> 底下一樣參考colorCode的yt影片[What is Constructor Function in JavaScript?](https://www.youtube.com/watch?v=I37qHG0DxmE)以及[The Web Developer Bootcamp 2022](https://www.udemy.com/course/the-web-developer-bootcamp/) U29整理些筆記。
首先來看一下MDN上關於[new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new#examples)的說明，會發現他先寫了一個函式，而函式裡頭只有this點某個參數，並不像前面提到的Factory Function，最後會return一個值。
```javascript!
function createPerson(name, age){
this.name;
this.age;
}
```
這個時候會好奇這個this會指向誰？於是來試試看...
```javascript!
function Person(name, age){
this.name = name;
this.age = age;
console.log(this);
}
```
此處的this會指向Window（在browser的情況下）
原因是這個`Person()`，並不在任何物件中，而是存在於全域，因此這個this就會指向最接近他的一個物件，以此處為例，也就是Window object。
所以說為什麼他在MDN的例子中，只寫了this，且不回傳任何值呢？這裡就要提到一個keyword：「new」！
因此如果想建立新的物件，我們可以使用new：
```javascript!
function Person(name, age){
this.name = name;
this.age = age;
console.log(this);
}
const Jay = new Person("Jay", 20)
```
得到的結果會是：
這個時候如果我們如同String的method們一樣，用prototype新增method
增加了一個talk method在Person的prototype上：
```javascript!
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.talk = function(){
return `Hello I am ${this.name}, I'm ${this.age} years old.`
}
```
接著用new建立兩個物件：
```javascript!
const Jay = new Person("Jay", 20)
const Mark = new Person("Mark", 21)
```
這個時候就會發現兩個talk method是一樣的東西：
回到new的部份，[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new#description)中有提到new個運算子做了哪些事情。
其實就如之前提到的Factory Function做的事情是一樣的，使用new後，會在function中先建立一個物件（這裡稱這個物件叫做newInstance），接著this會指向這個物件，最後return newInstance物件。
（我們看見的程式碼）
```javascript!
function Person(name, age){
this.name = name;
this.age = age;
}
new Person("Jay", 20);
```
（程式碼實際做的事情）
```javascript!
function Person(name, age){
const newInstance = {};
this.name = name;
this.age = age;
return newInstance;
}
new Person("Jay", 20);
```
****
在MDN最底下附上了ECMAScript The new Operator的[連結](https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-new-operator)，決定來一探究竟，結果完全看不懂...QQ
不過突然想到阿傑在鐵人賽中寫得主題有介紹到ECMAScript，所以決定有空拜讀[阿傑的文章](https://ithelp.ithome.com.tw/users/20152459/ironman/5744)！
（暫時先把概念弄懂，所以規範還是先跳過）
****
### 參考資料
* [奔跑吧！台北：程式幕後分享](https://medium.com/@chiunhau/%E5%A5%94%E8%B7%91%E5%90%A7-%E5%8F%B0%E5%8C%97-%E7%A8%8B%E5%BC%8F%E5%B9%95%E5%BE%8C%E5%88%86%E4%BA%AB-e02d0a565559)
* [Tutorial : Handling game scenes and screen scaling with Pixi](http://ezelia.com/2013/pixi-tutorial)
* [咩色用得好，歸剛沒煩惱 - 從 ECMAScript 偷窺 JavaScript Array method](https://ithelp.ithome.com.tw/users/20152459/ironman/5744)
* [The Web Developer Bootcamp 2022](https://www.udemy.com/course/the-web-developer-bootcamp/) U29：Prototypes, classes, OOP
* [What is Constructor Function in JavaScript?](https://www.youtube.com/watch?v=I37qHG0DxmE)
Sign in with Wallet
Connect another wallet