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)
    }
}

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

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

反过来也亦然。

看下面的代码,如果要产生两个属性 agename ,但是只能有函数,不能有对象,怎么做?

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阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271