记录下对箭头函数的理解
箭头函数是在 ES6 中添加的,它的存在是为了解决普通函数遗留下来的一些问题(函数的二义性
)
与普通函数相比,箭头函数主要解决(丰富)了以下内容: this
指向function fn ( ) { console .log (this .name ); } const obj = { name : "xiaoming" };obj.fn = fn; obj.fn (); const obj1 = { name : "obj1" , getThis ( ) { return this ; }, }; const obj2 = { name : "obj2" };obj2.getThis = obj1.getThis ; console .log (obj2.getThis ()); const fn = ( ) => console .log (this .name );window .name = "global" ;const obj = { name : "xiaohong" };obj.fn = fn; obj.fn ();
args
剩余参数
在箭头函数中,普通函数结构中的{arguments}
将被替换为函数参数的(...args)
无prototype
箭头函数中没有prototype
属性,意味着不能将箭头函数用于原型链的创建,这进一步明确了箭头函数的用途,即不用于构造类或对象。
const arrFn = ( ) => {};console .log (arrFn.prototype );
无效new
箭头函数无法像普通函数那样通过关键字new
来实例化方法,因为它不再作为构造函数所使用,本质上设计为轻量级的函数表达式,适合用作小型函数和回调,不用于创建复杂对象
构造函数在ES6
中被替换成了class
关键字
function a ( ) {}a (); new a (); const b = ( ) => {};b (); new b (); class A {}A (); new A ();
代码的简洁性,更加简洁易读的函数定义,减少冗余代码
更为精妙的处理函数可以通过简写箭头函数的方式来让你的代码更加的美观
function computed (x, y, z ) { return x > y ? x - z : y + z; } const computed = (x, y, z ) => (x > y ? x - z : y + z);
更好的编写体验
某种情况下特别适用于编写短小、内联的函数,如数组的map
、filter
、reduce
等
const arr = [1 , 2 , 3 , 4 , 5 ].map ((n ) => n * 10 ); const arr2 = [1 , 2 , 3 , 4 , 5 ].reduce ((pre, next ) => pre + next);
Copyright Notice: 此文章版权归作者所有,商业转载请联系作者获取授权,非商业转载请标明出处,感谢!