• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > 我只是想用JavaScript写一个方法…

    我只是想用JavaScript写一个方法…

    作者: 分类:前端开发 点击: 589 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      JavaScript中定义一个方法主要可以分成两种形式:

      • 函数声明
      • 函数表达式

      函数声明

      声明体是最普通的,与其他语言也相近的一种方式。

      function func(a, b) {
        return a + b
      }
      
      func(1, 2) // 3
      

      不过,毕竟JavaScript!它有一个特性:函数提升。

      函数提升:把所有函数提升到当前作用域上,从而可以做到“未声明先调用”。

      (划重点!等下要考!)

      函数表达式

      这可能是目前用的最多的声明方式,因为可以搭配箭头函数“假装自己在用函数式编程”。

      const func = function(a, b) {
        return a + b
      }
      
      // 箭头函数版本
      const funcA = (a, b) => a + b
      
      func(1,2) // 3
      

      但受变量作用域的关系,所以constlet没有变量提升的能力。

      funcA(1) // ReferenceError: funcA is not defined
      const funcA = a => a
      

      燃鹅,这才刚刚开始…

      函数表达式:匿名 & 具名

      匿名就是上面那种,而具名就是给函数本体再起一个名字。

      const func = function funcName() {}
      

      这样有什么用?后面那个名字又不能用!答案还是有区别的。

      首先有一个函数名推断,例如上面这个函数,那么func.name会返回funcName,如果匿名函数的话[fn].name会返回''(在ES5的情况下,ES6会被推断为外面的函数名)。其次这个名字可以在函数内部使用,当然了指代的就是自己了。

      const func = function funcName(a, b) {
        return a < 0 ? b : funcName(a+1-b, a)
      }
      
      func(431, 151) // 281
      funcName(431, 151) // ReferenceError: funcName is not defined
      console.log(func.name) // funcName
      typeof funcName === 'function' // false
      

      所以这种方式最适合递归函数了。

      函数表达式依然是个常/变量

      关键词已经决定了这个“量”会以什么形式存在,比如varlet是变量,const是常量,并且let还有作用域范围。

      const funcA = () => console.log('A')
      funcA() // A
      funcA = () => console.log('AA') // TypeError: Assignment to constant variable.
      
      var funcB = () => console.log('B')
      funcB() // B
      funcB = () => console.log('BB')
      funcB() // BB
      

      题外话:那么就有个老生常谈的问题了,函数表达式按道理来讲是“灵活的”,那么

      function funcB() {
        console.log('B')
      }
      funcB()
      function funcB() {
        console.log('BB')
      }
      funcB()
      

      两个funcB的结果分别会是什么?

      箭头函数

      又到了大家最最喜欢的箭头函数环节,现在还有谁是不愿意写箭头函数的?

      const func = a => b => a + b
      func(1)(2) // 3
      

      不过,箭头函数两个特点:

      • 不会创造上下文(自身无this
      • 必然是个匿名函数
      • 没有 arguments

      不是两点吗?怎么变成三点了?此时你可能会回去检查刚刚那句话,但是我现在悄悄告诉你,其实是三点。

      关于箭头函数自身无this,有很多文章讲了this的指向相关,可以翻看那些文章得到答案。

      计算属性函数名

      这个应该是在“对象”的环境中存在,毕竟对象可以指代很多种只要是对象的情况。

      const object = {
        ['a' + 'b'](a, b) {
          return a + b
        }
      }
      
      object.ab(1, 2) // 3
      

      这就实现了“函数名可以暂时不知道是什么”的情况,通过计算来得到这个函数。

      Other

      new Function

      这是一个不知道哪里可以用得上但是可以用的方式:通过对象创建

      const func = new Function('a', 'b', 'return a + b')
      func(1, 2) // 3
      

      函数参数初始值

      可能会有参数要初始值的需求,但可能没有

      function func(a = 1, b = 2) {
        return a + b
      }
      
      func() // 3
      

      可能我们更常用的还有这些

      const funcA = (obj = {}) => obj
      
      const funcB = (arr = []) => arr
      

      JavaScript毕竟是「函数是第一公民」的语言,有机会会写到很多高阶函数。所以

      const func = (fn = () => 'YDJFE') => fn.call(null)
      

      凭什么函数作为参数就不能有初始值呢?当然是可以的呀!

      总结

      我只是想用JavaScript写一个方法…为什么这么复杂…

      (关于JavaScript定义方法,如果还有其他姿势欢迎补充~)



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006218355.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    一条回应:“我只是想用JavaScript写一个方法…”

    1. hcl1989说道:

      不错,博主的写的很经典,总结的很好。

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.