Web前端高级编程——函数进阶

基本概念

函数

如果函数挂载在一个对象上，作为对象的属性，称它为对象的方法
当通过这个对象来调用函数时，该对象就是此次调用的上下文，也就是该函数的this值

函数定义方式

//函数定义方式
        {
            //函数声明语法(函数可以在函数声明之前调用，函数声明整体会被提升到当前作用域的顶部)
            function add(num1,num2){
                return num1+num2;
            }

            //函数表达式(只能在声明之后调用，函数表达式也提升到顶部但是只有其变量名提升)
            let sub=function (num1,num2){
                return num1-num2;
            }
            
            //箭头函数(ES6)
            let mul=(num1,num2)=>num1*num2;
            // let mul=(num1,num2)=>{
            //     return num1*num2;
            // };
            //没有参数时(花括号不能省)
            let f1=()=>{
                console.log("arrow function");
            };
            //一个参数时(花括号可以省)
            let f2=x=>x**2;
            //立即执行函数
            let xx=((x)=>x**x)(4);

            //Function构造函数
            let sum=new Function(
                "num1",
                "num2",
                "let result=num1+num2; return result;"
            );
            
        }

函数参数

传进函数的每个参数值都被包含在arguments对象（类数组）中

{
            function test(){
                console.log(arguments instanceof Array);//instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
                console.log(arguments);
                console.log(Object.getPrototypeOf(arguments));//将对象作为参数传入Object.getPrototypeOf()可以查询它的原型。

            }
            test(1,2,3,4,5,6);
        }

要确定接收到的参数个数，可以访问arguments.length属性

{
            function likes(name,fav1,fav2){
                // console.log(`${name}喜欢${fav1}、${fav2}。`);
                let output=`${name}喜欢`;
                let argCount=arguments.length;
                for(let i=1;i<argCount-1;i++){
                    output+=`${arguments[i]}、`;
                }
                output+=`${arguments[argCount-1]}。`;
                console.log(output);
            }
            likes("小明","读书","篮球");
            likes("小明","读书","篮球","游泳","骑车");
        }

常见问题①(箭头函数内部不支持arguments对象，但支持剩余函数)

{
            function sum1(){
                return Array.from(arguments).reduce((x,y)=>x+y,0);
            }
            let sum2=()=>{
                return Array.from(arguments).reduce((x,y)=>x+y,0);
            };
            // console.log(sum1(1,2,3),sum2(1,2,3));

            //箭头函数支持剩余函数
            let sum3=(...nums)=>{
                return nums.reduce((x,y)=>x+y,0);
            };
            console.log(sum3(1,2,3));
        }

常见问题②(arguments对象包含了剩余参数值。剩余参数没有接收到实参值时，为空数组)（剩余参数必须位于参数末尾）

函数调用

有四种方式来调用JavaScript函数：作为函数、作为方法、作为构造函数、通过它们的call()和apply()方法间接调用。
①作为函数
在非严格的ES5中，函数调用上下文(this的值)是全局对象，然而在严格模式下，调用上下文则是undefined

 {
            function test(){
                console.log(this);
            }
            test();//输出window
        }

②作为方法
关键字this没有作用域的限制，嵌套的函数不会从调用它的函数中继承

 {
            let obj={
                x:10,
                fn:function(){
                    this.x++;
                    let self=this;
                    function ff(){
                        console.log(self.x);
                        // console.log(this);
                    }
                    ff();
                },
            };
            obj.fn();
        }