javaScript函数模块详解

javaScript函数模块详解

​ 函数实际上是对象，每个函数都是Function类型的实例，而Function也有属性和方法，和其他引用类型一样

可以将函数名想象成指针，函数想象成对象

​ 注意，严格模式下函数有以下规定：函数不能以eval或arguments作为名称，同样他们俩也不能做参数名，函数参数不能同名

//函数声明
//js引擎会在任何代码执行之前，先读取函数声明并在执行上下文中生成函数定义，叫做“函数声明提升”
function test(a,b){}
//函数体
//必须等到代码执行的那一刻才会在执行上下文中生成函数定义，用var和let都是这样
//1、命名函数表达式var test=function test(){}
//2、匿名函数表达式 --> 函数表达式var test = function (){}
//3.箭头函数let test = () => {}
//4.Function构造函数（不推荐）
//接收任意多个字符串参数，最后一个参数始终会被当成函数体，之前的参数都是函数参数
let test = new Function("arg1", "arg2", "return arg1 + arg2")
//这段代码会被解释两次：第一次将它当作常规ECMAScript代码，第二次解释传给构造函数的字符串
return：终止函数、返回值

作用域：变量和函数生效（能被访问的）的区域

没有重载

同一个函数被定义多次，那么，最后一个会覆盖之前所有的定义

箭头函数

• 任何可以使用函数表达式的地方，都可以使用箭头函数

• 箭头函数非常适合嵌入式场景，因为其简洁的语法

• 只有没有参数或者多个参数的情况下，才需要使用括号

• 箭头函数也可以不用大括号，如果不使用大括号，箭头后面只能由一行代码，例如一个赋值操作、或者一个表达式，而且会隐式返回这行代码的值

• 注意：箭头函数不能使用arguments、super和new.target，也不能用作构造函数，更没有prototype属性

函数名

​ ECMAScript6的所有函数对象都会暴露一个只读的name属性，其中包含关于函数的信息。大多数情况下，这个属性中保存的就是一个函数标识符，或者说是一个字符串化的变量名，即使函数没有名称也会如实显示成空字符串。如果他是Function构造函数构建的，则会标识成“anonymous”

​ 如果是一个获取函数、设置函数，或者使用bind()实例化，那么标识符前面会加上相应的前缀bound foo、get foo、set foo

参数、arguments

实参在函数里被存在列表arguments（类数组对象）里，形参和实参没有强制规定个数

function abc(a){
	console.log(arguments)
}
abc(1,2,3)
arguments = [1,2,3] //实参列表

在形参和列表arguments存在一种映射，某个值改变相应的另一个值也改变

但是形参和arguments在内存中是分开的

function sum(a,b){
	a = 2
	console.log(arguments[0])
	arguments[0] = 4
	console.log(a)
}
sum(1,3)
2
10
4

但是如果函数一开始就没有存在的映射并不会有此效果

function sum(a,b){
	b = 2
	console.log(arguments[1])
}
sum(1)  //只传一个实参情况
//undefined

严格模式下，给arguments赋值不会再影响形参的值；在函数中尝试重写arguments对象会导致语法错误

function sum(a,b){
	a = 2
    console.log(arguments[0])
    arguments[0] = 4
    console.log(a)
}
sum(1,3)
//1
//10
//2

arguments.callee

指向arguments对象函数所在的指针

function test(num) {
	if (num < 1) {
    	return 1
        } else {
        	return num * test(num - 1);
		}
}//这样只能调用名称为test的函数，如果函数名变化就会出现相应问题
let trueTest = test
test = function() {return 0;}
test(5)  //0
trueTest(5)  //0，因为trueTest函数里会调用test()
//下面可以避免这种情况
function test(num) {
    if (num < 1) {
        return 1;
        } else {
            return num * arguments.callee(num - 1)
        }
}
let trueTest = test
test = function() {return 0;}
test(5);  //0
trueTest(5);  //120

默认参数值

​ ES5.1以前需要手动检测某个参数是否为undefined，ES6之后就能显式定义默认参数了

但是这样将会断开形参与arguments之间的同步映射（只要有一个形参有默认值就会这样）

function test(name = 'lsn') {
	console.log(name)
    console.log(arguments[0])
}
//给函数传undefined相当于没有传值，也就是arguments不会和name建立联系
test(undefined);
//lsn
//undefined

function test(name = 'lsn', say) {
	name = 'haha'
    say = 'lll'
    console.log(arguments[0], arguments[1])
}
test('foo', 'l')
//foo

默认参数值不一定是原始值或对象类型，可以是调用函数后的返回值function test(name = getName()) {}

这个getName()求值函数只有在test()函数被调用的时候才会运行求值，test()函数定义时不会

箭头函数也能使用默认值，不过在只有一个参数时就必须加括号了

默认参数作用域与暂时性死区

​ 先定义的默认参数可以被后面的命名参数使用，但是不能被前面的命名参数使用，这里和按顺序let定义let是一样的

function test(name = 'lsn', val = 'foo') {}
//同下
function test() {
    let name = 'lsn'
    let val = 'foo'
}

function test(name = 'lsn', val = name) {}
//这里val就等于lsn

//参数有自己的作用域，所以不能使用函数体的作用域
//function test(name = hi) {
//    let hi = 'lsn'
//}
//上面这种会报错

扩展参数

使用扩展操作符会将可迭代对象拆分，并将迭代返回值每个单独传入

function test() {
    console.log(arguments.length)
}
test([0, 1])	//1
test(...[0, 1])	//2

收集参数

正好和扩展参数相反，会得到一个Array实例,但是不影响arguments

function test(...value) {
    console.log(value)
}
test(1, 2, 3)	//[1, 2, 3]
//Arguments(3) [1, 2, 3, callee: (...), Symbol(Symbol.iterator): ƒ]

this

​ 在标准函数中，this引用的是把函数当成方法调用的上下文对象（如在全局调用函数时，this指向window）

​ 在箭头函数中，this引用的是定义箭头函数的上下文，而且因为箭头函数默认不会使用自己的this，而是会和外层的this保持一致（看作箭头函数this指向的是外层this所指向的对象），并且箭头函数的this是不可改的

window.color = 'red'
let o = {
    color: 'blue'
}

function say() {console.log(this.color)}
say()	//red
o.say = say
o.say()	//blue

let say1 = () => {console.log(this.color)}
say1()	//red
o.say1 = say1
o.say1()	//red

传递参数

​ 因为原始值和引用值存储方式不一样，函数中传参方式有区别，原始值为按值传递，即复制一份副本传入到参数中；而引用值则会将引用值的堆内存位置复制到参数中。

​ 两者其实和复制值是一样的，上文有解释

arguments（ES5严格模式下不允许使用）

1、callee

能够调用当前function（严格模式下访问会报错）

function test () {
    console.log(arguments.callee)
}

test()

阶乘

var num = (function (n) {
    if(n == 1) {
        return 1
    }
    return n * arguments.callee(n-1)
}(100))

2、caller

es5会给函数对象上添加这个属性，基本浏览器早期版本都支持这个属性

引用当前函数被调用的环境，如果是全局作用域中调用则为null

function test () {
    demo()
}

function demo () {
    console.log(demo.caller)
}

test()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZKCxhK73-1639121328208)(https://dlnu19javastudy.yuque.com/api/filetransfer/images?url=https%3A%2F%2Fimg.samuel-luo.space%2Fimage-20210521103642552.png&sign=963641474beb54b91594613f8c60db1bcc09672aeeb134261b2b498257cd5613)]

如果要降低耦合度，则可以通过arguments.callee.caller来引用同样的值

new.target

在函数里调用，如果该函数是使用new关键字调用的，则target会引用被调用的构造函数，如果该函数被当成普通函数运用，则返回undefined

function test() {
    if (new.target) {
        throw 'hello'
    }
}
new test()	//hello
test()	//

属性

每个函数都有两个属性：length和prototype

length：该属性保存函数定义的命名参数的个数

function test(helo) {}
test.length	//1

prototype：该属性不可枚举，所以使用for-in不会返回这个属性

apply()、call()

这两个方法可以改变函数内this的引用，下文有详细说明

fun.apply(obj, arguments)	//可以是Array实例也可以是arguments对象
fun.call(obj, ...arguments)	//参数必须一个个分开

在严格模式下，调用函数如果没有指定上下文对象，则this值不会指向window。除非使用apply()或call()把函数指定给一个对象，否则this值会变成undefined

函数表达式

任何时候，把函数当作值来用，他就是一个函数表达式

递归

阶乘

function mul(n){
	if(n == 1){
		return 1
	}
	return n * mul(n-1)
}

斐波那契数列

function fb(n){
	if(n == 1 || n == 2){
		return 1
	}
	return fb(n-1) + fb(n-2)
}

但是这样直接用函数名可能会有问题，因为如果这个变量被赋值为null则会报错，所以建议使用arguments.callee

但是在严格模式下，不能访问arguments.callee，所以这里可以用命名函数表达式

尾调用优化

es6规定如果一个函数的返回时另一个函数的返回，则执行尾调用优化，具体如下

function outter() {
    return inner()	//尾调用
}

上述代码在es6中优化如下：
1、执行到outter函数体，第一个栈帧被推到栈上
2、执行outter函数体，到达return语句。为求值语句，必须先求值inner
3、引擎发现把第一个栈弹出栈外也没关系，因为inner的返回值也是outter的返回值
4、弹出outter的栈帧
5、执行到inner函数体，栈帧被推到栈上
6、执行inner函数体，计算其返回值
7、将inner的栈帧推出到栈外

现在的浏览器没法测试尾调用优化是否起作用，但是这个是es6规范所规定的

尾调用优化条件

代码在严格模式下执行、外部函数的返回值时对尾调用函数的调用，尾调用函数返回后不需要执行额外的逻辑、尾调用函数不是引用外部函数作用域中自由变量的闭包

尾调用优化很适合递归，因为递归代码最容易在栈内存中产生大量栈帧

之所以要求严格模式，主要是因为非严格模式下函数调用允许使用f.arguments和f.caller，而它们都会引用外部函数的栈帧

立即调用的函数表达式（IIFE，Immediately Invoked Function Expression）

定义后立即执行，执行完立即释放，不占用内存

(function (){
   //... 
}())
或
(function abc(){
   //... 
}())
或
(function abc(){
   //... 
})()
//W3C建议前两种执行方式
//只有表达式才能被执行符号"()"执行，function test(){}();这种将不会执行，因为()前方是函数定义式；var test = function (){}();这种将会执行，并且和立即执行函数没有区别
//被执行符号执行的表达式将会自动放弃函数的名称
//+ function (){}();这种将会执行，+ - ！等都可以
//()可以是数学优先表达式所以(function (){})()、(function (){}())首先是数学表达式()将函数定义式转化为表达式，然后就可被执行

如果传参
(function abc(a,b){
   //... 
}(a,b))

如果要返回值
var abc = (function abc(a,b){
    //... 
    return 12
}(a,b))

在es5.1以前，为了防止定义的变量外泄，常常用IIFE，但是es6以后就可以用块级作用域了

//内嵌块级作用域
{
    let i
    for (i = 1; i < count; i++) {
        console.log(i)
    }
}
console.log(i)	//报错

//循环块级作用域
for (let i = 0; i < count; i++) {
    console.log(i)
}
console.log(i);//报错

私有变量

私有变量和特权方法、静态私有变量、模块模式模块增强模式（详情请看红宝书p316）

预编译：在函数执行的前一刻发生（生成函数上下文）

1、创建AO（Activation Object）对象 [翻译：执行期上下文]

2、找形参和变量声明，将变量和形参名作为AO的属性名，值为undefined

3、将实参和形参相统一

4、找函数体的函数声明，赋值于函数体

5、创建arguments和this，这个this指向window（）

function fn(a){
    console.log(a)
    var a = 123
    console.log(a)
    function a(){}
    console.log(a)
    var b = function (){}
    console.log(b)
    function d(){}
}
fn(1)

//step1
    AO{

    }
//step2
    AO{
        a:undefined,
        b:undefined,
    }
//step3
    AO{
        a:1,
        b:undefined,
    }
//step4
	AO{
        a:function a(){},
        b:undefined,
        d:function d(){},
    }
 //step5
     AO{
         arguments:[],
         this:window,
         a:function a(){},
         b:undefined,
         d:function d(){},
     }

//执行函数体(控制台打印)
f a(){}
123
123
f (){}

全局对象没有形参，所以没有第三步，而且第一步创建的是GO（Global Object）对象，

GO === window

console.log(a)
var a = 123
//控制台输出：undefined

console.log(a)
//控制台输出：error: a is not defined

test()
function test(){
	console.log("test")
}
//控制台输出：test

程序优先找自己所拥有的变量，在函数中优先AO中的对象，如果没有则向父级寻找，例如GO

注意：预编译不管有没有if ，只看声明

console.log(a) //undefined
console.log(c) //undefined
if(){
   var a//会被预编译
   function c(){}//会被预编译
}

最新：亲自实验IE、chrome、Edge，发现新特性！！！

if里面的function f函数声明会在GO和这个函数里面的AO同时声明f = function()，这是if语句里的特性

var a
console.log(f)
if (true) {
    function f () {
        console.log(f)
        f = a
        console.log(f)
        //console.log("test")
    }
    console.log(f)
}
f()
console.log(f)
//console
undefined
ƒ f () {
    console.log(f)
    f = a
    console.log(f)
    console.log("test")
}
ƒ f () {
    console.log(f)
    f = a
    console.log(f)
    console.log("test")
}
undefined
ƒ f () {
    console.log(f)
    f = a
    console.log(f)
    console.log("test")
}
！

if里面的function f函数声明会在GO和这个函数里面的AO同时声明f = function()，这是if语句里的特性

```javascript
var a
console.log(f)
if (true) {
    function f () {
        console.log(f)
        f = a
        console.log(f)
        //console.log("test")
    }
    console.log(f)
}
f()
console.log(f)
//console
undefined
ƒ f () {
    console.log(f)
    f = a
    console.log(f)
    console.log("test")
}
ƒ f () {
    console.log(f)
    f = a
    console.log(f)
    console.log("test")
}
undefined
ƒ f () {
    console.log(f)
    f = a
    console.log(f)
    console.log("test")
}