ES6-6 - this指向、箭头函数基本形式、rest运算符

一 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