亲宝软件园·资讯

展开

JS箭头函数

猪痞恶霸 人气:0

前言:

箭头函数是ES6新增的定义函数的方式,我们可以使用()=>{}来顶替以前的函数定义方式,下面从五个使用姿势与三点注意事项来刨析箭头函数。

使用

简略编写

当我们箭头函数函数只有一个参数的时候是可以将()省略,当代码块只有一行的时候可以将{}return省略

const fn = num => num.sort();
console.log(fn([2, 1, 3])); // [1,2,3]

如上代码块只有一个参数num且只有一行代码return num.sort(),所以将(){}return省略

结合解构赋值

为了进一步简化还可以与解构赋值结合使用

let person = {
  name: "猪痞恶霸",
  age: 12,
};
const fn = ({ name, age }) => name + "今年" + age + "岁了";
console.log(fn(person)); // 猪痞恶霸今年12岁了

使用解构赋值直接将nameage解构,替换了person,name的用法,使函数更加简洁。

结合扩展运算符

在函数参数定义中可以结合rest参数搭配使用

const fn = (...arr) => arr.sort();
console.log(fn(2, 1, 4)); // [1,2,4]

使用...arr将所有参数都包裹在内,在函数体内进行一些需要的操作。

this指向的改变

在箭头函数中使用this,它的指向是不变的,因为箭头函数没有拥有属于自己的this,其指向的是函数定义时所在的对象 , 所以箭头函数的出现往往就顶替了我们常用的let _that = this又或者在函数结尾使用绑定this指向的对象来解决在函数体内this的问题

var name = "fzf404";
function set() {
  setTimeout(() => {
    console.log(this.name);
  }, 1000);
}
set(); // fzf404
set.call({ name: "猪痞恶霸" }); // 猪痞恶霸

如上例子,在全局中声明了一个name变量,我们再通过call()绑定新的对象{ name: "猪痞恶霸" },在set函数执行的时候,箭头函数被定义,而被定义的时候其已经通过set.call()更改了指向的对象,所以打印出的是新的对象中的name属性,这就是箭头函数的this指向特点,如果是普通函数,其指向依旧是顶层对象。

绑定this

在之前ES5可以通过bindcallapply来显式绑定this对象,而箭头函数的出现打破了这种局面,同时也配套使用::来作为函数绑定的方式

::的使用方法:将要绑定的对象放在::的左边,函数放在::的右边,执行后,函数内的this就会指向绑定的对象

obj::fn
// 等同于
fn.bind(obj)

如上,原来的显式绑定方式与使用::的绑定方式进行一个比较,看过二者的比较就可以了解::的使用了。

注意细节

关于构造

箭头函数无法作为一个构造函数,所以无法通过new命令来构造

const fn = () => {}
let _fn = new fn() // fn is not a constructor

如上,如果使用new来构造的化就会抛出fn不是一个构造函数

关于参数对象

在箭头函数内是无法使用arguments即参数对象,因为在其函数体内部不存在arguments对象当然我们可以使用扩展运算符来代替其使用,比使用参数对象方便。

const fn = () => {
    console.log(arguments)
}
fn() // arguments is not defined

关于yield命令

箭头函数无法使用yield命令,也就是说无法将箭头函数转变为生成器函数,具体是为什么,我的直观感受就是作为生成器必须是function*,而箭头函数的形式无法作为一个生成器。

了解到这里,下面我们来看一道经典的面试题。

面试题

let name = "猪痞恶霸";
let person = {
    name:"fzf404",
    fn: () => {
        setTimeout(() => {
            console.log(this.name);
        })
    }
}
person.fn();

上面是一道考察箭头函数this指向作用域的面试题,它的打印结果为undefined,我们来一点一点分析

加载全部内容

相关教程
猜你喜欢
用户评论