JS函数知识点梳理

要想学好JavaScript除了基本的JavaScript知识点外,作为JavaScript的第一等公民——函数,我们要深入的了解。函数的多变来源于参数的灵活多变和返回值的多变。如果参数是一般的数据类型或一般对象,这样的函数就是普通函数;如果函数的参数是函数,这就是我们所要知道的高级函数;如果创建的函数调用另外一部分(变量和参数已经预置),这样的函数就是偏函数。

此外,还有一点就是可选参数(optional parameter)的使用。

函数的分类

  1. 普通函数

有函数名,参数,返回值,同名覆盖。示例代码如下:

function add(a, b) {
    return a + b;
}
  1. 匿名函数

没有函数名,可以把函数赋值给变量和函数,或者作为回调函数使用。非常特殊的就是立即执行函数和闭包。

立即执行函数示例代码如下:

(function(){
    console.log(1)
})()

闭包示例代码如下:

var func = (function() {
    var i = 1;
    return function() {
        console.log(i);
    }
})()
  1. 高级函数

高级函数就是可以把函数作为参数和返回值的函数。如上面的闭包。ECMAScript中也提供大量的高级函数如forEach(), every(), some(), reduce()等等。

  1. 偏函数

    function isType(type) {
        return function(obj) {
            return toString.call(obj) === "[object " + type + "]"
        }
    }
    
    var isString = isType(‘String‘);
    var isFunction = isType(‘Function‘);

    相信,研究过vue.js等常见库源码的同学不会陌生吧。

    1. 箭头函数

    箭头函数不绑定自己的this,arguments,super。所以它不适合做方法函数,构造函数,也不适合用call,apply改变this。但它的特点就是更短,和解决匿名函数中this指向全局作用域的问题

    window.name = ‘window‘;
    var robot = {
        name: ‘qq‘,
        print: function() {
            setTimeout(function() {
                console.log(this.name);
            }, 300)
        }
    };
    // 修改1,用bind修改this指向
    var robot = {
        name: ‘qq‘,
        print: function() {
            setTimeout(function() {
                console.log(this.name);
            }.bind(this), 300)
        }
    };
    // 修改2,使用箭头函数
    var robot = {
        name: ‘qq‘,
        print: function() {
            setTimeout(() => {
                console.log(this.name);
            }, 300)
        }
    };

    想了解更多箭头函数可以看MDN

    函数的参数

    1. 传入明确的参数

      function add(a, b) {
      
          reutrn a + b;
      }
      1. 使用arguments对象

        function add() {
            var argv = Array.prototype.slice.apply(arguments);
            return argv.length > 0 ? argv.reduce(function(acc, v) { return acc+=v}): ‘‘;
        }
        1. 省略参数,参数默认值

          function sub(a, b) {
              a = a || 0;
              b = b || 0;
              return a - b;
          }
          1. 对象参数

            var option = {
                width: 10,
                height: 10
            }
            
            function area(opt) {
                this.width = opt.width || 1;
                this.height = opt.height || 1;
                return this.width * this.height
            }

            对象参数比较常见,常出现在jQuery插件,vue插件等中。

            1. 可选参数

            ES5实现可选参数,我们需要使用arguments。使用指定范围的可选参数我们一般使用发对象参数,写过jQuery等插件的应该印象深刻。

            1. ES6中的函数参数

            在ES6中,参数默认值,省略参数操作使用比较简便。示例代码如下:

            var area = (width=1, height=1) => width*height

            在ES6中,使用可选参数。示例代码如下:

            var add = (...nums) => {
                var numArr = [].concat(nums)
                return numArr.reduce((acc, v) => acc += v)
            }
            1. 解构参数

              myFunc = function({x = 5,y = 8,z = 13} = {x:1,y:2,z:3}) {
                  console.log(x,y,z);
              };
              
              myFunc(); //1 2 3  (默认值为对象字面量)
              myFunc({}); //5 8 13   (默认值为对象本身)

              函数的返回值

              1. 函数的返回值为基本数据类型,如字符串,数字,Boolean,null,undefined。示例代码如下:

                function add(a, b) {
                    return a + b
                }
                1. 函数的返回值为对象。示例代码如下:

                  function Robot(name) {
                      this.name = name
                  }
                  
                  Robot.prototype.init = function() {
                      return {
                          say: function () {
                              console.log(‘My name is ‘ + this.name)
                          }.bind(this),
                          dance:  function(danceName) {
                              console.log(‘My dance name is ‘ + danceName)
                          }
                      };
                  }
                  
                  var robotA = new Robot(‘A‘);
                  robotA.init().say(); // "My name is A"
                  var robotB = new Robot(‘B‘);
                  robotB.init().say(); // "My name is B"

                  不管是写原生还是jQuery插件,亦或其他插件,这种情况都不少见。更深入的了解可以参考jQuery源码。

                  1. 返回值为函数

                  这个我们最为熟悉的莫过于闭包。具体可参考 老生常谈之闭包

                  参考文章

                  JS: How can you accept optional parameters?

                  Named and Optional Arguments in JavaScript

                  How to use optional arguments in functions (with optional callback)

                  后续可能还会继续修改,也欢迎各位批评指正。有问题或者有其他想法的可以在我的GitHub上pr。

原文地址:https://www.cnblogs.com/zzgyq/p/8535287.html

时间: 2024-10-24 22:41:00

JS函数知识点梳理的相关文章

js函数知识点(一)

一.函数声明的方式 function 函数名(参数列表){ 函数体; return 返回值}   问题:会被声明提前 给出以下解决方案: var函数名=function (参数列表){ 函数体; return 返回值}   不会被声明提前 var 函数名=new Function("参数1","参数2",...,"函数体;...") 强烈不推荐使用,因为这种方式会导致解析两次代码,影响性能. 有关这三种声明方式的区别,可以看这篇博文学习:http

JS核心知识点梳理——闭包

闭包 闭包这个东西咋说呢,不同的程序员,不同的资料都有不同的解释,你可以把它理解成一个函数,也可以把它理解函数+执行环境. 我们这里不纠结闭包的定义,而是关注闭包的现象,应用,再结合相关面试题去攻克它,最后谈一下我对闭包的理解. 现象 之前说过,函数执行,生成执行环境,函数执行完,销毁执行环境.嗯,听上去很正常,不用的东西就销毁嘛. 但是如果函数执行完,该函数上下文还用怎么办,有用的东西肯定不敢销毁了,这个就是闭包的现象,那么引起这个现象的鄙人就把它理解成闭包! 1 function foo (

[独孤九剑]Oracle知识点梳理(十)%type与%rowtype及常用函数

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs

【前端芝士树】Vue.js面试题整理 / 知识点梳理

[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View 代表UI 组件,它负责将数据模型转化成UI 展现出来. ViewModel 监听模型数据的改变和控制视图行为.处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View. 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewM

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od

Javascript重要知识点梳理

Javascript重要知识点梳理 说明 Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for Javascript常用函数 1.  字符串函数 substring indexOf lastIndexOf charAt replace split toLowerCase toUpperCase 2.  数学运算函数 3.  数据类型转换函数 parseInt parseFloat Math.abs Mat

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

[独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(八)常见Exception

[独孤九剑]Oracle知识点梳理(八)常见Exception

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs