本篇章主要是我自己整理出來的 (大多數是爬了各網站、教學文章)

我把它當作學習筆記, 如果有也侵害著作權

請留言或是 E-mail: lioajimzen@gmail.com


Table of Contents
資料參考來源: 
1.你不可不知的 JavaScript 二三事#Day19:函數定義 (Function Definition) 的 100 種寫法
2.MDN_Web
3.Fooish_Javascript
4.JS-ES6箭頭函數
5.Arrow function expressions
6.六角學院課程

<函式的概要/Function Outline>

函式說的白話…

一連串邏輯判斷+運算式, 將他們寫成一個 “功能容器”, 每次你要用他們的時候, 呼叫他們即可!

又或者可以將你定義的眾多“屬性“清單包裝在Function 裡面

<一般函式定義/Function Define>

一個函式的定義由一系列的函式”關鍵字”組成, 依次為:

  • 用 function 關鍵字來宣告一個函數
  • 我們指定這個函數的名稱 functionName
  • 包圍在括號()中,並由逗號區隔每一個函式參數。
  • 包圍在大括號{}中,用來定義函式內功能的”物件”,而且這些物件已經給予記憶體空間( 通常拿來建立物屬性件使用 )

函式_結構 Construct Function>>

function functionName(parameter1, parameter2, ...) {
    statements
    return value;
}

可以不包含參數&不回傳/None Return>>

若你把 return 陳述式刪除, 當這個function 被呼叫之後經處理的結果若沒有 “受眾” , 結果就會顯示 undefined.

我的文章有寫關於 undefined 就是這篇。

無Return 結構:

function functionName() {

//只有陳述式
    statements 
}

// 輸出結果 : 
undefined 

函式範例>>

函式名稱: squre

squre函式裡面的算式= number*2 , 運算完成後會把該值 resultVal 作回傳。

let resultVal;
let number; 

function square(number) {
          resultVal=number * number;
  return  resultVal
}

console.log(square(10));
-----------------------------------
// 輸出結果
100

<函式回傳/Return Satement >

參考資料:

MDN_Web_Return

英文原文: 
The return statement ends function execution and specifies a value to be returned to the function caller.

函式回傳:

當你呼叫這個函式, 此函式的處理功能…. 接手過來處裡你的資料, 處理完之後把這個處理好的值丟到一個內定記憶體區間或式暫存區, 然後再把這個暫存值丟給”呼叫者”, 此時執行到return 陳述式時也代表此函式已經執行完畢!

function getRectArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}
-----------------------------------
console.log(getRectArea(3, 4));
// expected output: 12

console.log(getRectArea(-3, 4));
// expected output: 0

Return的各種表示法>>

return;
return true;
return false;
return x;
return x + y / 3;

<各種函式的寫法/Various Functions Writing>

  1. 宣告式 (Function Declarations)
  2. 匿名表達式 (Function Expressions w/o Function Name)
  3. 具名表達式 (Function Expressions w/ Function Name)
  4. 建構子式 (Function Constructor)
  5. 箭頭函數 (Arrow Function) – ES6 參考資料

宣告式 (Function Declarations)>>

  • 最標準的寫法。
  • 使用 function 關鍵字作函數的宣告和定義。
  • 具有 Hoisting 提升效果。
console.log(myFunc);
console.log(myFunc(3, 6));

function myFunc(a, b) {
    return a + b;
}
-----------------------------------
// 執行結果
//function myFunc(a, b) {
    return a + b;
}

//9

匿名表達式 (Function Expressions without Function Name)>>

  1. 先宣告一個變數,再定義一個函數內容放到該變數裡。
  2. 此方式定義的函數實際上是匿名函數 (a function without a name),將函數定義的主體,存在你定義的變數裡。
  3. 變數名稱不等於函數名稱。
  4. 不具 Hoisting 提升效果。
console.log(myFunc);

// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function

let myFunc = function (a, b) {
    return a + b;
};

console.log(myFunc);
console.log(myFunc(3, 6));
-----------------------------------
//執行結果
//undefined
//ƒ (a, b) {
    return a + b;
}
//9

具名表達式 (Function Expressions / Function Name)>>

  1. 和「匿名表達式」相似,差別在定義函數內容時,有給予一個函數名稱 (Function name)。
  2. 定義的函數印出來會有函數名稱(不等於變數名稱)。
  3. 無法直接透過該函數名稱呼叫
  4. 不具 Hoisting 提升效果
console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function

var myFunc = function aaa(a, b) {
    return a + b;
};

console.log(myFunc);
console.log(myFunc(3, 6));
// console.log(aaa); // ReferenceError: aaa is not defined
-----------------------------------
//執行結果 
//undefined
//ƒ aaa(a, b) {
    return a + b;
}
//9

建構子式 (Function Constructor)>>

說到建構子我們不得不提 new 這個Keyword,因為提到new 我們就要有個概念: 我們正在建立物件!

  1. 先宣告一個變數,再用 JavaScript 內建的函數建構子 Function() 去定義函數內容,放到該變數裡。
  2. 用 Function() 定義的函數自動被給予函數名稱 anonymous但和「具名表達式」一樣,都無法直接透過該函數名稱呼叫
  3. 不具有 Hoisting 提升效果。
console.log(myFunc);
// console.log(myFunc(3, 6)); // TypeError: myFunc is not a function

var myFunc = new Function("a", "b", "return a + b");
console.log(myFunc);
console.log(myFunc(3, 6));
-----------------------------------
//執行結果 // undefined
// ƒ anonymous(a,b) {
return a + b
}
//9

JavaScript 最容易考的的題目, 箭頭函式與一般函式的差別!

箭頭函式 (Arrow Function)>>

參考資料: MDN_Web_箭頭函式 , 鐵人賽 (Arrow function) 卡斯柏

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.

箭頭函式 有著比一般函式表示法更精簡的表示法, 但箭頭函式並非一體適用….

箭頭函式也有它的極限啊!

  1. Arrow functions don’t have their own bindings to thisarguments or super, and should not be used as methods.
  2. Arrow functions don’t have access to the new.target keyword.
  3. Arrow functions aren’t suitable for callapply and bind methods, which generally rely on establishing a scope.
  4. Arrow functions cannot be used as constructors.
  5. Arrow functions cannot use yield, within its body.
  1. Arrow functions沒有自己的 this、arguments 或 super 可綁定不應該作為 方法 Method
  2. Arrow functions無權造訪 new.target 關鍵字。
  3. Arrow functions不適用於調用、應用和綁定方法,這些方法通常依賴於建立作用域。
  4. Arrow functions不能用在建立建構子。
  5. Arrow functions不能在函式內使用 yield

Arrow Functions ES5與ES6的不同之處

底下範例碼參考: Arrow function js_github

可省略 function 這個關鍵字 !

FUNCTION(a){} 將改成 (a) =>{}
//ES5 版本
var circle = function(r) {
    var PI = 3.14 ;
    return r*r*PI
}
console.log(circle(2)) 
//執行結果  12.56


//ES6 版本
const circle = (r) => {
    const PI = 3.14 ;
    return r*r*PI
}
console.log(circle(2)) 

//執行結果  12.56

Arrow Function基本語法結構

參數1, 參數2, … , 參數N (含Return )

(參數1, 參數2, …, 參數N) => { 陳述式; }

(參數1, 參數2, …, 參數N) => 表達式;

陳述式與表達式

當只有一個參數時, 可去除括號

(參數1)=> { statements }

//若無參數,就一定要加括號:
() => { statements }

Arrow Function進階語法

// 用大括號將內容括起來,返回一個物件字面值表示法:

params => ({foo: bar})

// 支援其餘參數與預設參數

(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }

// 也支援 parameter list 的解構
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); 

//執行結果 6

Arrow Function有兩個重要的特性:
1. 更簡潔的函式寫法
 2. this 變數是全域性的

//物件內的屬性們
var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// -----這段函式會輸出[8, 6, 7, 9]這個陣列
elements.map(function(element) {
  return element.length;
});

// -----上方一般的函式,可以被改寫成下方的箭頭函式
elements.map((element) => {
  return element.length;
}); 


//執行結果 [8, 6, 7, 9]


// -----如果輸入的參數只有一個,我們可以移除掉外面的括號
elements.map(element => {
  return element.length;
}); 

//執行結果 [8, 6, 7, 9]


// -----當箭頭函式裡的內容只有'return'的時候,我們刪除return和外面的大括號
elements.map(element => element.length); 

//執行結果 [8, 6, 7, 9]


// -----在這個範例中,因為我們只需要length這個屬性,所以也可以使用解構賦值:
// -----下方的'length'對應到我們想取得的屬性,而'lengthFooBArX'只是很普通的變數名稱,
// -----可以被任意修改成你想要的名字

elements.map(({ length: lengthFooBArX }) => lengthFooBArX); 

// [8, 6, 7, 9]

// -----上面解構賦值之後的參數也可以被改寫為下面這樣。但要注意的是,在這個範例中,
// -----我們不是要指定'length'這個值給一個虛構的屬性,而是這個變數的名稱'length'本身就是
// -----用來當成我們想從物件上取得的屬性


elements.map(({ length }) => length); 

//執行結果 [8, 6, 7, 9]

SetTimeout 箭頭函式結構

setTimeout(() => {
  // -----100 milliseconds 之後執行

}, 100);

SetInterval 箭頭函示結構

setInterval(()=> {
 // -----100 milliseconds 這期間一直處裡。

},100);

This 與我們分不開>>

參考資料:

PjChener_Arrow Function_This, PJCHENder
那些沒告訴你的小細節this

解釋 JavaScript 中 this 的值?|ExplainThis

一般函式內,每個新函式是依據如何被呼叫來定義自己的 this 變數。

This :一般函式內 結構與功能

  • 建構子時是一個新物件 (這很重要)
  • 在呼叫嚴格模式函數時是 undefined
  • 以物件方法呼叫時則為”基礎物件”

利用建立物件, 函式帶出數值

function User() {
    this.name = 'Bob';
}

function AnotherUser() {
    this.name = 'Hugo';
}

var user1 = new User();
var user2 = new AnotherUser();

console.log(user1.name);
console.log(user2.name);

//顯示結果
Bob
Hugo

This :Arrow Function內 結構功能

//-----一般函式
function User() {

    this.name = "Bob";
    return this;
}

console.log(this.name);

//-----箭頭函式
()=>{
this.name ="It is Arrow Functions";
}

console.log(this.name);
console.log(typeof this.name);

//顯示結果
(空物件)
It is Arrow Functions
string

This 提取Arrow Function內部值

// Arrow function 1
()=>{
     this.name ="It is Arrow Functions";
}

console.log(this.name);
console.log(typeof this.name);


//顯示結果
//It is Arrow Functions
//It is Arrow Functions
//string
  • 箭頭函數(Arrow Functions) — this是定義時的對象, 不是在使用的物件。
  • 傳統Function語法 — this是使用、呼叫(call)時的對象。

用setInterval 將一般函式this 物件p帶出

function Person() {
  // Person() 建構式將 this 定義為它自己的一個實體
  this.agegrowing = 0;

  setInterval(function growingUp() {
    // 在非嚴格模式stric mode下, growUp() 函式把 this 定義為全域物件
    // (因為那是 growingUp()執行的所在),
    // 與 Person() 建構式所定義的 this 有所不同

    this.agegrowing++;
  }, 3000);
}

// 在全域做另一個物件 p
var p = new Person();
console.log(p);

在 ECMAScript 3/5 裡面,this 可透過指派 this 值。

function Person() {
  var me = this;
                 
  me.age = 0;

  setInterval(function growUp() {
    // 這個 callback 參考 `self` 變數,為預期中的物件。
    mee.age++;
  }, 1000);
}

透過 bind 函式來綁定 this 變數到指定函式(上面為例,就是 growingUp() 函式)。

箭頭函式不會擁有自己的 this; 箭頭函式遵循 “常規變量查找規則“。

當前範圍中搜索不到 this 變量時,他們最終會尋找其作用域。


Strict Mode 嚴格模式的關係

參考資料: Arrow function expression

由於 this 變數具有詞彙上綁定意義,故嚴格模式的宣告對 this 的作用將被忽略。

Arrow function 沒有自己的this

// Arrow function 1

()=>{
     
     this.name ="It is Arrow Functions";
     return this;
}

console.log(this.name);


// Arrow function 2
var ArrowObject =()=>{
this.name ="It is ArrowObject Functions";

}

ArrowObject();
console.log(this.name);
console.log(typeof this.name);

This: None Strict Mode


const obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
}

obj.b(); // prints undefined, Window { /* … */ } (or the global object)
obj.c(); // prints 10, Object { /* … */ }

This: Strict Mode

'use strict';

const obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c() {
    console.log(this.i, this);
  },
}

obj.b(); // prints undefined, Window { /* … */ } (or the global object)
obj.c(); // prints 10, Object { /* … */ }

結語

有點想不太出來結語要寫甚麼, 光是要弄懂一般函式 vs 箭頭函式 + 蒐集資料就挺累人的