箭头函数小 tips
- 若形参只有一个变量,可以省去()
- 若函数体内有且只有一条语句,则可以省去 { },但前提是,这条语句必须是 return 语句。
上面两条的案例:
const fn1 = a => a + 1;
console.log(fn1(2)); //输出3
- 箭头函数是没有函数名的,要调用就为其赋值一个变量,通过变量名调用函数(如上)。
正题:箭头函数的 this 指向
this 指向是面试中考察的重点。
- 在 普通函数中,this 指向的是函数被调用的对象(也就是说,谁调用了函数,this就指向谁(具体))
- 在 ES6 的箭头函数中,箭头函数本身不绑定 this,this 指向的是箭头函数定义位置的 this(也就是说,箭头函数在哪里定义的,this 就跟函数定义所在位置的 this 指向相同,哪里定义了函数,this 就指向哪里(位置))
const obj = {
name:'qiangu'}
function fn1(){
console.log(this);
return () => {
console.log(this);}
}
const fn2 = fn1.call(obj)
fn2()
//输出1 { name: 'qiangu' }
//输出2 { name: 'qiangu' }
fn1 是普通函数,他的 this 指向了调用他的变量 obj ,即为第一个 this 的打印结果。
第二个 this 是在 fn1 中定义的箭头函数,他的 this 指向了定义他的位置(与这个位置的 this 指向相同),即 fn1,然而 fn1 又是指向调用他的变量 obj,也就造成了第二个 this 也指向了obj。
面试题:箭头函数的 this 指向
代码举例:
const name = '许嵩';
const obj = {
name: '千古壹号',
sayHello: () => {
console.log(this.name);
},
};
obj.sayHello();//许嵩
注意:因为 obj 这个对象并不产生作用域, sayHello()
这个箭头函数实际仍然是定义在 window 当中的,所以 这里的 this 指向是 window。
参数默认值的一些注意点
function fn(param = 'hello') {
console.log(param);
}
提醒 1:默认值的后面,不能再有没有默认值的变量。比如(a,b,c)
这三个参数,如果我给 b 设置了默认值,那么就一定要给 c 设置默认值。
提醒 2:
请看下面的代码
let x = 'smyh';
function fn(x, y = x) {
console.log(x, y);
}
fn('vae');
注意第二行代码,我们给 y 赋值为x
,这里的x
是括号里的第一个参数,并不是第一行代码里定义的x
。打印结果:vae vae
。
如果我把第一个参数改一下,改成:
let x = 'smyh';
function fn(z, y = x) {
console.log(z, y);
}
fn('vae');
此时打印结果是:vae smyh
。