JavaScript中的函数

·  阅读 48

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

在js中, 函数也是对象, 是一种特殊的对象, 具备普通对象的所有功能, 例如: 属性

区别于普通对象的是, 函数可以封装一段代码, 在需要的时候, 可以通过调用函数来执行这段代码

创建函数

创建函数有两种方式

第一种函数声明方式

function 函数名([形参1, 形参2, ...]) {

// 函数体

}

第二咱函数表达式方式

对于该方式, 变量名就是函数名

let/var 变量名 = function([形参1, 形参2, ...]) {

// 函数体

}

        // 定义函数
        function func1() {
            console.log('这是一个函数');
        }

        let func2 = function() {
            console.log('这也是一个函数');
        }
复制代码

调用函数

函数名();

        // 调用函数
        func1();
        func2();
复制代码

形参和实参

在定义函数, 声明函数体可以使用这几个变量, 对于形参的值, 在调用时都会知道

在调用函数时, 传入具体的实参, 传入的这些实参会相应的赋值给对应的形参

在js中, 在调用函数时, 不会检查实参的类型和个数是否和该函数的形参的类型和个数匹配

如果实参的个数大于形参的个数, 多余的实参将不会使用

如果实参的个数小于形参的个数, 那么没有赋值的形参是undefined

        function func3(x, y) {
            console.log('' + x + ',' + y);
        }

        let  = 1, b = 2, c = 3;
        func3(a) // 1,undefined
        func3(a, b, c) // 1,2
复制代码

typeof 函数名

该运算符操作的是函数名的话则返回function

console.log(typeof func3); // function
复制代码

函数的返回值

使用return语句来返回函数的返回值, 当当执行完return语句函数立即退出

  • 如果函数没有return语句, 或者return;是这样的return语句, 则相当于return undefined;
  • 函数的返回值可以是做任意类型, 可以是基本类型, 可以是对象, 也可以是函数
        function func4() {
            console.log('这是一个没有return语句的函数');
        }

        function func5() {
            console.log('这是一个有return语句的函数');
            return;
            console.log('这是一个有return语句后面的语句');
        }

        // 返回值为基本类型的函数
        function func6(a, b) {
            return a + b
        }

        // 返回值为对象类型的函数
        function func7() {
            return {
                name: 'shaosiming',
                age: 18
            }
        }

        // 返回值为函数类型的函数
        function func8() {
            return function(a, b) {
                return a * b
            }
        }
        console.log(func4()); // undefined
        console.log(func5()); // undefined
        console.log(func6(3, 5)); // 8
        console.log(func7()); // {name: 'shaosiming', age: 18}
        console.log(func8()); // 一个函数
复制代码

全局作用域

在script标签中的代码都属于全局作用域代码

在全局作用域中有一个window对象, 代表的是当前页岩的浏览器窗口

在全局作用域中创建的变量会作为属性保存在window对象中

在全局作用域中创建的函数会任务方法保存在window对象中

在全局作用域中的变量和函数, 在任意位置都可以访问, 如: 在函数的作用域中可以访问全局作用域中的变量

        // 直接访问window对象
        console.log(window);

        // 全局作用域中的变量
        var a = 3

        // 在函数作用域中访问全局变量
        // 在函数中访问window对象
        function func() {
            console.log('func: ' + a);
            console.log("func: " + window);
        }
        func()

        // 我们还可以这样访问全局作用域中的变量和函数
        console.log(window.a);
        window.func()
复制代码

函数作用域

函数的作用域, 每次执行创建, 执行完毕销毁, 因此每次调用函数都会创建一个新的作用域

在全局中创建的变量可以在函数中访问, 而在函数中创建的变量,不能在全局中访问

在函数中访问变量时的查找规则, 先在函数作用域中查找变量, 如果没有找到则往上寻找, 直到寻找到全局作用域, 如果在全局作用域中没有找到则是undefined

        let b = 3
        let c = 5
        function func2() {
            let b = 5
            console.log('func2: ' + b); // 在函数作用域中就可以查找到变量b, 因此输出5
            console.log('func2: ' + c); // 在函数作用域中找不到, 往上查找, 在全局作用域中找到c, 因此输出4
        }
        func2()
        console.log('global: ' + b); // 3
复制代码

变量的提前声明

在全局作用域中和函数作用域中, var声明的变量会在所有代码执行前被声明, 但不会被赋值

因此我们可以在变量定义前使用变量

        console.log('global b: ' + b); // undefined
        var b = 3;

        function func3() {
            // console.log('func3: ' + a); // undefined
            // var a = 3; // 可以这样使用
            a = 3; // error: a is not defined
        }
        func3()
复制代码

函数的提前声明

在全局作用域和函数作用域中, 使用function 函数名() {} 创建的函数, 会在所有代码执行前被创建, 因此我们可以在函数定义前调用函数, 但是var 函数名 = function() {}则不行

        func4(); // func4
        func5(); // eroro funct is not a function
        function func4() {
            console.log('func4');
        }

        var func5 = function() {
            console.log('func4');
        }
复制代码

函数对象的call和apply方法

在进行函数调用的时候我们不但可以使用 函数名(); 这种方式调用

还可以使用 函数名.call(); 和 函数名.apply()进行调用

使用这两个方法来调用函数的时候, 可以指定函数中的this对象

在使用call方法是, 可以直接传实参. 而在使用apply方法, 需要将实参放入数组中, 再进行传递

        function func() {
            console.log('func:' + this);
        }

        func(); // this: 在这个函数中this是window对象

        func.call(); // this: window对象

        let person = {name: 'shaosiming', age: 18};
        func.call(person); // this指向person

        func.apply(person); // this指向person
复制代码

函数对象的arguments属性

该属性存放着在调用函数时传递过来的实参

可以使用下标来获取参数

arguments.callee用来表示当前执行的函数对象

        function func() {
            console.log('func:' + this);
            console.log('args: ' + arguments[0] + ', ' + arguments[1] + ', ' + arguments[2]);
            console.log(arguments.callee); // 就是当前函数func
        }

        func.call(person, 1, 2);
        func.apply(person, [1, 2]);
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改