一 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

默認綁定規則：指向window（嚴格模式指向undefined）

隱式綁定：誰調用指向誰

顯示綁定：call、apply、bind

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

總結

以上是生活随笔為你收集整理的ES6-6 - this指向、箭头函数基本形式、rest运算符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。