getvalue函数怎么使用_深入理解ES6函数

最新推荐文章于 2022-09-08 13:27:23 发布

weixin_39567013

最新推荐文章于 2022-09-08 13:27:23 发布

阅读量6.1k

点赞数

文章标签： getvalue函数怎么使用

作者：一声蔷薇udVkP

来源：SegmentFault 思否社区

函数形参默认值

1、es5、es6对默认参数的处理区别：

es5：形参默认值是要先判断，参数是否有值，如果没有在赋值

es6：在定义函数时，可以直接给形参添加默认值，当函数调用实参为undefined则给形参赋值为默认值

注意：当传进来的值为null，则不调用默认参数

2、默认参数对argument的影响

1、影响argument的length属性

2、命名参数的变化不会跟新同步到argument对象中

es5非严格模式下。参数的变化会同步到argument中，严格模式下则不会

es6只要函数使用默认参数，无论是否显示定义严格模式都使得arguments对象保持与命名参数分离

例子-非严格模式：

function minArgs(first,second ="b"){

console.log(argument.length)

console.log(first===argument[0])

console.log(second===argument[1])

first = "c";

second = "d";

console.log(first===argument[0])

console.log(second===argument[1])

}

minArgs("a")

// 1

//true

//false

//false

//false

默认参数表达式

1、可以使用函数调用结果作为默认参数

2、可以使用先定义的参数作为函数调用的默认参数

3、先定义参数不能访问后定义参数，这是因为后定义的参数临时死区(TDZ)

例子-函数调用结果作为默认参数：

let value =5

function getValue(){

return value++

}

function add(a,b=getValue()){

return a+b

}

console.log(add(1,2))//3

console.log(add(1))//6

不定参数

1、概述：

es5中无命名参数-argument：记录所有传进来的实参

es6中不定参数-(...):记录自这个参数后传进来的所有参数，使用上会更加方便

2、不定参数的使用限制：

a:每个函数只能声明一个不定参数

b:不定参数只能放在末尾

c:不定参数不能用于对象字面量的setter中

3、不定参数对argument的影响：

无影响

展开运算符(...)

概念：

1、不定参数是可以让你指定多个参数，整合成数组

2、展开运算符是让你指定数组，将他们打散后作为各种独立的参数传入函数

增强Function构造函数

目的：用来动态创建新函数

参数：字符串形式的参数，分别为函数参数，函数体

支持创建函数时使用默认参数和不定参数

例子：

var add = new Function0("first","second","return first+second")

console.log(add(1,2))//3

//默认参数

var add1 = new Function0("first","second=first","return first+second")

console.log(add1(1))//2

//不定参数

var add2 = new Function0("...args","return args[0]")

console.log(add2(1,2,3))//1

name属性

1、目的：用于辨别函数

2、如何选择合适的名称：

函数声明：

function doSomething(){}

doSomething.name = doSomething

匿名函数表达式

let doAnotherThing = function(){}

doAnotherThing.name = doAnotherThing

3、name的特殊情况

情况1：

let doSomethingElse = function doSomething(){}

doSomethingElse.name =doSomething

情况2：

var person={

get firstName(){

},

sayName:function(){

}

}

person.firstName().name = "get firstName"

(getter函数和setter函数会再name属性前加一个前缀"get"、"set")

person.sayName().name = "sayName"

情况3：

通过bind()函数创建的，名称带有"bound"前缀

情况4：

通过mew Function创建的，名称为"anonymous"

注意：不能使用name属性值来获取对函数的引用

函数的两种用途

结合new使用，函数返回一个新对象，this指向实例
直接调用

判断函数是通过什么方式调用

js函数有两个不同的内部方法[[Call]]和[[Construct]]

当通过new调用，执行[[Construct]],否则执行[[Call]]

es5判断函数的调用方式：instanceof

当通过new调用的时候，可以检查this的值是否为构造函数的实例

function Person(name){

    if(this instanceof Person){

        this.name = name;

    }else{

        throw new Error("必须通过构造函数调用")

    }

}

var person = new Person("lisi")//有效

var p1 = Person.call(Person,"wangwu")//有效

var p2 = Person("dd")//Error("必须通过构造函数调用")

弊端：通过instanceof 不能准确判断这个函数是不是new调用，因为通过call或者apply等方法也可以改变this的指向，让this指向某个实例

es6判断函数调用方式：元属性->new.target

元属性：非对象的属性，可以提供非对象目标的补充信息(例如new)

当通过new调用，new.target被赋值为新创建对象的实例，也就是函数体内this构造函数，否则值为undefined

例子：

function Person(name){

    //if(new.target === Person)

    if(typeof new.target !=="undefined"){

        this.name = name;

    }else{

        throw new Error("必须通过构造函数调用")

    }

}

var person = new Person("lisi")//有效

var p1 = Person.call(Person,"wangwu")//抛出错误

注意：new.target只能在函数体内使用，否则报错

块及函数

1、在es3之前版本在代码块中声明一个函数，会被认定是一个错误

2、最好不要在代码块中使用函数声明，推荐用函数表达式

3、由于不同浏览器兼容不同，所以es5严格模式下，代码块中声明一个函数时程序会抛出错误

4、es6会将声明的函数视为一个块及函数

例子：

if(true){

    console.log(typeof doSomething)//"function"

    //块级函数

    function doSomething(){

        console.log("ss");

    }

    doSomething()

    //let函数表达式

    let doSomethingElse = function(){

    }

}

console.log(doSomething()) //undefined

讲解：定义函数的代码块中，函数会被提升到顶部，一旦if语句代码块结束执行，doSomething()不复存在。块级函数和let函数表达式类似，一旦执行过程流出代码块，函数定义立即被移除，区别是，块级函数会被提升到代码块顶部，let定义的函数表达式不会被提升。

es6非严格模式，块级函数会被提升到全局作用域

箭头函数

特点：

1、没有this,super,arguments,new.target的绑定，箭头函数的this、arguments,new.target这些值由外围最近一层非箭头函数决定

2、不能通过new关键字调用

3、没有原型，所以不存在prototype属性

4、不可改变this的绑定，函数体内部的this值不可被该变

5、不支持arguments对象,始终可以访问外围的arguments对象

6、不支持重复命名参数

语法：

参数、箭头、函数体组成

情况一：当只有一个参数时：

let reflect = value=>value

相当于：

let reflect = function(value){

    return value

}

情况二：两个参数时，参数用括号括起来

情况三：没有参数时，直接一个括号后面跟箭头和函数体

情况四：如果想让箭头函数向外返回一个对象字面量，将该字面量包裹在小括号里

let getTempItem = ()=>({name:"zhangsan",age:17})

相当于

let getTempItem = function(){

    return {

    name:"zhangsan",

    age:17

    }

}

情况五：创建立即执行函数表达式：

let person = ((name)=>{

    return {

        getName(){

            return name

        }

    }

})("kankan")

用小括号包裹箭头函数定义，不包括调用实际参数部分

箭头函数的this值：取决于外部非箭头函数的this值

箭头函数设计初衷：即用即弃。

function pageHandle(){

    id:123，

    init:function(){

        document.addEnventListener("click",event=>this.doSomething(event.typ))

    },

    doSomethis(type){

     console.log(type)

    }

}

尾调用优化

尾调用：函数作为另一个函数的最后一条语句被调用

es5引擎中，尾调用实现和其他函数调用实现类似，创建一个栈帧，将其推入调用栈表示函数调用，每一个未用完的栈帧都会保存在内存中，当调用栈变得过大会造成程序问题

es6严格模式下满足以下3个条件，尾调用不创建栈帧，而是清除并重用当前栈帧

1、尾调用不访问当前栈帧的变量(不是闭包)

2、在函数内部，尾调用是最后一条语句

3、尾调用结果作为函数值返回

例：(可以被js引擎自动优化)

"use strict"



function test(){

    return doSomething()

}

递归函数是其最主要的应用场景，优化效果显著

function factorial(n){

    if(n<=1){

        return 1

    }else{

        return n*factorial(n-1)

    }

}

在递归调用前执行了乘法操作，所以当前阶乘函数无法优化

function factorial(n，p=1){

    if(n<=1){

        return 1*p

    }else{

        let result = n*p

        优化后

        return factorial(n-1,result)

    }

}

可以被优化，如果递归函数足够大，可以大幅提升程序性能

- END -