00:00
Hello,大家好,那这个小节呢,我们来做一下箭头函数的实践。顺便来说一下呢啊,箭头函数的一个应用场景啊。还有他不适合的啊,应用场景。好了,首先的话,咱们先来看需求一。啊,要求点击DIV2秒钟以后变成一个粉色。好,我们来做一下啊,首先第一步的话,咱们肯定要获取元素。啊,Let ad等于一个document get。Element,然后把ID。好,把这个ad放进来,下边呢,我们开始绑定事件啊a.ADD event listener啊。然后click。后边是我们的回调函数。里边呢,我们需要做一个事情,就是加一个定时器,因为点完以后两秒钟以后才变颜色,所以说要加一个定时器,Set time out,第一个参数,回调函数,第二个时间。在里边我们要修改背景颜色。
01:04
好,那么背景颜色修改这块呢,我们知道可以使用div来做,但是咱们这呢,不想使用div,想用谁呢?想用这个this。啊,选this,那么我直接来this.steal点八。等于一个pink,这样可不可以呢?这样子是不行的,为什么呢?因为这个this的指向有问题。啊,我们先看一看啊,刷新页面点击一二,诶没有变对不对,顺便打开控制台看一眼,报错了。啊,Cannot set property background of,他说这个属性是一个是,为什么呢?一定是this出了问题,Cano log,打印一下this。保存好,然后点击一二出看一下啊,This呢是指向window的啊,Window呢没有style,属性是on,所以说在后边点background就报错了。
02:00
那么咱们应该怎么去解决这个问题呢?哎,之前我们是这样做的,就是在外层呢来保存this的值。啊,来写一个let或者写一个ver都可以啊,我们写一个that啊,或者写一个下划线this啊,或者写一个self啊都行,这是常见的几种保存Z的变量名啊,我们就使用这个下划线Z吧,好吧,这个。然后接下来我把这个呢放到里边,那为什么这样做可以呢?因为我现在是把外层这个函数作用域下的Z进行了一个保存。啊,保存完了之后呢,等这个内部的函数在调用时,它在当前作用下边找不到下划线内就会往外层的作用浴下边去找,哎这儿有,所以说就可以使用了。好,一起来看一看啊,我把这个注掉保存,然后点击一二出没有问题,这是一种解决方法,是咱们之前的解决方案,而现在呢,有了箭头函数以后,我们完全可以把这个函数呢,变成一个箭头函数,这里咱们依然是使用谁啊,依然使用this。
03:13
看这依然使用this啊保存,然后呢,点击一二出没有问题,为什么这样可以呢?因为咱们这个箭头函数它本身呢,就是Z是静态的,它是指向在声明时所在作用下的Z值,它是在这个外层的作用下然后说明的,所以说这个this就指向的是这个函数Z。那么这个函数里边这是指向谁呢?指向我们的事件原ad,所以说我们就可以找到元素,并且修改它的背景颜色了。好,这是第一个案例啊,下面的话我们来看第二个案例,就是生明一个数组,然后从数组当中返回偶数的元素,哎,举个例子,好,写一个cost a等于169啊,十一百,好,再来一个25行了,可以了。
04:15
下边呢,我们从数组里边呢,返回偶数的元素啊,写一个count new啊写一个results等于a.filter。快活。用filter呢来做一个筛选。在这呢,写一个item,然后里边呢,咱们开始写,哎判断,如果说ITEM100分二是等于等于零,则证明它是一个偶数,偶数的话呢,咱就返回一个处把它返回,那反之呢,啊,它是一个false。保存一起来看结果怎么样,Log打印一下。看这六十一百没有问题啊,这是咱们使用原来的啊,这个函数声明方式来去做的,现在有了箭头函数之后,一起来看一看啊,我把这个呢注掉。
05:04
啊,在这儿呢。写一个cost,然后result等于AR,还是用这个filter,但是里边的函数呢,咱们不使用之前的这个匿名函数了,而使用箭头函数。就是item箭头括号里边,咱们看开始判断对吧?哎,如果item要是百分号二等于等于一个零,那我们就返回一个处。啊,返回一个处好,那反之啊反之else,咱返回一个false保存怎么样啊,保存过来六十一百没有问题,当然这个时候咱们还可以简化,你看啊,这个时候咱们还可以简化,怎么办呢?我这样做,把这个呢咔掉,然后呢,后边写什么呢?后边写I term,然后百分号二,然后等于等于等于零。只要你的item呢,对,二取于等于零,那我就返回它的一个结果,你要等于零的话就为真呗,对不对,我return一个处,那么item就保留保存,你看一下结果是一模一样的六十一百,你再对比一下这个代码和这个代码哪个更加简洁呢?明显是下边这个。
06:20
好了,我们来做一下总结是吧,那么箭头函数啊,适合。啊,什么样的场景呢?它适合与这个this。无关的毁掉。啊,回调,你比如说咱们这个定时器是吧,再比如说函数所这个数组的这个方法回调。啊,用箭头函数非常非常合适,那么但是呢,咱们这个箭头函数啊,啊这个箭头函数啊,不适合什么呀,不适合与this有关的这个回调设置什么时候与this有关的,你比如说啊这个DOM元素的事件回调。
07:05
啊,事件回调,你想想这事件回调里边是不是与this有关呢?啊,This呢是指向事件圆的,如果你要是这换成了箭头函数,那this呢就不再指向事件源,而是指向了外层作用域的Z的值。所以说啊,他不适合做这个事件回调,那么另外还有一种情况是什么呢?就是对象的方法。啊,这个也不太适合,为什么呢?你比方说我这写一个线头函数是吧?啊,我这写个对象,所谓啊,然后写一个上硅谷,然后下边写一个get name,然后咱们这样去做。那么这个时候this.name this指向谁呢?This指向的是咱们这个对象,对不对?指向这个对象啊,然后如果说我把它变成了一个箭头函数的话,那这个时候this就不再指向对象了,而指向的是外层作用域的this值。
08:00
那明显的话就啊,咱们的意思就有偏差了。啊有偏差,所以说那么咱这个阶段函数啊,也不太适合做这个对象的方法,注意我只是说不适合,并不是说它不能。再说一遍啊,只是说他这时候不适合,并不是说不能,在一些情况下也是可以这样用的,也是能够方便咱们去实现的。啊,好了,这是当前我们介绍了一下呢,关于箭头函数它的一个应用场景啊,把它保存一下。
我来说两句