JS-函数_js立即执行函数几种写法-CSDN博客

本文链接：https://blog.csdn.net/heagge/article/details/115837259

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*
        * 函数function
        * -函数也是一个对象
        * -函数中可以封装一些功能（代码），在需要的时候可以执行这些功能
        * -函数中可以保存一些代码在需要的时候调用
        * -使用typeof检查一个函数对象是，会返回function
        * */


        //我们在实际开发中很少使用构造函数来创建一个函数对象
        //创建一个函数对象
        //示例
        //function Person(){
        //   alert(this);
        //}
        //可以将要封装的代码以字符串的形式传递给构造函数
        let fun = new Function("console.log('Hello 这是我的第一个函数');");

        //封装到函数中的代码不会立即执行
        //函数中的代码会在函数调用的时候执行
        //调用函数语法，函数对象（）
        //当调用函数式，函数中的代码会按照顺序执行
        //fun();

        //创建函数方法一：
        /*
        * 使用函数声明来创建一个函数
        *  语法:
        *    function 函数名([形参1,形参2]){
        *         语法....
        * }
        *
        * */
        function fun2(){
            console.log("这是我的第二个函数···")
        }

        //调用fun2
        fun2();




        //创建函数方法二：
        /*
        * 使用 函数表达式 来创建一个函数
        *  var 函数名 = function([形参1,形参2]){
        *    语句。。。。
        * }
        *
        * */
    </script>
</head>
<body>

</body>
</html>

函数的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
调用函数时解析器不会检查实参的类型
  所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
函数的实参可以是任意的数据类型，也可以是一个对象，还能是一个函数
当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递


调用函数时，解析器也不会检查实参的数量（个数）
  多余实参则不会被赋值
 如果实参的数量少于形参的数量，则没有对应实参的形参是undefined
</body>
</html>

函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
可以使用return来设置函数的返回值
语法：
     return 值



return后的值将会作为函数的执行结果返回
      可以定义一个变量来接收该结果

在函数中return后的语句都不会执行

如果return语句后不跟任何值就相当于返回一个undefined
如果函数中不写return，则也会返回undefined

return后可以跟任意类型的值

alert函数没有返回值
</body>
</html>

返回值的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
使用break可以退出当前的循环

continue用于跳过当次循环

使用return可以结束整个函数

返回值可以是任意的数据类型
也可以是一个对象,也可以是一个函数
<script>
    // 对象
    function f() {
        let obj ={name:"沙和尚"};
        return obj;
    }
    let  a= f();
    console.log("a="+a.name);

    // 函数
    function f1() {
        //在函数内部再声明一个函数
        function f2() {
            alert("我是f2");
        }
        return f2;
    }
    a = f1();
    console.log(a);
    // 调用函数
    a();
    f1()();
</script>
</body>
</html>

立即执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 立即执行函数
    //         函数定义完，立即被调用，这种函数叫做立即执行函数
    // 立即执行函数往往只会执行一次
    // (function f() {
    //     alert("我是一个匿名函数~~~");
    // })();

    (function f(a,b) {
        console.log("a="+a);
        console.log("b="+b);
    })(123,456);
</script>
</body>
</html>

构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
创建一个构造函数，专门用来创建person对象
  构造函数就是一个普通的函数，创建方式和普通函数没有区别
 不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是截止调用，而构造函数需要使用new关键字来调用


构造函数的执行流程：
1.立刻创建一个新的对象
2.将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
3.执行函数中的代码
4.将新建的对象作为返回值返回

使用同一个构造函数创建的对象我们称为一类对象，也将一个构造函数称为一个类。
  我们将通过一个构造函数创建的对象，称为是这个类的实例
<script>
    function Person() {
        this.name = "孙悟空";
    }
    let per = new Person();



    function Person2(name,age,gender) {
        this.name = name;
        this.age=age;
        this.gender = gender;
    }

    // 使用instanceof可以检查一个对象是否是一个类的实例
    // 语法：
    //     对象  instanceof 构造函数
    // 如果是返回true 否则返回false
    console.log(per instanceof Person);

    // 所有的对象都是object的后代
    // 所以任何对象和object用instanceof检查都会返回true
    console.log(per instanceof Object);
</script>
</body>
</html>

构造函数的修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
创建一个Person的构造函数
在Person构造函数中，为每一个对象都添加了一个sayName方法
目前我们的方法是在构造函数内部创建的，也就是构造函数每执行一次就会创建一个新的sayName方法
也是所有实例的sayName都是唯一的
这样就导致了构造函数执行一次就会创建一个新的方法
      执行10000次就会创建10000个方法，而10000个方法都是一模一样的
      这是完全没有必要的，完全可以使所有的对象都共享一个方法
<script>
    function Person(name,age,gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        // 向对象中添加一个方法
        this.sayName= fun;
    }
    // 将sayName方法在全局作用域中定义
    // 将函数定义在全局作用域中，污染了全局作用域的命名空间
    // 而且定义在全局作用域中也很不安全
    function fun() {
        alert("hello 大家好，我是："+this.name);
    };
    // 创建一个Perosn的实例
    let per = new Person("孙悟空",18,"男");
</script>
</body>
</html>