07 js02 函数

函数 封装代码实现某个功能,最初思路解决代码重复度高的问题,类似于变量(就是一个筐,往里面填充内容即可) 【编程思想:高内聚、低耦合】【聚焦点:参数和返回值,后续就是函数的嵌套,才延生出作用域、闭包等问题,然后寻求解决方案】

1、函数的基本认知:

(1).函数声明、调用:function test(){};  test: 函数名/函数引用; test(); 函数执行;[function/var 都是关键字; 函数名命名规则:小驼峰规则(并非是语法规则,而是开发规范)]【functiontheFirstName(){}  document.write(theFirstName);// 打印出函数体,绝对不是地址,区别于编译性语言,解释性语言是打印不出地址的】

(2).函数表达式:指代的便是匿名函数表达式;

07 js02 函数_第1张图片

(3).参数的使用:使函数功能更加丰富;[形参==> 函数内隐式var了多个变量,形参和实参都是变量,它们可以是变量的任何类型:原始值/引用值,取决于函数封装的代码要实现的功能]

参数个数问题、实参列表;[实参与形参传递时最好要相互对应,要不后续会遇到函数内部封装好的对象,event/error等的使用,避免出错]  

07 js02 函数_第2张图片

映射规则、特殊性;[arguments:每个函数内部系统都会隐式定义一个实参列表,实参都有地方存放,console.log(arguments)]

07 js02 函数_第3张图片

例子:

07 js02 函数_第4张图片

(4).return(函数结束条件及返回值,如果不写 -> 函数末尾隐式添加 return undefined;)

07 js02 函数_第5张图片

(5).作用域:全局变量/局部变量的访问规则:

嵌套函数:里面可访问外面,外面不可访问里面;两个相互独立的函数也不可互相访问;

补充:定义函数的方式:

[1].函数声明;[2].函数表达式(匿名函数表达式);[3].使用对象Function,类似Number/Boolean/String/Array/Object;(了解即可)

[4].函数在对象中的使用,称为方法;[5].匿名函数function(){},箭头函数() => { }; 这两种一般作为回调函数使用(作为其他函数的参数),或者当作立即执行函数使用;

箭头函数:() => {};  => 表示函数中的大括号,{ } 函数体;( )函数参数,当函数只有一个形参()可省略,当函数体只有一条语句时,{}可省略,若有return,return单词也可省略;最好都别省略;

07 js02 函数_第6张图片

2、递归:有很强抽象规律使用,阶乘、斐波那契数列是典型的两个案例;[递归可以使代码更加简捷,缺点:运行速度较慢,往往有很强抽象规律才使用]

 【1.找规律;2.找出口,防止进入死循环】

//使用过程中,只需要在函数体内写入:return 公式  就OK;(尽量做到灵活使用,但其确实不容易想到,后续有些地方会用到递归的思想,例如:算法)

07 js02 函数_第7张图片
07 js02 函数_第8张图片

3、预编译:解决代码执行顺序问题;【聚焦点:GO全局形成、AO函数执行前形成,聚焦在变量】

js运行三部曲: 语法(语义)分析、预编译、解释执行;

(1).语法分析:检查代码是否有低级错误,若出现低级语法错误,则不执行;[关于错误后还有更文]

(2).预编译:代码执行前一刻需要进行预编译,全局的预编译/函数执行前的预编译;[日常开发编写代码是视觉效果展示,计算机执行过程是遵循预编译的顺序执行,预编译生成的对象就是一个空间存储库]

(3).解释执行;

window全局对象的整体认知:【补充:undefined:声明了但没值,例如console.log(window.a);其也是对象中很特殊的一类现象,a is not defined; 压根就不存在该变量】

07 js02 函数_第9张图片
07 js02 函数_第10张图片
window就是全局

预编译:变量声明提升、函数声明整体提升都只是预编译中的现象而已;一般遇到代码执行问题,上述两条就可以解决,不容易解决时创建GO、AO对象分析;[GO对象就是window对象,表示全局]

[定义变量=变量声明+变量初始化(赋值)  var a; //变量声明    a = 10; //变量初始化   var a=10; //定义变量 ]

07 js02 函数_第11张图片

先形成GO对象,再形成AO对象;[代码包含无非就是:变量、函数、语句,GO对象是在全局时候形成的,AO对象是函数执行前一刻形成的,一定要善于区分,函数输出的变量是全局还是AO]

07 js02 函数_第12张图片
07 js02 函数_第13张图片

升华例子1:函数执行前形成的AO对象中肯定会有变量b的声明,即使函数中该变量在if条件判断语句中,预编译过程中形成的对象就是后续代码执行的依据,符合条件的提升就OK;

07 js02 函数_第14张图片

升华例子2:关于代码执行顺序可以get到一些点(例子1显然返回函数、例子2因为有赋值,所以返回的是值),总之灵活应对;

07 js02 函数_第15张图片

【补充:如上console.log(bar);//输出整个函数;bar:函数名/函数引用;console.log(bar());  - - - > 输出函数执行结果】

----------->>>>>>生成的GO/AO对象放到什么地方?函数中里面的可访问外面的,外面的却不可访问里面的这类现象的底层逻辑是什么?[之前查找变量是从GO/AO对象中查找,底层实际是从函数的作用域链中去查找]

4、作用域、作用域链精解:【聚焦点是:函数嵌套时变量的查找】

【window:全局的域;函数都有自己的独立作用域】

每个函数都有自己的作用域链;产生的执行期上下文的集合形成了作用域链中,访问变量的顺序也遵循该链;里面可访问外面,外面无法访问里面;

一个函数只有执行的时候,产生AO对象,系统才能看到里面的东西,否则定义阶段根本就看不到里面的东西;只有执行的时候才开始读取函数里面的内容;

(1).函数也是对象(函数类对象):对象都有属性,有些属性我们可以直接访问test.name/prototype;但有些属性是不可直接进行访问,仅供javaScript引擎读取,[[scope]]就是其中的一个,test[[scope]];

[[scope]]:每个函数都有该属性,称为作用域,其内部存储了运行期上下文的集合,这个集合呈链式链接,就是作用域链;

运行期上下文:也称为执行期上下文,当函数执行的前一刻,会创建执行期上下文的内部对象,也就是预编译时产生的GO/AO对象;[函数每次执行时都会创建新的执行期上下文(对象),所以多次调用一个函数会创建多个执行期上下文,当函数执行完毕后,所产生的执行期上下文被销毁,这里的销毁指代的是引用销毁,而非代码直接销毁]

查找变量:从作用域链的顶端依次向下查找;

(2).过程剖析:

07 js02 函数_第16张图片

[1].函数定义的过程中函数的作用域便已经存在,即[[scope]]已经存在;首先生成GO对象,这时候a函数被定义,定义的过程中作用域链中 0 -->> GO对象;[函数定义的阶段(GO对象生成的过程),系统根本不会关注函数体里面的内容,不会解析,生成AO对象才开始分析函数体里面的内容]

07 js02 函数_第17张图片

[2].GO对象形成后,开始执行代码----->>a();--->>>函数执行前一刻形成AO对象,此时的作用域链中0 --->> AO对象;  1 --->>GO对象;新形成的AO对象会在作用域链的顶端;[执行过程中查找变量肯定是在作用链中去查找,先找自己AO对象,再查找GO对象,即从作用链顶端以此向下查找]

07 js02 函数_第18张图片

[3].a函数的执行过程中,b函数开始定义(预编译过程);定义的时候b函数会产生自己的[[scope]],其的作用域链环境是a函数给的,也就是a函数执行时候的环境;

07 js02 函数_第19张图片

[4].b函数执行中会产生自己的AO对象,然后放置到自己作用域链的最顶端;

07 js02 函数_第20张图片

[5].b函数执行结束后,销毁自己的执行期上下文对象即AO对象(回归到被定义的状态,如果有二次执行,再形成新的AO对象,执行的过程中创建AO对象,执行结束后销毁相应的AO对象即可)所谓的销毁并非是直接把AO对象抹掉了,而是把线剪断;[b函数作用域链中拿到的a函数执行过程中的作用域链,它们指向是相同的,只不过是生成自己的AO对象而已]

07 js02 函数_第21张图片

[函数内查找变量的过程:在函数自己的作用域链中自顶向下找,里层函数可访问外层函数的变量,但外层函数绝对不可能访问到里层函数的变量,外层函数作用域链中自己的AO与外层的环境,自己的AO对象只有里层函数的定义,定义阶段系统又不解析函数体内部,所以压根找不到函数里面的变量]

[6].b函数执行结束后,代码中a函数也执行结束了,a函数需要销毁自己的执行期上下文对象,回归到被定义的状态,销毁AO对象的同时,b函数定义也被销毁了,也就是b函数彻底结束了,作用域链中没东西了;

07 js02 函数_第22张图片

[7].若是a函数再次执行,需要从新开始,创建AO对象等一系列操作同上;若是函数内嵌套了多个函数,最里面的函数作用链会很长,当最外面函数执行完成后,里面的函数连定义状态都没有了,作用链为空; ---->>>>> 但有特殊情况,函数执行完成后却把里面的函数return出去了,形成闭包;

5、闭包:其是一类现象;函数嵌套中外部函数结束执行时,内部函数由于被return到了外部,依旧存活,内部函数生命周期比外部函数还长;【内部函数被保存到外部就会形成闭包,但这个过程很容易被忽视】

过程分析:[1].a函数结束执行后,return b;b函数依旧属于被定义的状态,环境是a函数执行时的作用域链,这时候b函数依旧可以操作外面函数的变量(作用域链的原因);[若是只是普通的在a函数外部定义的函数,由于作用域的原因,其必然是不能访问a函数中的变量的,但闭包可以]

07 js02 函数_第23张图片
07 js02 函数_第24张图片

闭包:函数执行结束会释放作用域链占用的空间,但若是函数嵌套多层,形成闭包则会导致原有作用域链不释放,占用内存空间(也称为内存泄漏【现象一致:都是占用内存,剩余内存少了】);闭包有坏处需要防治,但也有很好的应用场景来实现一些功能;

闭包的作用:

(1).实现公有变量:函数累加器;[return demo;demo的作用域链是add函数执行时的环境,指向的就是同一套,demo();每次指向环境没变只是创建了新AO对象而已,所以每次操作都会改变原来的值]

07 js02 函数_第25张图片

(2).可以做缓存;(缓存就是存储结构)

07 js02 函数_第26张图片

(3).可以实现封装、属性私有化;

(4).模块化开发、防止污染全局变量;,





闭包的bug以及解决方案:[下式是经常会遇到的一种闭包情况,高频触发,经常会被忽视] 考虑过程中需要结合预编译、作用域链、闭包的知识,开始写GO/AO对象分析,后续尽量抽象化去分析;      myArr = [function (){console.log(i} ......] //里面10个相同的函数;myArr[j]();这时候才开始执行函数,i自身AO对象中没有,沿着作用域链找test中有,此时i为10;【里面函数与test() 形成10对1的闭包】

07 js02 函数_第27张图片

闭包的解决方案:立即执行函数(其也是唯一的解决方案);[每循环一次立即执行函数就执行,过后销毁,但销毁并非是把里面的代码给抹掉了,只是把引用抹掉了而已,循环了10次,有10个不同的立即执行函数] [立即执行函数虽然销毁,但最终把里面的函数弄了出来,其和立即执行函数形成了闭包,j自身没有就从立即执行函数中查找] 【里面函数与立即执行函数形成:1对1的闭包】

07 js02 函数_第28张图片

6.立即执行函数(也称为函数的自执行):该函数执行过后就销毁便不存在了;[js中提供立即执行函数来处理那些只执行一次的函数,有些函数内容巨长会占用内存][所谓的销毁并不是直接把代码抹掉了,而是把函数的引用抹掉]

[无论如何有的函数只执行一次(只被执行一次,我们想要其执行一次,或者执行一次返回结果的函数),我们称之为初始化函数或初始化功能,例如开发中的数据进行初始化等,初始化后该函数就没用了]

常规用法:[立即执行函数没有函数名,函数名没什么用处,写上倒也不会报错]

07 js02 函数_第29张图片

拓展(深挖底层原理):只有表达式才能被执行符号执行,执行后基本就是立即执行函数了; [function test(){}();//报错; test();不报错,test代表着函数体,为什么两者结果不同? 原因:test也是表达式,例如123是数字表达式];

var test = function(){ console.log('a');}();//表达式加上执行符号,执行过后就销毁console.log(test);//undefined;

07 js02 函数_第30张图片

回归到最初所提到的:(function (){} ()); (function (){})();这两种立即执行函数形式,可以理解为外面的括号将函数声明变为了表达式,然后被执行符号执行,变为立即执行函数;

07 js02 函数_第31张图片

升华例子:括号首先把函数声明变为了表达式,然后执行if条件判断;(开发中也没有人这么写)

07 js02 函数_第32张图片

你可能感兴趣的:(07 js02 函数)