js知识梳理5:关于函数的要点梳理(1)

1.函数声明和函数表达式

函数声明具有声明提前/声明提升的特性,这一点和变量的声明特性相似,执行代码之前会先读取函数声明和变量声明,意味着可以把函数声明放在调用它的语句后面,但变量声明肯定最好不要这样,因为常伴随undefined问题。

函数声明的函数名称和函数体都提前,而函数表达式只是变量声明提前(而变量的初始化代码仍然在原来的位置)。

2.函数调用

构成函数主体的代码定义时并不会执行,调用函数时才会执行,有4中方式调用函数:

  • 作为函数
  • 作为方法
  • 作为构造函数
  • 通过call()和apply()方法间接调用

①作为函数调用的注意点,严格模式下调用上下文是undefined,所以通常不使用this关键字,②作为方法调用的话调用上下文就是方法所在的对象,this关键字引用着该对象。③而嵌套函数不会从调用它的函数中继承this,如果想访问外部的this,可以用变量保存this的值。④构造函数调用会使用新创建的对象作为调用上下文。

3.函数的参数相关

  • 可选形参

当传入的实参比函数声明时指定的形参数量要少,剩下的形参都将设置为undefined值(实参多则会自动省略)。所以在合适的场景就可以选择使用可选形参:

function getPropertyNames(o, /* optional */ a) {
    if(a=== undefined) a=[];
    for(var prop in o) a.push(prop);
    return a;
}
var arr = [1,2];
//[1, 2, "x", "y"]
console.log(getPropertyNames({x:1,y:2},arr));
//["x", "y"]
console.log(getPropertyNames({x:1,y:2}));

复制代码

注意点:需要将可选形参放在形参列表的最后,并在函数定义是使用注释强调形参是可选的。

  • 实参对象arguments

在函数体内,标识符arguments是指向实参对象的引用,它是一个类数组对象,可以通过数字下标访问传入的实参值,这样函数就可以操作任意数量的实参:

function getMaxValue(/* ... */) {
    var max = arguments[0];
    for(var i=0,len=arguments.length;i<len;i++){
        if(arguments[i]>max){
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMaxValue(4,2,1,8,10));//10
复制代码
  • 将对象属性用作实参:当一个函数的形参过多(比如超过3个),调用时记住实参的正确顺序不容易。这时可以把形参写成一个对象,就没有参数顺序的影响了,而且还可以在取值的时候使用||符号设置默认值。当然,形参不多就不需这样做,效率会低一些。

  • 在每个形参左边使用类似/*array*/的类型注释。在函数体内应该要有实参类型检查的逻辑,在传入非法值时报错。

  • 自定义函数属性:函数是一种特殊的对象,所以在适当的时候可以给函数定义属性,比如函数需要一个“静态变量”:

//阶乘
function factorial(n) {
    if(isFinite(n) && n>0 && n==Math.round(n)){
        if(!(n in factorial)) factorial[n] = n * factorial(n-1);
        return factorial[n];
    }
    else return NaN;
}
factorial[1] = 1;
console.log(factorial([5]));//120
复制代码

4.作为命名空间的函数

为了不污染全局空间,常用定义匿名函数并立即在单个表达式中调用的方式:

var extendFun = (function () {
    //函数体
}());
复制代码

5.call()、apply()和bind()

  • call()和apply()

call()和apply()是函数的方法,通过调用方法的形式来简介调用函数,我们之前介绍继承的时候,有一个地方是借用超类型的构造函数,就是使用了call。它们的第一个实参是要调用函数的母对象,它是调用上下文,函数体内通过this引用它

call除了第一个参数之后的参数就是要传给函数的值:

function logMsg(x,y,z) {
    console.log(x+'/'+y+'/'+z);
}
//打印2/4/6
logMsg.call({},2,4,6);
复制代码

而apply除了第一个参数以外,提供一个数组用于传给函数:

function logMsg(x,y,z) {
    console.log(x+'/'+y+'/'+z);
}
//打印8/10/12
logMsg.apply({},[8,10,12]);
复制代码

apply的数组参数可以是真实数组,也可以是类数组对象,比如可以把当前函数的arguments数组直接传入:

function logMsg(x,y,z) {
    console.log(x+'/'+y+'/'+z);
}
function wantToLog(a,b,c) {
    logMsg.apply({},arguments);
}
//打印1/2/3/4
wantToLog(1,2,3);
复制代码
  • bind()

这个方法主要作用是将函数绑定至某个对象,除了第一个实参以外,其他的实参会传入到函数里面:

function f(y,z) {
    console.log("y:"+y);//y:4
    console.log("z:"+z);//z:2
    return this.x + y + z;
}
var g = f.bind({x:3},4);
console.log(g(2));//3+4+2=9
//这里面绑定了this和y
复制代码

转载于:https://juejin.im/post/5b7a2b65e51d4538e6331124

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值