Day 14 - Arrow Function Expression & this

this

在 JavaScript 里，this 指向 window，在 function 中， this 指向呼叫它的地方。
例如：

// Window
window.name = "Amy";
console.log(this.name); // Amy
console.log(this); // Window Object
// Object
let Helen = {
    age:24,
    sayAge(){
        console.log("I am " + this.age + " years old.")
    }
};
Helen.sayAge(); // I am 24 years old.

在 sayAge() 里面的 this 取决於呼叫它的地方，sayAge() 是在 Helen 这个 object 里被定义的，所以 this 就代表这个 object，this.age 就会是 24。
this 也能改变物件的值，例如：

let Helen = {
    age:24,
    sayAge(){
        console.log("I am " + this.age + " years old.")
    }
};
Helen.age = 25;
Helen.sayAge(); // I am 25 years old.

Arrow Function Expression

箭头函式语法简单，和传统函式比，可以少打很多字，也让程序码较好阅读，在箭头函式中，没有自己的 this，所以箭头函式中的 this 永远指向函式被定义时所在的作用域中的 this 值。
过去我们写函式的方式如下：

function sayHi(){
    console.log("Hi");
}
sayHi(); // Hi

将上面例子改成箭头函式：

const sayHi = () => {
    console.log("Hi")
}
sayHi(); // Hi

• 如果函式有回传值，要加上 return，且如果没有参数，就一定要加括号，例如：

const sayHi = () => {
  return "Hi";
}
sayHi(); // Hi

上面的例子也可以简化成下面这样：

• 省略 return 及 {}，因为当没有 {} 时，会自带 return

const sayHi = () => "Hi";
sayHi(); // Hi

• 如果函式只有一个参数时，() 可以省略
  原始程序码：

let count = (x) => {
    console.log(x + 1)
}
count(3); // 4

参数省略 () 後：

let count = x => {
    console.log(x + 1)
}
count(3); // 4

• 箭头函式如果在定义 function 前就先执行会出错

sayHi("Gina");
let sayHi = (name) => {
    console.log("Hi" + name)
}

执行上面的程序码，会得到 Uncaught RefernceError 不能在定义前执行的错误提示

Bind,Call and Apply

下面的程序码因为 this 指向 window，会回传 undefined，这时我们就可以使用 bind,call or apply

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this.age); // undefined
}
getPerson();

• bind
  使用 bind 时会回传新的 function，所以需要用一个变数接住

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this);
  console.log(this.age);
}
getPerson();
// Window Object
// undefined

// 使用 bind 绑定
let newfn = getPerson.bind(Helen);
newfn();
// {name:"Helen",age:24,}
// 24

• call
  不会产生新的 function，可以直接使用

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this);
  console.log(this.age);
}
getPerson.call(Helen);
// {name:"Helen",age:24,}
// 24

如果 function 内有参数，则直接在括号後面加上去

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(country,sex){
  console.log(this);
  console.log(this.age);
  console.log("I am from " + country + ".I am " +sex );
}
getPerson.call(Helen,"Taiwan","Female");
// {name:"Helen",age:24,}
// 24
// I am from Taiwan.I am Female

• apply
  和 call 非常类似，差别在於 apply 的参数要放在阵列里

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(country,sex){
  console.log(this);
  console.log(this.age);
  console.log("I am from " + country + ".I am " +sex );
}
getPerson.apply(Helen,["Taiwan","Female"]);
// {name:"Helen",age:24,}
// 24
// I am from Taiwan.I am Female