Web前端框架通用技术 ES6 4_箭头函数和this的指向问题 学习猿地原创

大家好，我是学习园地的特约讲师高沃峰，下节课咱们学习了let和cost这两个关键字，这两个关键字呢，是ES6里边新增的两个关键字，那用法呢，和VR是一样的，那目的呢，就是解决javascript在设计初期VR这个关键字一些不规范的一个目的，那这节课呢，我们再来看一个ES6给我们新加的一个比较有代表性的一个新功能，就是箭头函数。当然我们不用建造函数，我们一样可以做很多东西嘛，对吧，因为ES6新加的东西你都不用，一样也可以用以前的加加va语法去写东西嘛，是一个道理，那新加的建头函数，那我们可以让我们的代码更简洁，特别是用在回调函数里边是非常有帮助的，非常的简洁。另外呢，它有一个这次的指向问题，也是我们普通函数，呃，跟我们普通函数相比，用起来也是比较方便的，那我们分别来看一下，它是比较简单的，不管是生命还是使用，只是这次的指向问题，呃，稍稍难理解一点。

来我们还是用一个RT文件，我们叫做箭头诶。Arr解放一些说法啊，Arr ow箭头直接在这里边解看，当然了，我们写在这里边看一下，我们声明一个普通函数，我们一般的都怎么证明呢？我们要么function，比如说叫做fun，起个名字里边存在X，这样然后返回。啊。X，比如说平方吧，X这样的一个写法，要么我们使用，比如说做一个变量，因为加va块里边也是一种数据类型，对不对函数类型，那么我们可以用它相当于生明一个变量，你比如说我们这个F1。等于用匿名函数来不起名字的这种，然后我们这里边也是放一个参数返回。这个就可以了，那我们调用的时候呢，上面那两个其实是一样的啊，那我们直接fun或者是fun调一下传到X对吧，不能传得传具体的时差了，比如说我们传这个LG打印一下，在控制台打印一下这个值来我们运行一下，这是很普通的一个一个方法啊，F12我们看一下，你看打印的100对不对，那箭头函数跟它相比，你看一下，我把这两个注释掉，写一个用箭头函数来代替，跟它是一样的。

用fun嘛，你看我们，我用第二种方法说明Co用一个变量去接受，当然了，你如果把它存到参数里边，你就不用去接受了，作为回答函数就可以了，等于你看啊X。箭头X乘X减Y。这上面比是不是方便很多呀，咱们先看一下是不是一样能得到我们的结果，我先在传一个，比如说。换一个100。要我们值有些变化，来，我们刷新一下。你看一万一百乘100的平方对不对，就是100个平方，对对就出来了，这就是箭头函数。那进常函数，它有的时候那怎么理解这个呢？很好理解，你看啊，我们平时写的函数，你比如说。这个我们拿过来。啊。这个是我们写的一个函数，我们只需要把这个去掉。

看到了吗？把它放在中间，换成一个箭头。就行了，其实就是这么简单用了，那有的说，那你这种写法和下边这也不一样啊，对不对，那有几个特点，如果怎么了，你。现在这个写法也是可以的，你看我这块加上括号。那我这块你看加上括号，加上大括号，这可不可以呢？咱们先试一下啊，先试一下可不可以，这里边我们加上阿姨听完，这是它的一个完整的一个写法，你看是不是就跟这一样了，那我用起来是不是就是把一个function换成我们的一个箭头了，所以看到这个箭头，那其实就是在看，看到的是一个函数，它代表的就是这个发的关键字，你看用法是一样的，我们刷新一下。还是1万没有关系，只不过我们要知道几个细节。如果没有参数。如果没有参数，比如说返回100。第一个这块啊，如果没有参数。

或有多个参数就需要使用什么呢？使用小括号来定义参数列表。你看这块如果没有参数，不只能说参数，或者有多个参数，你看现在是没有参数，对不对，来我们试一下。来听一下，你看100直接返回了，对吧，因为没有参数的话，你不能去掉，去掉两个等号就不是一个合法合法的一个语法了，对不对。对吧，那第二个也就是如果有一个参数。怎么可以？省略。可以不用吧，不用括号，如果就一个参数的话，你可以不用，比如说我们这存个X。然后这里边儿我们X乘X这样的一个情况，你看如果有一个参数就可以不用它。

这样的话，我们用语法是完整的就行了。来我们再刷新一下，你看一下你看就可以了。那我们这个写法看我们原来就没有形水呢，你看我们这块，如果我们这里边只有一条语句，只有一条语句，那我们可以不加大括号。不加大括号。不加大括号的同时，因为只有一条语句，它会自动给我们加入为配。看到了吧，所以。我们来看一下，如果没有，也就是如果函数体中只有一条语句，怎么着可以不用花括号，可以不用画括号，如果函数体中只有一条对，怎么着可以不用画括号，记住这点。可以不用画括号，然后呢，也可以不用怎么办？不用画括号怎么不能，不能说也可病用就不用使用怎样，因为太冷会怎么着，自动加上。

那同理，两条语句以上的是不是就需要加上划括号呢来写呢，对吧？加上划括号是不是就也要加上re return语句呢？当然你不返回也不用加配对不对，函数里边就没有RETURN1对你就不用加嘛，那这样的结果也是一样的对不对？那如果这里边有多条。对吧，有多条圈。有多条，你看我直接加括号，不加行不行。你看就按派的对不对，它这样的是不行的，所以这样的话，它不当函数T，它当一接似对象了，就没有定义，所以呢，加大括号的话，你就得怎么着把K加上就可以了，如果有多条的话，那我们也可以把它敲开对吧，这里边比如说我们x.cons log打一下X。看一下如果有多条怎么写就行了。当然了，你这里边你。打印两个，这个也是没关系，不一定说非得有什么，非得有return一对对不对，只不过我们在这块没有return，我们这就可以返回了，所以这块要用的是氨基换，对吧，是这样的一个情况，这技术特点，那这里边就是将function换成。

谁呀，换成箭头放在什么参数。和函数体中间。空间。对吧。这就是我们健康儿童。那说镜头函数这么用，那它有一个什么好处呢？咱们说了有两点好处，一点呢，就是我们把它作为回调函数的时候特别的有用。特别的方便，你比如说。给大家做一个，呃，因为任何。呃，好多方法里边都支持回调函数嘛，对不对，好多方法都支持你对给大家做一个，比如说咱们学过数组排序对不对，那我随便生明一个数组来证明一个速度AR等于这里边随便加一个值1589对吧，然后啊。还有四。九十九二一个乱序的，那我现在想着把它排序对吧，按自己指定的从大到小，从小到大的排序，怎么排序呢？那么我们是不是使用这个数组里边有个方法sot啊对吧？使用这个方法去排序，然后呢，把排序的结果给我一个新的数组na。

对吧，是这样的，然后我们调用na2.rog，我们看一下这个结果打印的顺序是不是我们排序过的，那排序的时候可以指定是从大到小还是从小到大，那里边通常我们传一个是轨调函数的里边的话，数组里边的。相邻的两位分别传进来，有的我就叫A和B吧，或者叫MN都行，总之两个参数对不对，那我们返回。I提完返回什么呢？返回A减B，看前面的数大于后边的，还是后边数大于前面的对不对？那就形成倒叙和正序了，具体细节我就不多说了，你看是不是排序的正序的对吧？我想倒序的那就像第二个数减第一个数，第二个数减第一个数减A，那我现在就可以变成什么，就可以变成一个倒叙的排排列方式这样的，那如果我把它换成一个。

你看换成一个箭头函数，这样就会比较方便了，来。Let a等于a.sod排序它，那感觉就像一条宇就是一样，怎么写呢？你比如说因为是有两个参数，所以呢，首先肯定用这个分开参数对不对？那有两个参数前面一定要加括号A和B对吧，A和B如果一个参数的话，你就不用了，对吧？然后这里边呢。里边就一条圆柱，所以呢，我就A减B就完了。对吧，我也不用做其他的一个操作，一减密你看就可以了。那你也可以加上大括号return，返回A减B是不是都可以啊，咱说了，如果里边就一条尾，对，是不是大括号可以省略什么可以省略？你看是不是用箭头函数，让我们来表达一个回调函数的时候更清楚，这就是一个函数，那上面是一样的，那我们看一下排序能不能再变过来正序呢？你看一到99给我们排到中去了。对吧，这就是我们。

呃，箭头函数通常都在回调函数里边应用，是比较多的一种情况。非常多的一种情况。当然也有一些，呃，细节我们需要处理。什么细节呢，你比如说。如果见到函数返回的是一个对象的时候。什么叫现在还是返回一个对象的时候，你比如说我们这里边，呃，声明一个就是让程序返回一个对象吧，只返回一条啊，假如说我这会cos身为一个，嗯，身为一个OB阶段随便的一个对象，对不对，那我用箭头函数来返回一个对象函数，嗯，假如说传一个参数，假如传一个ID进去吧，ID进去。然后我这来个箭头，是不是再声明一个函数意思，让那函数返回的对象给obj，是这意思吧，那如果就一条宇宙的话。你的ID？然后逗号。冒号ID，我要这个ID怎么样？付给这个ID，然后呢，里边比如说再加一个名字，等于张三。

这本身就是一个对象，因为一条语句相当于这么写的return I return外层再加一个大括号。对吧，刚才我说的一条语句是不是类似于这样，因为就想返回一条对象嘛，对吧，这么写的，那我们看一下这样可不可以呢。Obj调用，呃，打一下obj吧，OBj.rog。按一下。我们看一下结果。反应的是这个对吧，那不是对象的形式。那如果我们去掉，你看更像了。你看打印的是刚才那那一串，你看如果是这样。因为我就想打印的是这个对象对吧，因为返返回的就是这个对象嘛，这是调一个函数，这个函数想返回一个对象，但这样的话就是错了。看一下。看一下为什么错了，因为他认为这个大括号是什么呢？不是接身对象的括号。而是什么？而会认为是这个函数的大括号，那因为函数大括号就不理解里边这样的语法，这样语法在函数题里边是不生效的，而是在接设里边生效的，所以呢，如果你想用这一条直接解决，那么你把它加个括号。

这就防止我们大括号冲突的问题这就解决了。就相当于我们直接返回的一条宇宙是一样的，那这个呢，加括号的这个相当于这样外边加大括号。是这样一样的对吧，所以说咱一条一句我可以去掉大括号对吧，就一个返回一句，然后可以去掉对吧，但是防止这个大括号和函数题本身有大括号这个冲突，所以用小括号解决了解一下。你看就是杰森的这个对象对吧。这样，那我们这里边调用这个对象里边呢，你看返回这个对象。掉冰箱里边的能子可不可以掉呢？一下啊。OB接点。错错错了，不是说O间内蒙，因为我们什么，我们刚才看到的不是对象是把一个函数付给他了，OB间是一个函数，所以我们得调一个OB间的函数，我们把谁传给他，比如说把十传给他，那这个十是给ID啊。

我声明，这个不能叫MBG，应该叫做什么fun，明白吧，这大家就明白了，不然忘了。这块调这个调fun，它返回的就是这个对象，那我们这个看一下啊，来小心点，你看返回的对象对吧，然后我可以调用它返回的对象里边的什么，比如说name这么去用啊。你理解错了。这就是这个，大家注意的就是箭头函数返回对象时，必须在对象外边加上小括号。给大家记录一下。箭头函数。符号变函数在。返回对象时。对象是怎么必须在对象外面？

加上什么小括号？记录一下就可以了。当然了，还有一些其他的一些一些问题啊，你比如说。那我们下一步要讲的就是什么？这次的指向问题。什么叫这次的指向问题呢？嗯，跟大家这么说一下吧，你比如说我们平时来做一个方法的时候，比如说叫做F，嗯，是fobj，就这叫f fe嘛，M嘛，这边叫零，对吧，那它是可以用作构造函数的，所以呢，我们直接可以，比如说Co生为一个obg等于谬M。是可以这么去做的，然后呢，我们比如说ob.log可以打印。你看一下。是没问题的，但是呢，如果我声明一个箭头函数，声明箭头函数如果去做你看啊COB接一。嗯，等于这么一个，随便写一个。啊，这好吧，意。

因为我声明的是函数，这别忘了括号。这里边儿。大括你看都是空的对吧，什么都没做，因为上面这我写的空的是一个道理，对不对，那我现在呃这块。嗯。声明一个con ST obj。二等于六。三一。看一下。转新一下，他就告我出错了，该一不是一个构造方法，也就是什么，也就是我们在尽头函数里边根本就没有过段方法。没有过道方法，因为普通的方法里边是有的，那这个DEMO1里边呢，没有过道方法就证明什么，我们根本用它创做不了过道器去扭对下这个作用啊，这点要大家要知道，咱们说他用的参数里边，所以呢，你用用普通对象，你还是用其他的传统那些方法，而不要用我们的什么，不要用我们的这个箭头函数来去做，它是做不了的，因为里边没有扩号器，也没有继承的那些属性什么东西的，这些都没有。

那么这次问题是最主要的，就要解决的。你看普通函数的Z次，它指向的是调度，这我给大家举个例子，分别对比一下，咱们还是写呃，普通的函数，假如说我们用有一项吧，Cost obj。等于我用这个阶层这么去做啊，在这里边。假如说我这里边声明一个，呃，方法用普通的方法去普通的函数去证明，你假如说我们这块，嗯。出一个方法，名叫。因为我用介词方法对不对，Fun还是叫fun吧这块，然后我们function声明一个名字，这里边我们打印下这。点了。答一下，This，那这是我写的再平凡不过的什么一个接触对象了名字，这里边对应的一个函数值对不对？那这个这是谁呢？如果我们这是普通函数。

这个方法是哪个对象调用这个，这就代表的是哪个对象，你比如说我们这里边obj里边fun。用它来看一下。那他就代表着谁啊是。在这里边。看不出来，你看代表的就是什么，就是这个整个的这个obj，这个对象相对这样，当然你可以拗一下这个啊，拗一下这个，但这不用拗，这种直接声明就是对象不用去拗了啊，你可以说像上面这种方法去弄都是一样的，那现在我换成一个。什么换成一个箭头函数修为T，这个OBJ2等于我也是用箭头函数这种方式去在对象里边直接声明啊，因为经常我们在后边用框架的时候，经常会这么去证明，比如说还是f fun冒号。嗯，这里边儿就不能说这样去。而是I括号，然后我们这块用进程函数括号。

箭头对吧，这上面这你看是一样的箭头函数对不对，当然你也可以写到一行去，然后我们再打一下它的这。啊。我声明到这个对象里边去的一个方法，和上面其实是声明的是一模一样的，都是在对象里边用杰森的格式起了一个名字，后边值，只不过上面的是传统的匿名的函数，这个呢是进能函数，匿名函数，那我们再打印OB2里边。那这次的时候你看一下它的值是多少。你看是window对象，它们两个是不一样的，也就是普通的函数，这个方法是哪个对象都要用，这次就代表谁。二。箭头函数里边的这。看到了吗？跟调用者无关，它不代表这个调用者，而是谁啊，而是我们的。你看一下window对象，那为什么是window对象呢？为什么是温度对象啊，好，这几点啊。关于函数的Z指向它的调用者，这是普通函数对吧？咱们obj调用它就代表obg，如果没有调用者，那它就是指向的是温度，对吧。

什么呢？就是你直接写的。函数里边ABB。对吧，没有对象，这里边我们。嗯，打一下。因为普通函数里边它也是有这嘛，你看啊，这是没有调用者，没有调用没有对象的调用者ABB。这样调用，那这样调用的话，我们看一下它返回的就是什么，就是window对象。这是普通函数，不是间断函数啊，为什么呢？因为你温度是全局的，任何的所有的没写在对象里的方法，其实都在温度对象里的方法是这样。看到了。是一回事啊。这是这个那箭头函数的这意思。你看指向箭头函数定义时所处的对象定义在哪个对象里边，就是那个对象，而不是箭头函数使用时所的对象，所以呢，我们使用对象来调用这个对象的一个方法，调用的并不是说对象点这个对不对，也就是我们在这块声明的一个阶段函数。

它调用的这个方法，这个方法中的这并不是代表这个对象，而普通方法是对吧，那看一下前面这一句话。指向的是建成函数定义时所处的对象。它就定义是所说的对象了，也就是我这个方法在哪个对象里，也就是这个对象我在哪个里边定义的，它就代表哪个对象，不是说这个方法在哪定义的啊，因为这次是对象，它在哪个对象里定义的，这在哪个对象，你比如说找他的上一级，它上一级在哪定义的，那我这个VR定义的是不是在window里面定义的，所以他找的就是温度。所以他找的就是温度比较。听了吧。是这个对象中的这个方法。所在的这个方法。啊，在哪个里边定义的。就是哪力跟调用着没关系，那这个还不太好理解，因为是他所处的这个对象所在的位置，它是在相当于在window对象定义的，那属于window，也就是它默认是找上下文的，这说白了就是找级的。

那这个级别还不太理想，你还看不出来。我大家做一个，给他做一个小例子，大家理解一下，你就明白这个上下级的关系了。你比如说我这块。加一个。呃，做一个。吧，这样我先随便就在这几个第一个盒子吧。嗯，用井号吧，另一个盒子，然后呢，宽度100像素高度。嗯，50像素练习可以加上D背景颜色，我们来做一个，让它是一个red红色。用它是红色的。这个很简单的一个一个样式，然后我们在这里边来一个div。在这里边定一个ID，等于box使用这个盒子，对吧，然后我们再做一个，呃，Spark。按钮，我们获取这个格子，Co box格子等于document点获取他对象。

通过ID来获取这个对象。那现在我点击这个对象的时候，我先用普通的方法去写，你看啊。先用普通的方法去写啊呃，比如说box点就on click了，Click点击的时候调用这个方法。你看点击的时候就用这个方法，那我直接可以用什么，可以用this。Box点击的奥克，奥克是这个方法对不对，所以这次就代表box对吧，那我这块再做一个类。就这一层嘛，那就是box.bg color给加位，这块是加一个背景颜色，比如说变成yellow。点击的时候，我让它变成黄色的。添加。Glasss添加黄色的，呃，添加类，那我们就立即color，那这个呢，就是比较简单的一个了，专心一下，你看一点击。

添加没有。定义。这个。不是那个几。咱们就补充写ABB添加。CL，嗯。不是添加不是这块啊，琢磨啊，Class使用class等于什么BG。你看来我们再刷新一下。面积你看变成黄色了，对吧。那这块呢，这个函数，那我们再来加一层，你看我们再加一层啊。怎么加呢？我们这块用一个让他三秒钟再开帽子，三秒钟执行一下这个回调方法。加三三秒钟。然后让他三秒钟改变一下这个颜色。你看三秒钟改变压变颜色。刷新一下点击可不可以呢？你看不可以，为什么不可以。

你看，等等这三秒，还没等待三秒呢。点击一下。你看没调用，为什么？因为这里边的你看啊，现在这个回调方法是在这个里边调用的，它属于window对象对不对，所以呢，这里边的这我们直接COO log.logg。你看我们打印的是什么。点击一下123。你要打印的是window对象，看到了吗？是window对象，而不，这里边我再放一层对吧，也就是这次是哪个方法调用的，它就代表哪个。你看我这外层调用奥利方法是这个，而我们这个回调方法是写到这个方法里的，所以呢，他会找这个方法论等对象，那我们平时想解决这个问题，怎么解决呢？我们是这样解决的，先把上一层的这个这我先给谁啊先给。Obj。O。把我们上层这次给obj，那这里边就不要用这次了，而是用谁啊。

而是用，因为这个方法里边是能访问到上一层的obj的，那我就得用什么用obj才可以，这个obj才是上面那个boxs这个对象，你比如说我在这块，呃，点log打印一下这个OG。OB是用这种方法打印的，所以点击这个按钮的时候，我们来看一下三秒之后会不会变。点击123，你看变化了才能找到这个对象对吧。那现在同样的方式，我换一种写法。换成函数。通过这个例子，你就能理解见到二组。你看我把这个。我把它换成什么呢？换成。箭头函数。你看同样我就把这个里边的方法改成了一个箭头函数啊，其他什么也没动，那这里边儿呢，我们就不需要这个了。你看这会直接买下。这块我们就直接。

所以呢，在箭头函数里边的，这并不是谁调用这个方法，谁调用到这个方法，它代表哪个对象，而是在代表它所声明的位置的负极的对象，从负极继承过来的它上一层，那这个方法明的这个位置对吧，是不是就在太茂的它的上一级是不是就这块对吧？所以是不是这里边这次它继承到这里边来了。所以要知道有层级关系，继承他声明所在位置的上一级。来这个我们看一下。要不？前立321。改变了对吧，你想想这种用箭头函数的方法和这次问题是不是就能解决，我们平时写成绩的时候，先把外层对象付给他，然后再改变这个对象，然后才能改变哪个对象的一个背景颜色，是这样的一个情况，但是我们见到函数轻层解决这样的一个，呃，多层嵌套的功能，它会如果再有一层，这里面再有一层。或者有多层，它都是层层往上肌找，找到位置先找它的负极，腹肌里没有再找到上一腹肌，腹肌没有再找上一负肌。

所以咱们总结一下，你看啊。箭头函数没有自己的Z，它的Z是继承而来的，默认指向在定义一定是定义，不是调用定义它时所处的对象的数组对象。它定义在哪对象里边，就从它的负数对象里面继承过来，是这样的一个，如果能理解这个例子，你就理解了箭头函数。箭头函数写法很简单，那后边既然能学了进头函数了，现在你看着有可能有一些不舒服，因为这种形式你不怎么用，对吧？进头还是这种形式不怎么用，看着就比较别扭，如果你用多了，看多了就觉得看着它是比较习惯的，比看着什么fashion还要习惯，所以咱既然学完这个方法了，能用它的地方咱们都用。能用他的地方当中，但是呢，就在哪几个地方用呢，要么在回调方法里边用，对吧，基本上都通常都是在回调方法里边。当然了，像这个这次指向问题呢，还有很多呃细节的地方，比如说使用一些绑定啊，或者调用CR那些方法的时候，那些什么都是无效的。

所以呢，要不是太理解这一次的话。对吧，那在不用这次的场合使用那个，呃，这个建造函数，如果理解这次的话，你可以在任何。场合使用方。