阅读 500

深入理解javascript系列(十二):函数与函数式编程(1)

函数是Javascript的基础语法之一,当然,也是最重要的,是我们必须要掌握好的知识点之一。

前几个所记录的执行上下文、作用域、变量对象、闭包、this等知识点,其实都是在围绕函数在展开(知道这一点,个人觉得非常重要)。

之前的笔记可以说都是在进一步认识函数,而这次开始,则是认识函数之后,来使用函数了。

在之前的学习中,我们学习了那么多函数的本质,是时候来做个总结了。

1、在实际开发中,需要用函数来做些什么?

2、可以用函数的这些特性玩哪些东西?

3、要怎样使用函数才能让代码更加清晰、直观与合理?

好吧,还是来让我们进一步学习奇妙的函数吧。

12.1  函数

在实际开发中,经常能遇到的函数形式大概有四种,分别是函数声明、函数表达式、匿名函数与函数自执行。

可能大家对这几种常见的函数形式已不在陌生,但是我还是专门总结一下吧。

1、函数声明

函数声明是指利用function关键字来声明一个函数。

function fn() {
    console.log('hello');
}复制代码

在变量对象的创建过程中,function声明的函数比var声明的变量有更加优先的执行顺序,即我们常常提到的变量提升。因此在同一执行上下文中,无论在什么地方声明了函数,都可以直接使用。

2、函数表达式

函数表达式其实是将一个函数体赋值给一个变量的过程。

var fn = function() {};复制代码

因此,我们理解的函数表达式只需把他当作变量声明去理解

//创建阶段
var fn = undefined;
//执行阶段
fn = function() {};  复制代码

如果你比较喜欢使用函数表达式,那么一定要有一个良好的编码习惯,以规避变量提升带来的负面影响。

函数体赋值的操作在其它很多场景中都能够遇到,如下:

function Person(name) {
    this.name = name;
    this.age = age;

    //在构造函数内部添加方法
    this.getAge = function() {
        return this.age        
    }
}


//给原型上添加方法
Person.prototype.getName = function() {
    return this.name;
}

//在对象中添加方法
var a = {
    m: 20,
    getM: function() {
        return this.m 
    }
}复制代码

3、匿名函数

顾名思义,就是没有名字的函数,一般会作为一个参数或者作为一个返回值来使用,通常不使用变量来保存它的引用。常见场景如下:

(1)setTimeout中的参数

var timer = setTimeout(function() {
    console.log('xxxxxx')
},1000);复制代码

(2)数组方法中的参数

var arr = [1,2,3];

arr.map(function(item) {
    return item + 1;
})

arr.forEach(function(item) {
    //todo
})复制代码

(3)匿名函数作为一个返回值

function add() {
    var a = 10;
    return function() {
        return a + 1;
    }
};

add()();复制代码

4、自执行函数

自执行函数是匿名函数一个非常重要的应用场景。因为函数会产生独立的作用域,因此我们常常利用自执行函数来模拟块级作用域,并进一步在此基础上实现模块化的运用。

(function() {
    //....
})();复制代码

模块化的重要性,我们应该时刻提醒自己,并且在学习过程中,应慢慢养成对于模块化思维的一个认知和习惯。因此,虽然在上一个系列已经简单说过模块化了,但这里任然要借助自执行函数来了解模块化。

一个模块可以包括:私有变量、私有方法、公有变量、公有方法。

当我们使用自执行函数创建一个模块时,也就意味着,外界已经无法访问该模块内部的任何属性和方法了。好在有闭包,作为模块之间能互相通信的桥梁,让模块能够在我们的控制下选择性地对外开放属性与方法。

(function() {
    //私有变量
    var age = 18;
    var name = 'pan';
    
    //私有方法
    function getName() {
        return 'my name is ' + name;
    }

    //公有方法
    function getAge() {
        return age;
    }

    //将引用保存在外部执行环境的变量中,这是一种简单的对外开发方法的方式
    window.getAge = getAge;
})();复制代码

这些都是我以往的学习笔记。如果您看到此笔记,希望您能指出我的错误。有这么一个群,里面的小伙伴互相监督,坚持每天输出自己的学习心得,不输出就出局。希望您能加入,我们一起终身学习。欢迎添加我的个人微信号:Pan1005919589


关注下面的标签,发现更多相似文章
评论