VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 箭头函数的副作用

一、前言

项目中,我习惯上能用箭头函数的地方都用箭头函数,这样我就不用随时操心this作用于的问题,而且对于书写上也很方便。也搜索过相关文章,里面也建议尽量使用箭头函数。当然,箭头函数也不是万能,肯定无法取代普通函数。
那么,究竟箭头函数需要注意哪些呢?

二、一些常见的问题

(代码在控制台测试)

1.作用域this的指向问题

this指向被创建的地方,或者是被实例化的地方;

  • 对象方法,
let A = {
    a:'a',name:()=>console.log(this,this.a)
}
console.log(A);// S {a: "a", name: ƒ}
console.log(A.name());// 
  • prototype的方法
function A(){
    this.a = "a";
}
A.prototype.name = ()=>console.log(this,this.a);
(new A).name();//Window,undefined,this.a 的this指向了window
  • 动态上下文中的回调函数 click的回调

2. 无法被new,不能做构造函数

3. 需要获取arguments参数

三、性能问题

class F{
    f = ()=>{
        console.log('f');
    }
    fp(){
        console.log('fp');
    }
}

class B extends F{
    b = ()=>{
        console.log('f');
    }
        bp(){
        console.log('bp');
    }
}
let fc = new F();
let fc2 = new F();
let bc = new B();
console.log(fc,fc2,bc);
console.log(fc2.f == fc.f);//false
console.log(fc.f == bc.f);//false
console.log(fc.fp == bc.fp);//true

我们发现,f (箭头函数)并没有被继承下来,每次新建的时候都是一份copy。

四、总结
上文的第二部分《一些常见的问题》中的问题,并不能抵消箭头函数带来的便利性。相反,普通函数也有各种各样的问题。
虽然对于性能要求不是很高的场景,箭头函数的确提高了生产力,解放了我们思考 this 的时间,但对于性能要求比较高的场景,还是需要评估。

参考:
https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6#:~:text= Arrow functions should not be used%3A ,want to use named function as arrow... More

https://wesbos.com/arrow-function-no-no

本文链接:https://www.cnblogs.com/wyy5552/p/14604515.html

 


相关教程