箭头函数基础

最新推荐文章于 2024-11-10 15:10:09 发布

沉星※

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量470

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_56565958/article/details/136544994

版权

本文详细介绍了JavaScript箭头函数的特性，包括省略语法、this指向固定、无arguments对象等，并通过实例对比了与普通函数的区别，以及setInterval和call/apply在箭头函数中的应用。

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

箭头函数：在函数定义的基础上把function去掉，且在小括号后面加 =>

var obj = {
        name: 'zs',
        age: 20,
        say: () => {
            console.log(this);
        }
    }
    obj.say()
    console.log(obj)
    let ding =  setInterval(() => {
        console.log(8)
    }, 1000)

箭头函数的特点：

    1、箭头函数如果只有一个参数可以省略小括号 
    2、箭头函数返回值只有一条语句，可以省略return和{}
    3、箭头函数没有内置对象arguments
    4、箭头函数不能是构造函数
    5、箭头函数的this指向不能发生改变，call和apply能调用箭头函数
    6、箭头函数没有原型对象
    7、箭头函数的this指向父作用域（定义它的地方）之前this指向可以统称为调用它的地方

   //2
   var fn_1 = y => y
   console.log(fn_1(20))
   //3
   var fn_2 = function () {
       console.log(arguments);
   }
   fn_2()
   var fn_2 = () => {
       console.log(arguments); // arguments is not defined
   }
   fn_2()
   //4
   let setInterval1 = setInterval(function () {

   }, 1000)
   console.log(setInterval1);
   let setInterval2 = setInterval(() => {
       console.log(this);
   }, 1000)
   console.log(setInterval2)
       //5
   var obj = {
       age: 18
   }
   // var fn_3 = function () {
   //     console.log(this);
   // }
   // fn_3()
   // fn_3.call(obj)
   // fn_3.apply(obj)

   var fn_3 = () => {
       console.log(this);
   }
   fn_3()
   fn_3.call()
   fn_3.call(obj)
   // fn_3.apply(obj)
   <script>
   var obj = {
       name: "ls",
       say: () => {
           console.log(this);
       }
   }
   obj.say()
<script>
   var obj = {
       birth: 1990,
       getAge: () => {
           console.log(this.birth);
           console.log(new Date().getFullYear() - this.birth);
       },
   }
   console.log(obj.age);
   obj.getAge(); //  34    NaN

</script>
<script>
   var birth = 2000
   var obj = {
       birth: 1990,
       getAge: () => {
           var fn = function () {
               return new Date().getFullYear() - this.birth;
           };
           return fn();
       }
   };
   console.log(obj.getAge());// NaN   34  24

</script>