本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(13)

2021-06(81)

2021-07(13)

2021-08(62)

2021-09(66)

7.ES6 箭头函数

发布于2021-05-30 13:20     阅读(893)     评论(0)     点赞(8)     收藏(0)


在es6中,推出了一个新语法 箭头函数;

以前定义一个函数,是这么定义的;

  1. let fun=function(){
  2. console.log('我是箭头函数');
  3. };
  4. fun();

现在可以简化下,用箭头函数:

  1. let fun=()=>{console.log('我是箭头函数')};
  2. fun();

然后假如函数体只有一条语句或者是表达式的时候{}可以省略

  1. let fun=()=>console.log('我是箭头函数');
  2. fun();

加形参情况;

  1. let fun2=(a)=>console.log(a);
  2. fun2('ccc');

只有一个形参的时候 ()可以省略,改成:

  1. let fun2=a=>console.log(a);
  2. fun2('ccc');

多个形参:

  1. let fun3=(x,y)=>console.log(x,y);
  2. fun3(20,30);

有返回值情况:

  1. let fun4=(x,y)=>x+y;
  2. console.log(fun4(1,1));
  3. let fun6=(x,y)=>{
  4. console.log(x,y);
  5. return x+y;
  6. }
  7. console.log(fun6(1,3));


关于 箭头函数里的this;(重点)

传统写法:

  1. let fun=function(){
  2. console.log(this);
  3. console.log('我是箭头函数');
  4. };
  5. fun();

箭头函数:

  1. let fun6=(x,y)=>{
  2. console.log(this)
  3. console.log(x,y);
  4. return x+y;
  5. }
  6. console.log(fun6(1,3));

复杂案例:

  1. let obj={
  2. name:"jack",
  3. age:11,
  4. getname:function () {
  5. console.log('xxx',this);
  6. return this.name;
  7. }
  8. }
  9. console.log(obj.getname());

传统写法:由于是obj调用的,所以它的this就是obj本身;因为this就是obj,所以可以通过this获取name属性

再来看obj的箭头函数写法(外部无函数):

  1. let obj={
  2. name:"jack",
  3. age:11,
  4. getname:function () {
  5. console.log('xxx',this);
  6. return this.name;
  7. },
  8. getname2:()=>{
  9. console.log('yyy',this);
  10. }
  11. }
  12. console.log(obj.getname2());

 

再来做一个更详细的案例,用点击事件来监听

  1. <button id="btn">按钮1</button>
  2. <script type="text/javascript">
  3. let obj={
  4. name:"jack",
  5. age:11,
  6. getname:function () {
  7. document.getElementById("btn").onclick=function () {
  8. console.log("按钮:"+this)
  9. }
  10. return this.name;
  11. },
  12. getname2:()=>{
  13. console.log('yyy',this);
  14. }
  15. }
  16. console.log(obj.getname());
  17. </script>

点击按钮以后调用的是按钮对象,this也就是它本身,这是传统的方式

 

再换成箭头函数的方式:

  1. let obj={//3
  2. name:"jack",
  3. age:11,
  4. getname:function () {
  5. document.getElementById("btn").onclick=function () {
  6. console.log("按钮:"+this)
  7. }
  8. return this.name;
  9. },
  10. getname2:function(){ //2
  11. document.getElementById("btn").onclick=()=> {
  12. console.log(this); //1
  13. }
  14. }
  15. }
  16. console.log(obj.getname2());

点击按钮以后调用的是obj,按标记的顺序来理解:

1是this,它的外部有一个function(不是箭头函数),function所属是obj,所以在定义的时候this就是obj

在上面的基础上增加在obj对象之外参数获取的案例:

  1. var name='mimi'
  2. let obj={
  3. name:"jack",
  4. age:11,
  5. getname:function () {
  6. document.getElementById("btn").onclick=function () {
  7. console.log("按钮:"+this.name)
  8. }
  9. return this.name;
  10. },
  11. getname2:()=>{
  12. document.getElementById("btn").onclick=()=> {
  13. console.log("测试"+this.name)
  14. }
  15. }
  16. }
  17. console.log(obj.getname());

 在外部设置了name='mimi',然后按钮调用getname函数拿到的值是个空

再调用getname2:

  1. var name='mimi'
  2. let obj={
  3. name:"jack",
  4. age:11,
  5. getname:function () {
  6. document.getElementById("btn").onclick=function () {
  7. console.log("按钮:"+this.name)
  8. }
  9. return this.name;
  10. },
  11. getname2:()=>{
  12. document.getElementById("btn").onclick=()=> {
  13. console.log("测试"+this.name)
  14. }
  15. }
  16. }
  17. console.log(obj.getname2());

细心的小伙伴可能发现了为什么不用let来定义name='mimi',

解释下:let的作用域不像var那么大那里都可以定义,let的的作用域只在块级作用域里有效

总结:

箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候所在的对象就是它的this

箭头函数的this看外层是否有函数,如果有,外层函数的this就是内部调用箭头函数的this 如果没有,则this是window

完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <button id="btn">按钮1</button>
  9. <script type="text/javascript">
  10. var name='mimi'
  11. let obj={
  12. name:"jack",
  13. age:11,
  14. getname:function () {
  15. //console.log('xxx',this);
  16. document.getElementById("btn").onclick=function () {
  17. console.log("按钮:"+this.name)
  18. }
  19. return this.name;
  20. },
  21. getname2:()=>{
  22. document.getElementById("btn").onclick=()=> {
  23. console.log("测试"+this.name)
  24. }
  25. //console.log('yyy',this);
  26. }
  27. }
  28. console.log(obj.getname2());
  29. // let fun=function(){
  30. // console.log(this);
  31. // console.log('我是箭头函数');
  32. // };
  33. // fun();
  34. //let fun=()=>{console.log('我是箭头函数')};
  35. // let fun=()=>console.log('我是箭头函数');
  36. //let fun2=(a)=>console.log(a);
  37. // let fun2=a=>console.log(a);
  38. // fun2('ccc');
  39. // let fun3=(x,y)=>console.log(x,y);
  40. // fun3(20,30);
  41. // let fun4=(x,y)=>x+y;
  42. // console.log(fun4(1,1));
  43. // let fun6=(x,y)=>{
  44. // console.log(this)
  45. // console.log(x,y);
  46. // return x+y;
  47. // }
  48. // console.log(fun6(1,3));
  49. </script>
  50. </body>
  51. </html>

 

原文链接:https://blog.csdn.net/Stubborn_bull/article/details/117160533




所属网站分类: 技术文章 > 博客

作者:西小口到了吗

链接:http://www.qianduanheidong.com/blog/article/116149/e5230e3a0a6376f0dd0d/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

8 0
收藏该文
已收藏

评论内容:(最多支持255个字符)