ES6函数扩展
1、函数的 length 属性
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
function test(x, y = 'World') { console.log(x, y); }
注意:函数的length属性,将返回没有指定默认值的参数个数。如果遇到有默认值的参数 就停止。
function test(x, m,y = 'World',z,f) { ... } console.log(test.length) // 2 遇到默认参数则停止 所以为2
2、rest参数
ES6引入rest参数,用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中;
...values 就是 rest 参数的表现形式
function add(...values) { console.log(values); } add(2, 5, 3)
3、箭头函数
ES6 中允许使用“箭头”(=>)声明函数
基本用法:
let fun = val=>val; //一个参数val并返回一个val // 等价于 function fun(val){ return val; }
注意:
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分;
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且 使用return语句返回。
let fun = (name,age)=>{ console.log('姓名'+name); console.log('年龄'+age); }
箭头函数有内部属性arguments,但不保存实参
4、箭头函数的 this 指向
箭头函数里面没有自己的this,自然而然也就不能作为构造函数,箭头函数是引用外层的this。在箭头函数中 this 指向是固定的。
箭头函数导致this
总是指向函数定义生效时所在的对象中的this;
function foo() { setTimeout(() => { console.log(this); }, 100); } foo() // global 对象 ,因为箭头函数没有自己的this,foo函数的this就是箭头函数this的指向。foo中this指向是global 所以 箭头函数中的this也是指向global(即外层this)
eg:
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // 更改foo中this指向对象{id:42} 所以打印结果为42;
路很远,但从未止步