ES6之箭头函数:this 指向、参数默认值

箭头函数小 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

猜你喜欢

转载自blog.csdn.net/weixin_46235143/article/details/121425253