箭头函数[ArrowFunction]和普通函数的区别

104 阅读2分钟

微信图片_20221119104548.jpg

箭头函数[ArrowFunction]和普通函数的区别

语法不同

正常语法

const sum = (x, y) => {
    return x + y;
};

1.如果函数体中只有一句话,而是return是啥,则可以省略大括号和return

const sum = (x, y) => x + y;

2.如果只有一个形参,可以省略小括号

const sum = x => x + 10

浅浅的来个小练习

function fn(x) {
    return function (y) {
        return x + y;
    }
}
//更改为箭头函数
const fn = x => y => x + y;

箭头函数没有arguments

箭头函数中没有arguments,但是可以使用ES6中的剩余运算符[...]来获取实参集合

const fn = (...params) => {
    // console.log(arguments); //Uncaught ReferenceError: arguments is not defined
    // console.log(params); //[10,20,30]
    // @1 arguments如果存在,获取的集合也是类数组集合,不能直接使用数组的方法
    // @2 params获取的是数组集合,可以直接使用数组的方法的
};
fn(10, 20, 30);

箭头函数中没有自己的THIS,函数中出现的THIS是其上级上下文中的THIS

普通函数

let obj = {
    name: 'zhufeng',
    // 等价于“fn: function () {}”,ES6的新语法规范
    fn() {
        // this->obj
        let self = this;//然后存起来
        setTimeout(function () {
            // this->window  对于普通回调函数“匿名函数”来说,一般方法中的this都是window,除非在触发回调函数执行的时候,我们自己(或者浏览器)做过一些特殊的处理,更改过其this...
            //console.log(this.name);//this=>window
            //想要obj的那么
            console.log(self.name);//'zhufeng'
           
        }, 1000);
    }
};
obj.fn();

箭头函数

let obj = {
    name: '东方淼淼',
    fn() {
        // this->obj
        setTimeout(() => {
            // this->没有,用的是上级上下文中的
            console.log(this.name);//obj.name
        }, 1000);
    }
};
obj.fn(); 

好用但是不要乱用

let obj = {
    name: '东方淼淼',
    fn: () => {
        // this->没有,用的是全局上下文中的this:“window”
        console.log(this);
    }
};
obj.fn();//此时this就不是Obj 因为用了箭头函数

箭头函数没有prototype属性,所以不能被new执行