# ==討論日期 : 4/17 ( 三 )==
||勇於面對嘗試新挑戰，勝過在原地無所謂的徘徊，祝所有夥伴面試都順利，早日上岸!||

## 上週複習
- [討論日期：4/10](https://hackmd.io/u4ZYMAWMQQWvS47YzoCL8g?both)
<br>

## 💖 本週複習 🥰

[核心篇第六堂：this 與原型鏈](https://hackmd.io/@hexschool/ByLIad_So)
<br>

### ==1. 請說明 call by reference & by value 間的差異==

#### 相關知識點
- [JavaScript - 傳值 ( by Value )、傳址 ( by Reference )、傳共享 ( by sharing )](https://hackmd.io/@wheat0120/ryegUgEBK)
- [LHS 和 RHS](https://israynotarray.com/javascript/20200405/949633773/)
- [JS基本觀念：call by value 還是reference 又或是 sharing?](https://medium.com/@mengchiang000/js%E5%9F%BA%E6%9C%AC%E8%A7%80%E5%BF%B5-call-by-value-%E9%82%84%E6%98%AFreference-%E5%8F%88%E6%88%96%E6%98%AF-sharing-22a87ca478fc)
- [JavaScript 中的 Call by sharing](https://hsuanblog.live/2023/04/javascript-%E4%B8%AD%E7%9A%84-call-by-sharing/)

#### 大家回答

call by value

function swap(a, b) {
  var temp = a;
  a = b;
  b = temp;
}

var x = 10;
var y = 20;
swap(x, y);
console.log(x, y) // 10, 20

call by reference

function add(obj) {
  obj.number++
}

var o = {number: 10}
add(o)
console.log(o.number) // 11

call by sharing

function changeAge(person) {
  person.age = 25;
  person = {
    name: 'John',
    age: 50
  }
  return person
}
var personObj1 = {
  name: 'Charles',
  age: 30
};
var personObj2 = changeAge(personObj1);
console.log(personObj1);
console.log(personObj2);

<br>

### ==2. 請說明在 javascript 中什麼是 this==

#### 相關知識點

#### 大家回答
- this 是存在函式作用域裡面的 → 每個函式的 this 都可能不同
- callSomeone() 純粹的呼叫 會指向全域
- this 與如何定義無關，只與呼叫方式有關
【箭頭函式沒有自己的 this】，就會往外層找，如果沒有被函式包住，就會指向全域
- 瀏覽器跟node在運行起來的時候，會有一個最上層的全域環境。這時候的this在node會是global,在瀏覽器會是window。但是如果是去呼叫物件內的傳統函式的時候，this會指向調用的物件本身。箭頭函式沒有自己的this,會往更上一層的函示去找
<br>

### ==3. 程式題==

var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};
 
var stoleSecretIdentity = hero.getSecretIdentity;
 
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

#### 大家回答

`undefined`
`John Doe`

<br>

### ==4. 請說明什麼是箭頭函式；與傳統函式差別在哪==

#### 相關知識點
- [什麼是箭頭函式 (Arrow Function)？跟一般的函式有什麼差別？](https://www.explainthis.io/zh-hant/swe/what-is-arrow-function)
- [鐵人賽：箭頭函式 (Arrow functions)](https://www.casper.tw/javascript/2017/12/21/javascript-es6-arrow-function/)

#### 大家回答
- 主要差異為 this 調用，箭頭函式沒有作用域，沒有自己的 this，會繼承外面的 this。
- 箭頭函式相比於一般函式，語法較簡潔。
- 傳統函式的 this 取決於呼叫方式。

<br>

### ==5. 請說明什麼是 constructor function，有什麼用途呢==

#### 相關知識點
- [new](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)
- [建構物件範本：Constructor Function](https://javascript.alphacamp.co/constructor-function.html)
- [Day27　函式建構子與new](https://ithelp.ithome.com.tw/articles/10194795)
- [JS之路 Day05 - Constructor Function(構造函式)](https://ithelp.ithome.com.tw/articles/10294721)

#### 大家回答
構造函式也是函式。
一般為了要區分這兩者的差別，構造函式在命名上都會以開頭大寫字母來寫，而構造函式的誕生，是要使用 new 關鍵字來創立。

意味著，使用 new 來生成的函式就是構造函式。
沒有使用 new 來生成，可以直接呼叫執行的，就是普通函式。

备注： 虽然构造函数可以像任何常规函数一样被调用（即不使用 new 运算符），但在这种情况下并不会创建一个新的对象，this 的值也是不一样的。

**盡可能不要把方法寫在建構式函式中**
一般來說，我們不會把方法寫在建構式函式中，因為每次當你 new 一個新物件時，物件裡都會攜帶一個新的 function，這個 function 會佔用新的記憶體空間，但明明都是在做一樣的事。
因此，我們會傾向把方法放進物件原型 (prototype) 並運用原型鏈 (prototype chain) 來使用物件。

構造函式的使用情境：
1. 使用現成函式庫（React Class、Vue 2）。
2. 後端。
3. 原生 JS 所提供的函式建構子（new Date()）。

範例：

// Define a constructor function
function SmartPhone (name, price, features) {
  this.name = name
  this.price = price
  this.features = features
  this.showPhoneInfo = function () {
    console.log(`The price of ${this.name} is ${this.price}, which has the newest features such as ${this.features.join(', ')}.`)
  }
}

<br>

### 問題測驗 (溫馨提醒記得複習前面幾周的唷!)

#### ==題目一==

var myName = '全域';

function callName() {
  console.log(this);
  console.log(this.myName);
}

callName();

解答：
window
'全域'
<br>

#### ==題目二==

var a = 1;
function fn() {
  this.a = fn.a;
}
fn.a = 2;
fn();
console.log(a);

解答：2
<br>

#### ==題目三==

var value = 1;
var foo = {
  value: 2,
  bar: function() {
    return this.value;
  }
};

console.log(foo.bar());

解答：2
<br>

#### ==題目四==

var a = {
  value: 1,
  fn: function() {
    return this.value;
  }
}

var b = a;
b.value = 2;
console.log(a.fn());

解答：2