js函数解析

前言

面向工作的深入解析

什么是函数

由一个或者多个语句组成的用来处理特定任务的程序，相对独立，听起来很像是函数吧，但是函数只是子程序的一种类型。

image.png

子程序分为三种：函数、过程、方法
函数是其中一种，剩下两种分别是过程和方法

函数

最显著的特点就是具有返回值，那么可能会有人说了，我在js中写一个函数我不return不就没有返回值了吗，但实际上你不return，js会自动帮你return undefined，也就是说在js中函数必定有返回值

过程

过程实际上就是没有返回值的函数，又因为在js中不存在没有返回值的函数，因此js中不存在过程

在js中只有函数和方法

在js当中只有函数和方法，没有过程这个概念！因为js所有的函数都有返回值！！！
看如下的代码：

function fn() {  //函数
    console.log('x');
}

const a = fn()  //undefined

var obj = {
    fn: fn   //方法
}
函数和过程的区别

如果一个子程序有返回值他就是函数，如果这个子程序没有返回值，就叫做过程，它就是走一个过程，没有任何的返回

方法

与函数、过程的区别就是，方法一般存在于类和对象中(可能也是因为这样，Java朋友总是和我杠说我把方法读成函数了)
在对象或者类中
如果一个子程序存在一个对象或者一个类中，它就叫做方法。

函数的返回值由什么确定？

前面说到在js中，函数永远都有返回值，那么函数的返回值又是由什么去确定的呢?

影响因素

  • 调用时输入的参数 params
  • 定义时的环境env
let x = 'x'
let a = '1'

function f1(x) {
    return x + a
}

{
    let a = '2'
    f1('x')    //输出的结果是什么？
}

解析：在上面的声明中 ，声明了f1这个函数的作用就是返回 x+a 的值。下面的括号中的就是一个独立的作用域。在这个作用域中，传入一个 x ，调用这个f1函数，这里面的x是 'x' ,但是这里的a是谁？是下面的2呢？还是上面的1？
在上面说过函数的影响因素，其中x是参数，所以这个x是可以确定的，就是f1传入的参数，但是这里面的a不确定，因此就看因素2，判断这个a是什么环境的，这里面的a是声明的那边，因此a的值是1 最后的结果就是return x+1 结果就是x1。因为f1调用时候内部没有变量a，应该取外部的a，那么外部的a最近的就是let a = '2'了。

下面在加上一个 a=3呢?

let x = 'x'
let a = '1'

function f1(x) {
    return x + a
}

a='3'；
{
    let a = '2'
    f1('x')    //输出的结果是什么？
}

结果就是x3
道理同上，不同的是在执行到下面的块作用域的时候，a由1 变成了a=3

再比如加上a=4呢

let x = 'x'
let a = '1'

function f1(x) {
    return x + a
}

a='3'；
{
    let a = '2'外面的变量，那么这个函数 + 这些变量 = 闭包
    f1('x')    //输出的结果是什么？
}

a='4'

结果还是x3，为什么？因为执行完块作用域的时候，a=4 还没有执行。

看另一个题目

let x = 'x'
let a = '1'

function f1(c) {
    c()
}

{
    let a = '2'

    function f2() {
        console.log(x + a);
    }

    f1(f2)  //打印什么？？？
}

解析：
这里面的函数f1 就是接受一个函数调用一个函数。然后下面就是独立的块作用域，这里面的函数f2 就是打印x+a，最后一句语句f1(f2),将f2作为参数传到f1里面，这时候f2 调用了，之后打印出来的x+a的值是多少？
函数f2里面没有传进来参数，所以x和a都不是参数，那么这时候看函数的影响因素就是定义了。这时候根据上下文来看 x就是x，a就是这个作用域当中的2，最后的结果就是x2

闭包

  • 闭包的定义

    • 如果在函数里面可以访问到外面的变量，那么这个函数+这些变量=闭包
    • 闭包问题本质上是作用域问题

闭包+时间

这道题的答案让人很费解，结果就是6个6，知道为什么吗？？？

for (var i = 0; i < 6; i++) {
    setTimeout(() => {
        console.log(i) //箭头函数访问了 i
    })
}

因为6个函数共用一个 i

image.png

修改，将var改为let

for (let i = 0; i < 6; i++) {
    setTimeout(() => {
        console.log(i) //箭头函数访问了 i
    })
}

为每个函数分配一个 i ，打印0 1 2 3 4 5

image.png

这道题类似于

let x = 'x'
let a = '1'

function f1(x) {
    return x + a
}

f1()

a='3'；

如果这道题搞不清楚就想想 刻舟求剑。

另一种写法，使用立即执行函数

for (var i = 0; i < 6; i++) {
    !function (j) {
        setTimeout(() => {
            console.log(j) //箭头函数访问了 i
        })
    }(i)
}

为什么这样可以解决，因为每一个函数都是一个独立的作用域。

结论

闭包的特点
  • 能让一个函数维持住一个变量
  • 但不能维持这个变量的值
  • 尤其是变量的值会变化的时候
function f1() {
    const obj = {a: 1};
    return function f2() {
        return obj
    }
}
const b = f1()();

console.log(b);  // 输出的结果为: { a: 1 }

  • 优缺点：

    • 优点: 可以在外部对函数内部的变量进行访问
      -缺点: 返回出来的变量，例如上面例子中的{ a: 1 }，是被保留在内存中的，如果不及时清空的话会造成内存泄漏和性能问题。
对象是穷人的闭包
  • 对象也可以来维持住一个变量
  • 如果一门语言不支持闭包，你可以用对象代理
闭包是穷人的对象
  • 如果一门语言不支持对象，你可以用闭包代理

如何理解上面的话

var obj = {
    i: 0,
    function() {
        console.log(this.i)
    }
}

const handle = function () {
    var i = 0;
    return function () {
        console.log(i)
    }
}

虽然这上面的两段代码用到的技术不一样，一个是对象属性，一个是函数里面的闭包，然后为同一个函数，但是它们都做到了同一个目的，就是把一个变量给维持住，不让其他的人直接操作。当然这个也可以操作，我们可以通过私有的来操作

所以上面的这两段代码就表示了，如果一个语言不支持闭包，怎么办就用对象来操作。

反过来也亦然。

看下面的代码，如果要产生两个属性 age 和 name ，但是只能有函数，不能有对象，怎么做？

function createPerson(age, name) {
    return function (key) {
        if (key === 'name') return name;
        if (key === 'age') return age;
    }
}

var person = createPerson(18, '小红');
person('name'); //小红
person('age'); //18

所以这就是解释了什么叫做闭包是穷人的对象，就是你发现一个语言没有对象，就可以用闭包来实现代替对象。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343