6.箭头函数.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <ul>
  10. <li>aa1</li>
  11. <li>aa2</li>
  12. <li>aa3</li>
  13. <li>aa4</li>
  14. <li>aa5</li>
  15. <li>aa6</li>
  16. <li>aa7</li>
  17. </ul>
  18. <script>
  19. // function fn1() {
  20. // console.log(this);
  21. // return 1;
  22. // }
  23. // console.log(fn1());
  24. // 箭头函数格式
  25. // let fn2 = () => {
  26. // console.log("@22",this);
  27. // }
  28. // fn2()
  29. // var arr = document.getElementsByTagName("li");
  30. // // var arr = [1,2,3,4,5,6,7];
  31. // console.log(arr.length)
  32. // for(var i = 0; i < arr.length; i++) {
  33. // // console.log(arr[i])
  34. // // arr[i].onclick = function() {
  35. // // console.log(this)
  36. // // }
  37. // arr[i].onclick =function(){
  38. // console.log(this,'父级')
  39. // setTimeout(() => {
  40. // console.log(this)
  41. // },1000)
  42. // }
  43. // }
  44. // function fn2() {
  45. // console.log(arguments)
  46. // }
  47. // let fn2 = (...rest) => {
  48. // // console.log(...rest)
  49. // }
  50. // fn2(4,5,6,7,8);
  51. // let fn3 = ()=>{
  52. // "哈哈哈哈"
  53. // }
  54. // fn3()
  55. // function fn4() {
  56. // console.log(this);
  57. // }
  58. // new fn4();
  59. let fn5 = () => {
  60. console.log(this);
  61. };
  62. new fn5();
  63. /**
  64. * 箭头函数特点
  65. * 1.并没有this 如使用this 则this指向的当前父级的this指向
  66. * 2.不支持使用arguments 支持使用rest
  67. * 3.箭头函数 返回值不用return
  68. * 4.箭头函数没有构造函数 不能使用new
  69. */
  70. </script>
  71. </body>
  72. </html>