博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS函数知识点梳理
阅读量:6004 次
发布时间:2019-06-20

本文共 3034 字,大约阅读时间需要 10 分钟。

要想学好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)    } };

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

函数的参数

  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. 返回值为函数

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

参考文章

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

转载地址:http://qipmx.baihongyu.com/

你可能感兴趣的文章
抱团发展成云服务厂商共识
查看>>
《高性能科学与工程计算》——3.5 算法分类和访存优化
查看>>
印国有电信企业BSNL致函印度电信部申请700 MHz频谱
查看>>
Cohesity扩大云软件产品组合 目标直指云未来
查看>>
阿里云跨界合作芒果TV 粉丝看明星也用云计算
查看>>
教你一招CRM成功实施的方法!
查看>>
数据中心网络攻击形态漫谈
查看>>
单元测试实施解惑(一)
查看>>
《编写高质量代码:改善c程序代码的125个建议》——建议18-2:整型变量应该直接与0进行比较...
查看>>
灵活的 WEB 下拉组件 TinySelect
查看>>
微软携手红帽拥抱开源,开拓混合云新疆域
查看>>
《CCNP ROUTE 300-101认证考试指南》——8.8节定义关键术语
查看>>
《软件建模与设计: UML、用例、模式和软件体系结构》一一1.1 软件建模
查看>>
JavaScript 跨域请求库 XDomain
查看>>
《嵌入式系统开发之道——菜鸟成长日志与项目经理的私房菜》——02-03项目生命周期五大阶段...
查看>>
《例说51单片机(C语言版)(第3版)》——1-7 实时练习
查看>>
Docker CE 镜像源站
查看>>
《HBase企业应用开发实战》—— 1.3 HBase与Hadoop的关系
查看>>
Web 开发中 20 个很有用的 CSS 库 【已翻译100%】
查看>>
漫画:如何分别使用8种编程语言拯救公主
查看>>