箭头函数的使用

最新推荐文章于 2024-07-29 11:53:27 发布

FGGIT

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量54

点赞数

分类专栏： vue学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_47888212/article/details/128672034

版权

vue学习笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

文章探讨了HTML文档中的JavaScript代码，特别是关于箭头函数的使用和this关键字的行为。在事件处理函数的上下文中，展示了如何箭头函数改变了this的默认指向，以及这对函数调用和作用域的影响。此外，还提到了箭头函数不能用作构造函数以及不包含arguments对象的事实。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box">盒子</div>
  <script>
    // let fn1 = function(x,y){}

    // //定义箭头函数
    // let fn1 = () => {} //标准形式
    // //只有一个形参，小括号可以省略
    // let fn = x => {console.log(x)}
    // //如果有多个形参，小括号不可以省略
    // let fn = (x,y) => {console.log(x,y)}
    // //如果函数体中只有一行代码/表达式，就可以忽略花括号和return，会自动return
    // let fn = (x,y) => x
    // let fn = function(x,y){
    //   return x
    // }


    // let box = document.getElementById('box')
    // box.onclick = function() {
    //   setInterval(function(){
    //     console.log(this.innerText) //这里的this指向window，不是box。因为this从里向外找第一个this，function相当于windows
    //   },2000)
    // }

    // let box = document.getElementById('box')
    // box.onclick = function() {
    //   setInterval(() => {
    //     console.log(this.innerText) //这里的this指向box，箭头函数中没有this
    //   },2000)
    // }

    // let box = document.getElementById('box')
    // box.onclick = () => {
    //   setInterval(() => {
    //     console.log(this.innerText) //这里的this指向window，箭头函数中没有this，如果一堆箭头函数嵌套，都没有this，最终这个this指向window
    //   },2000)
    // }

    // //注意：箭头函数因为没有this，所以不能当作构造函数，也就是不能new
    // let Person = (name,age) => {
    //   this.name = name
    //   this.age = age
    // }

    // new Person('zs',18)

    // //箭头函数中没有arguments
    // let f3 = () => {
    //   console.log(arguments)//arguments is not defined
    // } 
    // f3()

    
  </script>
</body>
</html>