=>,Es6箭头符号的前世今生

时间:2022-04-27
本文章向大家介绍=>,Es6箭头符号的前世今生,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

看代码能看错行,一看书就头疼且双眼流泪,没办法啊,都是娘胎里带出来的毛病,能看点是点吧。es6这种东西,虽然有一些语法糖,但毕竟也是新东西啊,得学。不学就落后,落后了就没得玩了。

今天再来几个知识点,趁着还没双眼流泪,赶紧能学点是点吧。以下例子,你看是学习,我写是复习,走起

////////

=>,这位客官,你看这是啥?

其它地方不管,在es6中,这叫箭头符号。^_^,这不废话么,不在es6里,这也是个箭头符号。准确的讲,在es6里,它叫做箭头操作符。这东西的作用就是,去掉还是简化啊,随便你怎么理解吧,就是“在回调中不用写function了”。

回调函数一般都没有名字,但为了作用域,还得放在一个匿名函数里。用了箭头符号至少就不必再写function了。除此之外没有什么卵用,而且它还没有this

es5是这样:

$('#idname').on('click',function(){
 console.log('老尚好白')
});

es6伪代码,大概就是这样:

$('#idname').on('click' => console.log('老尚好白'));

当然了我们都懂,这根本运行不了。

////////

上面的代码是瞎写的哈,下面是正确的。

es5:

var tosay = function(m,n){
 return m + n;
}

es6:

const tosay = (m,n) => m+n;
tosay('老尚','好白'); //老尚好白

////////

刚才说了, => 这货没有this,为啥呢?

首先js还是那个js,然后它把function给去掉了,没有function就没有自己的作用域,自然就没有自己的this了。所以它的this,是定义时所在的作用域。

说到根儿上,这货只是一个简写,它没有“声明函数”的能力。

所以你要是用了 => ,那么此时的this就是箭头符号所在的那个this了。而如果你使用了严格模式,那好么,箭头符号没有this,所以此时的this是undefined。

网上找的例子,左边是es6,右边是编译过来的,this变成了undefined

为了简化一个function,结果又带来一个新的坑。呵呵,那怎么解决呢?大概看了下,基本上都是在箭头符号外面再套一个function...,那要这样,当初还简化掉function干什么呢?这不是脱裤子放屁么,当然也可能是我理解的浅。

有好处有好处,肯定是我理解的浅,,Orz

////////

上面算是箭头符号的今生,接下来简单聊下它的前世。说箭头符号这东西在最早期,js刚出现的时候就有了。

就是js的注释:

<!--

这就是箭头符号

-->

浏览器的js引擎会把 <!-- 这四个字符做为注释的起点,现在也是这样,好使的。在es6中变成了标准的一部分,但同时也改变了它的用途。

-->,这个符号,在网上查资料,说它叫“趋向于”运算符,还说它是一个js运算符。但我却没查着js有这个趋向于运算符。

哪位大牛知道这个,还请多教教我啊。