JavaScript 打造程式基礎

基本運算

算數運算 : 加減乘除及取餘數

console.log(1 + 3)
console.log((1 + 3) * 5)
console.log(10 / 3) // 3.3333333333333335
console.log(10 % 3) // 1

邏輯運算 : and、or 與 not

or
console.log(true || true) // true
console.log(true || false) // true
and
console.log(true && true)  // true
console.log(true && false) // false
not
console.log(!true) // false
console.log(!false) // true

|| 與 && 的短路性質

or
console.log(3 || 10)     // 前面 3 已經是 true 了，因此直接回傳 3
console.log(false || 10) // 前面是 false，回傳後面的 10
console.log(0 || 10)     // 回傳 10，0 會被轉換成 false
and
console.log(3 && 10)       // 回傳 10，如果檢驗前面是 true，檢驗下一個，如果也是 true，則回傳該值
console.log(true && false) // 回傳 false，前面是 true，檢驗下一個，如果是 false 則回傳 false
console.log(false && 3)    // 回傳 false，前面已經是 false 了，則回傳 false

變數

變數宣告與 undefined

= 的意思是賦值
var box = 123
var BOX = 456
var test // 尚未賦值
console.log(box)
console.log(BOX)
console.log(test) // undefined
console.log(boxbox) // is not defined
變數命名習慣
let this_is_a_box = 13
let thisIsABox = 14

++

var a = 0
a = a + 5
a += 5
=> a 的值被賦與 a + 5 的結果
console.log(a) // 10
加減 1 方便的語法
a++
a--
++/-- 放前後的差別
var a = 0
console.log(a++) // 0 : 先跑完整行才會執行 a++
console.log(a) // 1
console.log(++a) // 2 : 會先執行 ++

變數型態

使用 type of 查詢型態
基本型態 Primitive
boolean : true or false
number : 1,2,3,4
string : 'Hello'
其他型態
object : {}、[]
undefined
function
注意 : type of null => 回傳 object

陣列 (Array)

如果變數是箱子的話，陣列則是放入多項同類型的箱子。
var score = []
score[0] = 30
score[1] = 50
console.log(score) // [ 30, 50 ]
console.log(score.length)

物件(Object)

var students = []
students[0] = {
  name: 'Peter',
  score: [100, 70, 80],
  address: 'taipei',
  phone: '01010110',
  father: {
    name: 'Nick',
    phone: '12345'
  },
  sayHi: function () {
    console.log('Say Hi')
  }
}
console.log(students)
console.log(students[0].name) // peter
console.log(students[0]['name']) // peter
console.log(students[0].father.name)// Nick
console.log(students[0]['father']['name']) // Nick

變數的運算

注意型態
let a = 10
let b = '20'
console.log(a + b) // '1020'
注意浮點數誤差
var a = 0.1 + 0.2
console.log(a) // 0.30000000000000004
console.log(a == 0.3) // false

== 與 ===

var a = 10
console.log(a == 10)
console.log(a === 10)
console.log(a = 1)
=> a = 1
=> console.log(a)
var a = 10 == 10
console.log(a) // true
---------------------------------
== 與 === 差別在 型態
console.log(0 == '0') // true
console.log(0 === '0') // false

Object 的等號理解變數

指向的記憶體位置不同
console.log([] === [])   // false
console.log([1] === [1]) // false
console.log({} === {})   // false
console.log({ a: 1 } === { a: 1 }) // false
想像成 obj 裡面的資料是儲存記憶體位置
obj : {  => obj : { => 0x01 
  a : 1     0x01       { a : 1 }  
}          } 
          
obj2 : {  => obj2 : { => 0x05 
  a : 1      0x05       { a : 1 }  
}          }
-----------------------------------------
指向同一個記憶體位置的情況
var obj = {
  a: 1
}
var obj2 = obj
obj2.a = 2
console.log(obj)  // { a: 2 }
console.log(obj2) // { a: 2 }
console.log(obj === obj2) // true
obj : {  => obj : { => 0x01 
  a : 1     0x01       { a : 1 }  
}          }     
      
obj2 : {  => obj2 : { => 0x01 
  a : 1      0x01       { a : 1 }  
}          }
改變記憶體指向的位置
obj2 = {b:1}
console.log(obj === obj2) // false

判斷式

if/else statement

var number = 11
if (number % 5 === 0) {
  console.log('是 5 的倍數')
} else {
  console.log('不是 5 的倍數')
}

if/else if statement

var age = 10
if (age >= 65) {
  console.log('old man')
} else if (age >= 20) {
  console.log('young')
} else {
  console.log('children')
}

switch case

var month = 5
switch (month) {
  case 1:
  case 5:
    console.log('一月')
    break
  case 2:
    console.log('二月')
    break
  case 3:
    console.log('三月')
  break
  default:
    console.log('Hey')
}

三元運算子（Ternary）

var score = 100
var message = score >= 60 ? 'pass' : 'fail'
console.log(message)
// 三元運算子
console.log(10 > 5 ? 'bigger' : 'smaller')

迴圈

while 迴圈

var i = 1
while (i <= 100) {
  console.log(i)
  i++
}
console.log(i) // 101

for loop

for(初始值; 終止條件; 每一圈要做的事情){
  do...
}
for (let i = 0; i <= 5; i++) {
  if (i === 3) {
    break
  }
  console.log(i)
}
for (let i = 0; i <= 10; i++) {
  if (i % 2) {
    continue
  }
  console.log(i)
}
var scores = [1, 2, 3, 4, 5]
var sum = 0
for (let i = 0; i < scores.length; i++) {
  sum+= scores[i]
}

函式

最基本的函式結構

f(x) = 3x
f(1) = 3
f(10) = 30 
f(a, b, c) = a + 2b + 3c
f(1, 2, 3) = 14
f(1, 1, 1) = 6
------------------------------------------
function f(a, b, c) {
  return a + 2 * b + 3 * c
}
console.log(f(1, 2, 3))
------------------------------------------
function generateArray(n) {
  let result = []
  for (let i = 1; i <= n; i++) {
    result.push(i)
  }
  return result
}
console.log(generateArray(10))

宣告函式的不同種方式

function hello() {
  console.log('hello')
}
var hello = function () {
  console.log('hello')
}
-------------------------------------
function print(anything) {
  anything()
}
function hello() {
  console.log('hello')
}
print(hello)
-------------------------------------
function transform(arr, transformFunction) {
  let result = []
  for (let i = 0; i < arr.length; i++) {
    result.push(transformFunction(arr[i]))
  }
  return result
}
function double(n) {
  return n * 2
}
console.log(transform([1, 2, 3], double))
console.log(
  transform([4, 5, 6], function (x) {
    return x * 3
  })
)

引數（Argument）與參數（Parameter）

function add(a, b) { // a, b 為參數
  // arguments 物件 是一個類陣列物件
  console.log(arguments) // { '0': 3, '1': 5 }
  console.log(typeof arguments) // object
  console.log(arguments[0]) // 3
  return a + b
}
console.log(add(3, 5)) // 3, 5 為引數

使用 Function 時的注意事項

Function 傳參數的運作機制
function swap(a, b) {
  /*
    var a = number1
    var b = number2
  */
  性質為複製資料傳進函數，修改過後不會改變原本的值
  var temp = a
  a = b
  b = temp
  console.log(a, b) // 20, 10
}
var number1 = 10
var number2 = 20
console.log(number1, number2) // 10, 20
swap(number1, number2)
console.log(number1, number2) // 10, 20
---------------------------------------------------
function add(obj) {
  obj.number++
  return 1
}
typeof object 會指向同一個記憶體，因此傳進函式進行修改後，會改變原先的值
var a = {
  number: 1,
}
add(a)
console.log(a) // 2
-----------------------------------------
function changeValue(obj) {
  如果重新賦值的話，就會指向不同的記憶體，因此不會改動原本的值
  obj = {
    number: 10
  }
  return 1
}
var a = {
  number: 2,
}
add(a)
console.log(a) // 2

return 不 return 的差別

不需要知道結果
function sayHello(name) {
  console.log('Hello', name)
}
sayHello('Dino')

需要知道結果
function double(x) {
  return x * 2
}
var result = double(3)
console.log(result)
---------------------------------------------
function add(a, b) {
  return a + b
}
function main() {
  var result = add(2, 3)
  console.log(result)
}
main()

內建 Function

Number 相關的內建函式

字串轉數字
var a = 10
var b = '20.353535'
console.log(a + Number(b))     // 30.353535
console.log(a + parseInt(b))   // 30
console.log(a + parseFloat(b)) // 30.353535
console.log(parseFloat(b).toFixed(2)) // 20.35
console.log(a.toString()) // 數字轉字串
console.log(a + '')       // 數字轉字串
Math 相關
console.log(Math.PI)          // 3.141592653589793
console.log(Math.ceil(10.5))  // 11 無條件進位
console.log(Math.floor(10.5)) // 10 無條件捨去console.log(Math.round(10.5)) // 四捨五入
console.log(Math.pow(2, 10))  // 1024 2^10
console.log(Math.random())    // 產生 0 ~ 0.9999... 的隨機數字

String 相關的內建函式

var a = 'abc'.toUpperCase()
console.log(a) // ABC
var b = 'ABC'.toLowerCase()
console.log(b) // abc
var char = 'g'
console.log(char >= 'a' && char <= 'z') // true
var str = 'Hello'
var index = str.indexOf('Hello')
console.log(index) // 0
var str2 = 'Hello'.replace('H', '!!!')
console.log(str2) // !!!ello
var str3 = 'data1,data2,data2'.split(',')
console.log(str3) // [ 'data1', 'data2', 'data2' ]

Array 相關的內建函式

var arr = [1, 3, 4]
console.log(arr.join('')) // 將 array 轉換成字串
var arr_2 = [1, 3, 4]
function double(n) {
  return n * 2
}
console.log(arr_2.map(double))        // 傳入函式，改變陣列中每個元素的值
console.log(arr_2.filter(x => x > 2)) // 設定條件，回傳通過條件的元素
slice 會回傳一個新的陣列，不會改變原本的陣列
var arr_2 = [0, 1, 2, 3, 4, 5, 6]
console.log(arr_2.slice(3))
console.log(arr_2.slice(3, 4)) // [ 3 ] 從 3 切到 4 但 4 不要
splice 會改變原本的陣列
var months = ['Jan', 'March', 'April', 'May']
months.splice(2, 0, 'test') // 插入新的內容
console.log(months)
months.splice(2, 1)         // 刪除內容
console.log(months)
months.splice(2, 1, 'TEST') // 取代內容
console.log(months)
sort
var numbers = [2, 4, 5, 1, 7, 34, 9, 16]
numbers.sort(function (a, b) {
  if (a === b) return 0 // 0  代表位置不變
  if (b > a) return -1  // -1 代表不換位置
  return 1              // 1  代表換位置
})
console.log(numbers)

容易犯錯的地方

「回傳」與「印出」的差異

function add(a, b) {
  console.log(a, b)
  return undefined
}
console.log(add(1, 2)) // function 預設回傳 undefined

Immutable 觀念

Immutable 不可變
Primitive Values : 除了 object 型態以外都是 Immutable Values
var a = 'hello' // 原本的值不會被改變
a = 'yo'        // 存放到不同的記憶體
// a : 'hello' 0x01
// a : 'yo' 0x02
var a = 'hello' // 'hello' 是不可變的
a.toUpperCase() // 呼叫函式的時候不可能改變 a 的值
console.log(a)  // hello
----------------------------------------------
Object 型態可以改變 Mutator medthods
var arr = [1, 2, 3]
arr.push(4)
console.log(arr)
// arr: [1, 2, 3, 4] 0x01
// 直接進到記憶體位置修改內容
var arr2 = [4, 5, 6]
arr2.reverse()
console.log(arr2) // [ 6, 5, 4 ]
arr3 = arr2.reverse()
console.log(arr3) // [4, 5, 6]
// reverse 會改變原本的陣列 也會回傳新的陣列

JavaScript 與瀏覽器的溝通

DOM 是什麼？

文件物件模型 (Document Object Model, DOM) : 將 Document 轉換成 Object，藉由瀏覽器提供的橋樑，使用 JS 透過 DOM 拿到 Object 的節點，改變畫面上的內容。

DOM

選到想要的元素：getElement

const elements = document.getElementsByTagName('div')
console.log(elements) // HTMLCollection [div]
const elements = document.getElementsByClassName('block')
console.log(elements) // HTMLCollection [div.block]
const elements = document.getElementById('block')
console.log(elements) // <div class="block" id="block">HELLO</div >
---------------------------------------------------
目前常用方式 : guerySelector
接的是 CSS 選擇器
const elements = document.querySelector('.block')
console.log(elements) // <div class="block" id="block">HELLO</div >
const elements2 = document.querySelector('#block2')
console.log(elements2) // <div id="block2"> HELLO </div >
const elements3 = document.querySelector('#block2 a')
console.log(elements3) //<a href = "#"> AAA</a>
選擇到多個元素 : 類似陣列但不是陣列
const elements4 = document.querySelectorAll('div')
console.log(elements4) // NodeList(2) [div.block, div#block2]

改變 CSS

const elements = document.querySelector('.block')
elements.style.background = 'red'
elements.style['padding-top'] = '10px'

改變元素的 Class

const elements = document.querySelector('.block')
elements.classList.add('active')
console.log(elements) // <div class="block active">HELLO</div >
elements.classList.remove('active')
console.log(elements) // <div class="block">HELLO</div >
Toggle : 開關 本來有就會移除 本來沒有就會新增
elements.classList.toggle('main')

改變內容：inner、outer 的 HTML 與 text

innerText : 只會顯示文字
const elements = document.querySelector('.block > a')
console.log(elements.innerText) // 印出文字 : AAA
elements.innerText = "I am a link"
console.log(elements.innerText) // 印出文字 : I am a link
innerHTML : 拿到標籤中的所有東西
const elements = document.querySelector('.block')
console.log(elements.innerHTML) //  HELLO <a href = "#">AAA</a>
console.log(elements.outerHTML) // <div class="block">HELLO<a href = "#">AAA</a ></div>

插入與刪除元素：appendChild 與 removeChild

刪除元素 : 要先知道其 parent 是誰
const element = document.querySelector('.block')
element.removeChild(document.querySelector('a'))
新增元素
const item = document.createElement('div')
item.innerText = '123'
element.appendChild(item)

JavaScript 網頁事件處理

eventListener 與 callback function

addEventListener : 新增監聽事件
利用 callback function 建立監聽事件啟動時要做的事情
const element = document.querySelector('.block')
element.addEventListener('click', function () {
  alert('click')
})

event(e)

const element = document.querySelector('.block')
element.addEventListener('click', function (event) {
  event.target : 選取點擊的元素
  event 是瀏覽器帶出來的資訊
  console.log(event.target) // <div class="block">...</div>
})

應用範例

表單事件處理 onSubmit

事件傳遞機制

先捕獲 在冒泡

stopPropagation

document.querySelector('.btn').addEventListener('click', function (e) {
  e.stopPropagation()
  console.log('.btn 冒泡')
})

事件機制問題

事件機制問題範例

event delegation

透過綁定母元素 處理動態新增的子元素

應用範例 - 隨機密碼產生器

應用範例-動態表單通訊錄

如何在瀏覽器上儲存資料？

Cookie

Cookie 是小型文字檔，會自動帶到 server
Cookie 也會被用在身分驗證上。
A -> 登入 -> server
A with 通行證(放在 cookie 中) -> server

local storage

瀏覽器需要儲存資料，且跟 server 無關時，就會放在 local storage
local storage 的格式只能存字串。

session storage

與 local storage 不同分頁無法共用，多數用來儲存短期的資料。

網頁與伺服器的溝通

node.js 呼叫 API 與在網頁上呼叫的差異

node.js 呼叫 API

瀏覽器呼叫 API

表單 form

透過 JS 交換資料 : AJAX

模組化與 Library

require

Module
將程式各個功能切分開來，設計成模組的形式。
var os = require('os')
console.log(os.platform()) // win32

export

export
function double(n) {
  return n * 2
}
var obj = {
  double: double,
  triple: function (n) {
    return n * 3
  }
}
module.exports = double
import
var myModule = require('./app')
console.log(myModule)           // [Function: double]
console.log(myModule.double(3)) // 6
console.log(myModule.triple(3)) // 9
-----------------------------------------------
export
function double(n) {
  return n * 2
}
exports.double = double
exports.triple = function (n) {
  return n * 3
}
import
var myModule = require('./app')
console.log(myModule)           // [Function: double]
console.log(myModule.double(3)) // 6
console.log(myModule.triple(3)) // 9

NPM (Node Package Manager)

NPM是甚麼 ?

JavaScript 管理套件的管理中心，

npm scripts : 進行指令上的設定

"scripts": {
  "start": "node index.js",
},

程式測試

為什麼要寫測試？

如何測試程式 ? 
function repeat(str, times) {
  var result = ""
  for (let i = 0; i < times; i++) {
    result += str
  }
  return result
}
1. 透過 console.log 以及設定邊界條件來測試程式
console.log(repeat('a', 5))
console.log(repeat('abc', 8))
console.log(repeat(' ',5))
2. 利用 Jest 進行測試 : unit test 單元測試
   利用模組進行劃分
Step 1 : 撰寫要測試的功能
function repeat(str, times) {
  var result = ""
  for (let i = 0; i < times; i++) {
    result += str
  }
  return result
}
module.exports = repeat
Step 2 : 建立 index.test.js 檔案
Step 3 : 引入函式及利用 jest 格式設定測試檔案
var repeat = require('./index')
test('a repeat 5 times = aaaaa', () => {
  expect(repeat('a', 5)).toBe('aaaaa');
});
test('a repeat 1 times = a', () => {
  expect(repeat('a', 1)).toBe('a');
});
test('"" repeat 10 times = ""', () => {
  expect(repeat('', 10)).toBe('');
});
Step 4: 修改 package.json => test: 'jest'
Strp 5: 終端機輸入 npm run jest 進行測試

ES6

ES5？ES6？

ECMAScript : 標準、規範
JavaScript 根據這個標準來實作，ECMAScript 6 在 2015 年發布，因次 ES6 = ES2015，因此 ES6 的意思就是在此階段所推出的新功能。

let 與 const

1. constant 常數
   value 無法改變
   typeof object 可以修改 value ，因為實際指向的是記憶體位置，改變 value 時
   記憶體位置不變
const obj = {
  number: 10
}
obj.number = 20
console.log(obj) // { number: 20 }
2. let
function test() {
  if (10 > 5) {
    超出變數生存的範圍
    是以 block 為界線，而非 var 的 function 生存範圍
    let a = 10
  }
  console.log(a) // a is not defined
}
test()

Destructuring：解構

const arr = [1, 2, 3, 4]
ES6 之前
let first = arr[0]
let second = arr[1]
let third = arr[2]
let fourth = arr[3]
console.log(first, second, third, fourth) // 1234
ES6 之後
解構後分別對應上 arr 的位置
let [one, two, three, four] = arr
console.log(one, two, three, four) // 1234
-----------------------------------------------------
const obj = {
  name: 'nick',
  age: 30,
  address: 'taiwan'
}
ES6以前
let name = obj.name
let age = obj.name
let address = obj.address
ES6以後
變數名稱要對應到 object 中的 key 名稱
let { name, age, address } = obj

Spread Operator 展開運算子

var arr = [1, 2, 3]
var arr2 = [...arr, 4, 5, 6]
複製 array
var arr3 = [...arr]
console.log(arr2)  // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr === arr3) // false 會變成一個新的 array 但裡面的值是一樣的
------------------------------------
function add(a, b, c) {
  return a + b + c
}
var arr = [1, 2, 3]
console.log(add(...arr))
------------------------------------
var obj = {
  a: 1,
  b: 2
}
var obj2 = {
  z: 1
}
var obj3 = {
  ...obj,
  b: 3, // 同一個 key 後方的會優先
  c: 3
}
console.log(obj3) // { a: 1, b: 3, c: 3 }
------------------------------------
var nestedArray = [4]
var arr = [1, 2, 3, nestedArray]
console.log('arr', arr) // arr [ 1, 2, 3, [ 4 ] ]
var arr2 = [...arr]
console.log('arr2', arr2) // arr [ 1, 2, 3, [ 4 ] ]
console.log(arr === arr2) // false : 複製形成新的 array 指向不同的記憶體
console.log(arr[4] === arr2[4]) // true : 雙方指向同一個記憶體
------------------------------------
var obj = {
  a: 1,
  b: 2
}
var obj2 = obj
console.log(obj === obj2) // true 指向同一個記憶體，會聯動彼此的 value
------------------------------------
var obj2 = {
  a: 1,
  b: 2
}
var obj3 = {
  ...obj2
}
console.log(obj2 === obj3) // false 指向不同一個記憶體，彼此的 value 不會聯動，只是複製 value 的關係

Rest Parameters 反向的展開

var arr = [1, 2, 3, 4]
var [first, ...rest] = arr 
console.log(rest) // [ 2, 3, 4 ]
NOTE : rest element 必須是最後一個元素
------------------------------------
var obj = {
  a: 1,
  b: 2,
  c: 3
}
var { a, ...rest } = obj
console.log(a, rest) // 1 { b: 2, c: 3 }
------------------------------------
function add(...args) {
  console.log(args) // [ 1, 2 ] 類似 array
  return args[0] + args[1]
}
console.log(add(1, 2))

Default Parameters 預設值

在 function 中使用，為參數提供預設值
function repeat(str, times = 5) {
  return str.repeat(times)
}
console.log(repeat('abc'))

在物件、陣列中也能使用
const obj = {
  b: 2
}
const { a = 1, b } = obj
console.log(a, b)

箭頭函式 Arrow Function

省略 function 用 => 代替
function test(n) {
  return n
}
const test = (n) => {
  return n
}
----------------------------------
var arr = [1, 2, 3, 4, 5]
console.log(arr
    .filter(function (value) {
       return value > 1
    })
    .map(function (value) {
       return value * 2
    }))
console.log(
  arr
    .filter(value => value > 1)
    .map(value => value * 2)
)

Import 與 Export

Export
export function add(a, b) {
  return a + b
}
Import
import {add} from './index'
import * as utils from from './index'

Babel

Babel 是 JavaScript 的 編譯器，如果新的語法支援度不高，可以將其轉換成舊的語法。
ES6/7/8 => Babel => ES6 or 以前

this

1. 瀏覽器在調用函式的時候都會向函式內部傳遞一個隱含的參數。
2. 這個隱含的參數就是 this，this指向的是一個物件。
3. 這個物件稱為函式執行的上下文物件。
4. 根據函式調用的方式不同，this 會指向不同的對象
   (1) 以函式的形式調用時，this 永遠都是 window
   (2) 以方法的形式調用時，this 就是調用方法的那個物件
function fun(){
  console.log(this)
}
fun() // [object window]
var obj = {
  name: 'Dino',
  sayName: fun
}
console.log(obj.sayname == fun) // true
obj.sayname() // {name: 'Dino', sayName: ƒ}

使用工廠方法創建物件

通過該方法可以大批量的創建物件。
使用工廠方法創建的物件，使用的構造函式都是 Object。
所以創建的物件都式 Object 類型。
導致無法區分多種不同類型的物件。
--------------------------------------------
function createPerson(name, age, gender) {
  // 創建一個新的物件
  const obj = new Object()
  // 向物件加入屬性
  obj.name = name
  obj.age = age
  obj.gender = gender
  obj.sayName = function () {
    alert(this.name)
  }
  // 輸出物件
  return obj
}
const obj_1 = createPerson('Dino', 28, 'male')
console.log(obj_1) // { name: 'Dino', age: 28, gender: 'male', sayName: ƒ }

構造函式

創建一個構造函式，專門用來創建 Person 物件的。
構造函式就是一個普通的函式，創建方式和普通函式沒有區別。
不同的式構造函式習慣上首字母大寫。
--------------------------------------------
構造函式和普通函式的區別就是調用方式的不同。
普通函式是直接調用，而構造函式需要使用 new 關鍵是來調用。
--------------------------------------------
構造函式的執行流程 :
1. 立刻創建一個新的物件
2. 將新建的物件設置為函式中的 this，在構造函式中可以使用 this 來引用新建的物件。
3. 逐行執行函式中的代碼。
4. 將新建的物件做完返回值返回
--------------------------------------------
使用同一個構造函式創建的物件，稱為同一類物件，也將一個構造函式稱為一個類，
將通過一個構造函式創建的物件，稱為是該類的實例。
--------------------------------------------
this的情況 :
  1. 當以函式的形式調用時，this 是 window
  2. 當以方法的形式調用時，誰調用方法 this 就是誰
  3. 當以構造函式的形式調用時，this 就是新創建的那個物件

構造函式修改

創建一個 Person 構造函式
 - 在 Person 構造函式中，為每一個物件都加入 sayName 方法
   目前的方法都是在構造函式中創建的。
   也就是構造函式執行一次就會創建一個新的 sayName 方法
   所有實例的 sayName 都是唯一的。
   這樣也導致了構造函式執行一次就會創建一個新法方法。
   執行 10000 次就會創建 10000 個新的方法，而 10000 個方法都是一模一樣的
   這是完全沒有必要，完全可以使所有的物件共享一個方法

原型物件_1

原型 prototype
所創建的每一個函式，瀏覽器都會向函式中加入一個屬性 prototype
這個屬性對應著一個物件，這個物件就是我們所謂的原型物件
如果函式做為普通函式調用 prototype 沒有任何作用
當函式以構造函式的形式調用時，所創建的物件中都會有一個隱含的屬性。
--------------------------------------------
指向該構造函式的原型物件，可以通過 __proto__來訪問屬性
--------------------------------------------
原型物件就相當於一個公共的區域，所有同一個類的實例都可以訪問到這個原型物件，
可以將物件中共有的內容，統一設置到原型物件中。
--------------------------------------------
當訪問物件的一個屬性或方法時，它會先在物件自身中尋找，如果有則直接使用。
如果沒有則會去原型物件中尋找，如果找到直接使用。
--------------------------------------------
創建構造函式時，可以將這些物件共有的屬性和方法，統一添加到構造函式的原型物件中，
這樣不用分別為一個物件添加，也不會影響到全局作用域，就可以使每個物件都具有這些屬性和方法。

原型物件_2

原型物件也是物件，所以它也有原型。
當使用一個物件的屬性或方法時，會先在自身中尋找。
  自身中如果有，則直接使用
  如果沒有則去原型物件中尋找，如果原型物件中有，則使用
  如果沒有則去原型的原型中尋找，直到找到 Object 物件的原型
  Object 物件的原型沒有原型，如果 Object 中仍然沒有找到，則返回 undefined

陣列介紹(Array)

- Array 也是一個物件。
- 用來儲存一些值。
- 不同的是普通物件是用字串作為屬性名，而陣列使用數字來做為索引操作元素。
- 索引 : 從 0 開始的整數就是索引。
- 陣列的儲存性能比普通物件好，在開發中經常使用陣列才儲存一些數據。
- 陣列中的元素可以是任意的數據類型。
--------------------------------------------
const arr = new Array()
// 使用 typeof 檢查一個陣列時，會返回 object
console.log(typeof arr)
// 向陣列中加入元素
   語法: 陣列[索引] = 值
arr[0] = 10
arr[1] = 20
arr[10] = 100
// 讀取陣列中的元素
   語法: 陣列[索引]
   如果讀取不存在的索引，不會報錯而是回傳 undefined
console.log(arr[2])
// 獲取陣列的長度
   使用 length 屬性來獲取陣列的長度(元素的個數)
   語法 : 陣列.length
   對於連續的陣列，使用 length 可以獲取到陣列的長度(元素的個數)
   對於非連續的陣列，使用 length 會獲取到陣列最大的索引 + 1
console.log(arr.length)
// 修改 length
   如果修改的 length 大於原長度，則多出部分會空出來
   如果修改的 length 小於原長度，則多出的元素會被刪除
arr.length = 10
console.log(arr.length)

陣列的方法

push()
 - 該方法可以向陣列的末尾加入一個或多個元素，並返回陣列的新的長度
 - 可以將要加入的元素作為方法的參數傳遞，這些元素將會自動加入到陣列的末尾
 - 該方法將陣列新的長度作為返回值
pop()
 - 該方法可以刪除陣列最後一個元素，並將被刪除的元素作為返回來返回
unshift()
 - 該方法可以向陣列的開頭加入一個或多個元素，並返回陣列的新的長度
 - 向開頭插入元素後，其他元素索引會依次調整
shift()
 - 該方法可以刪除陣列第一個元素，並將被刪除的元素作為返回來返回