扫码关注公众号

js语言和框架之箭头函数和this
08-13
99观看
01

说一说es6中箭头函数?

【得分点】没有this、this是从外部获取、不能使用new、没有arguments、没有原型和super【参考答案】标准回答箭头函数相当于匿名函数,简化了函数定义。箭头函数有两种写法,当函数体是单条语句的时候可以省略{}和return。另一种是包含多条语句,不可以省略{}和return。箭头函数最大的特点就是没有this,所以this是从外部获取,就是继承外部的执行上下文中的this,由于没有this关键字所以箭头函数也不能作为构造函数,同时通过call()或apply()方法调用一个函数时,只能传递参数(不能绑定this),第一个参数会被忽略。箭头函数也没有原型和super。不能使用yield关键字,因此箭头函数不能用作Generator函数。不能返回直接对象字面量。加分回答箭头函数的不适用场景:·定义对象上的方法当调用dog.jumps时,lives并没有递减。因为this没有绑定值,而继承父级作用域。vardog={lives:20,jumps:()=>{this.lives--;}}·不适合做事件处理程序此时触发点击事件,this不是button,无法进行class切换varbutton=document.querySelector('button');button.addEventListener('click',()=>{this.classList.toggle('on');});箭头函数函数适用场景:·简单的函数表达式,内部没有this引用,没有递归、事件绑定、解绑定,适用于map、filter等方法中,写法简洁vararr=[1,2,3];varnewArr=arr.map((num)=>num*num)·内层函数表达式,需要调用this,且this应与外层函数一致时letgroup={title:"OurGroup",students:["John","Pete","Alice"],showList(){this.students.forEach(student=>alert(this.title+':'+student));}};group.showList();【延伸阅读】箭头函数两种使用语法varfn1=num=>num*num;varfn2=(num1,num2)=>{returnnum1+num2;}箭头函数没有自己的arguments对象,这不一定是件坏事,因为箭头函数可以访问外围函数的arguments对象:functionconstant(){return()=>arguments[0]}varresult=constant(1);console.log(result());//1箭头函数访问自己的参数,可以通过命名参数或者rest参数的形式访问参数:letnums=(...nums)=>nums;不能使用new关键字,使用报错varFoo=()=>{};varfoo=newFoo();//TypeError:Fooisnotaconstructorprototype属性为undefinedvarFoo=()=>{};console.log(Foo.prototype);//undefined不能直接返回对象字面量,用params=>{object:literal}这种简单的语法返回对象字面量是行不通的。varfunc=()=>{foo:1};//Callingfunc()returnsundefined!varfunc=()=>{foo:function(){}};//SyntaxError:functionstatementrequiresaname这是因为花括号({})里面的代码被解析为一系列语句(即foo被认为是一个标签,而非对象字面量的组成部分)。所以,记得用圆括号把对象字面量包起来:varfunc=()=>({foo:1});

来自:ES和TS-箭头函数和this
02

关于箭头函数下列说法错误的一项是

正确答案是D箭头函数的this是定义时继承父级作用域的this。同时,它没有arguments,也不能new,也不能使用call、apply改变指向。

来自:ES和TS-箭头函数和this
03

箭头函数有哪些限制

箭头函数是ES6新增的语法,与传统的函数定义方式有一些不同之处,其中包括以下限制:无法使用arguments对象,需通过剩余参数(restparameters)或默认参数来获取传递给函数的参数列表;无法使用new关键字调用函数,箭头函数没有自己的this值,它会捕获其所在的上下文中的this值; 无法使用yield关键字,因此箭头函数不能用作generator函数; 箭头函数没有自己的作用域,它会捕获所在上下文的作用域链(scopechain),因此对于闭包的使用需要特别注意。需要注意的是,虽然箭头函数有一些限制,但在很多情况下它们能够简化代码,提高可读性和可维护性,特别是在函数式编程和React等框架中得到了广泛的应用。

来自:ES和TS-箭头函数和this
04

箭头函数中this指向举例

vara=11;functiontest2(){this.a=22;letb=()=>{console.log(this.a)}b();}varx=newtest2();//输出22定义时绑定。

来自:ES和TS-箭头函数和this
课程
专栏
【校招VIP】js 箭头函数详解
csdn
箭头函数
【校招VIP】JS中的this指向情况汇总
csdn
this指向
【校招VIP】箭头函数详讲(箭头函数中的this)
csdn
箭头函数
this
js语言和框架-ES和TS-箭头函数和this
3专栏
1课程
4 试题