一 chrome斷點調試

• 觀察函數調用棧

// 25min
var x = 1;
function foo(x, y = function () { x = 2; console.log(2) }) {var x = 3;y();console.log(x)
}
foo()
console.log(x)
// 2 3 1

var x = 1;
function foo(x, y = function () { x = 2; console.log(x) }) {x = 3;y();console.log(x)
}
foo()
console.log(x)
// 2 2 1

二 this指向

this指向總結
箭頭函數的this

1. 默認綁定規則：指向window（嚴格模式指向undefined）
2. 隱式綁定：誰調用指向誰
3. 顯示綁定：call、apply、bind
4. new

三 箭頭函數

=> 胖箭頭

const f = a => a
// 當參數只有一個時可省略括號()
// 當函數體只有一句return時 可省略括號{}和return

const f = () => 5

• 箭頭函數中不存在arguments，可以用rest運算符…args（數組）

四 rest/spread運算符…/不定參數

• 展開或收集
• 可以將數組展開

function foo(x, y, z){console.log(x, y, z) 
}
foo(...[1, 2, 3]) // 1 2 3
foo.apply(null, [1, 2, 3]) // 1 2 3
foo.apply(undefined, [1, 2, 3]) // 1 2 3

• 收集的功能

const sum = (...args) => args
// 返回的args是數組而不是類數組

const a = [2, 3, 4]
const b = [1, ...a, 5]
console.log(b) // 1 2 3 4 5
[1].concat(a, [5]) // 1 2 3 4 5

concat參數

• rest收集必須是最后一個參數，否則報錯

const fn = (a, ...b) => console.log(b)
fn(1, 2, 3, 4, 5) // [2,3,4,5]真正的數組

==argument數組排序 ==

• 對函數形參的影響，…不計入length（默認值也會）

const fn = (a, ...b) => a
console.log(fn.length) // 1