ES6温习 - 函数
1、函数中的参数可以赋默认值
ES6 中可以为函数设置默认值。有几点需要:
- 在函数默认声明的形参,在函数里面不可以再用let、const进行重新声明。
- 参数中形参不能重名
- 函数每次被调用,函数的默认值都会重新计算。
function hunterTest(x = 1, y = 2) { return x+y; } // 正常默认值 hunterTest(); // 3 // 传入参数 hunterTest(4, 6); // 10 // 形式参数不允许重名 function hunterTest(x, x = 1, y = 2) { // SyntaxError: Duplicate parameter name not allowed in this context return x+y; } // 函数中不允许使用 let、const 定义和形参同名的变量 function hunterTest(x = 1, y = 2) { SyntaxError: Identifier 'y' has already been declared let x = 12; const y = 34; return x+y; } // 形参 惰性计算 let x = 1; function hunterTest(z = x + 10) { return x+z; } hunterTest(); // 12 let x = 5; hunterTest(); // 20
2、结构赋值
函数的参数可以使用对象的解构赋值来对形参赋值
function test({x = 1, y}) { console.log(x+" "+y); } test({x:4, y:5}); // 4 5
形参的类型是一个对象类型,所以当我们调用函数的时候不传入参数,则会报错。
因此需要为函数的参数设置默认值。
function hunterTest({x = 1, y}) { console.log(x+" "+y); } hunterTest(); // TypeError: Cannot read property 'x' of undefined function hunterTest({x = 1, y} = {}) { console.log(x+" "+y); } hunterTest(); // 1 undefined
3、作用域
形参在被定义默认值之后,参数将会形成独立的作用域。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
x = 123 function hunterTest(x = 1, y) { console.log(x+" "+y); } hunterTest(); // 1 undefined
4、Rest 参数
用(...变量名
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function test(... args) { for (let val of args) { console.log(val); } } test(1,3,5,7,8) 1 3 5 7 8
function test(a, ... args) { console.log("First parameter: "+a); for (let val of args) { console.log(val); } } test(1,3,5,7,8); First parameter: 1 3 5 7 8
4、箭头函数
使用 "=>" 来定义函数。
var a = (x, y) => { return x + y; } a(3,5); // 3 5
若箭头函数 不需要参数 或者 需要多个参数,则使用圆括号"()"来代表参数部分。
箭头函数的代码块部分只有一句的话,可以不用 "{}" 包裹。不需要 return。
var a = x => x; a(3); // 3
箭头函数通过 "=>" 后面的 "{}"来分辨代码块的。
正常函数 转换成 箭头函数
// 正常函数 function test(a, ... args) { console.log(a); for (let val of args) { console.log(val); } } // 箭头函数 var test = (a, ...args) => { console.log(a); for (let val of args) { console.log(val); } }
箭头函数与正常函数的区别
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象。 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
箭头函数没有自己的this,无法实例,因此它不能做为构造函数。
他的this指向的是它的上一层对象的this,如果上一层也没有的话就再往上指,直到指向到有自己this的函数为止,并作为自己的this。这样就可以不使用 var that = this 了
箭头函数没有自己的 bind()、call()、 apply()。
apply、call、bind 函数也是可以改变 this 的指向的
apply :
fun.apply(thisArg, [argsArray]),apply() 方法调用一个函数, 其具有一个指定的this值,以及作为一个数组(或类似数组的对象)提供的参数
call :
fun.call(thisArg[, arg1[, arg2[, ...]]]) , apply 和 call 基本类似,他们的区别只是传入的参数不同。call 方法接受的是若干个参数列表。
bind :
fun.call(thisArg[, arg1[, arg2[, ...]]])() 是创建一个新的函数,我们必须要手动去调用。
var a = { name: "QQQ", fn: function(a, b) { console.log(a+b); } } // apply var b = a.fn; b.apply(a, [5,7]) // 12 // call b.call(a, 5, 7) // 12 // bind b.bind(a,5,7)() // 12