鱼C论坛

 找回密码
 立即注册
查看: 3112|回复: 10

[见证历程] JS学习第六章~

[复制链接]
发表于 2021-2-1 13:38:50 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 yanghongchen666 于 2021-2-15 07:20 编辑

Js中的函数简介:

    函数:
        -函数也是一个对象
        -函数可以封装功能(代码),在需要的时候可以调用该功能(代码)
        -使用typeof检查一个函数对象时,会返回object
   

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

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

        fun.hello = "你好";
        console.log(fun.hello);

   
    函数声明创建函数:
        语法:
            function 函数名(形参1,形参2,形参3.....){
                语句.....
            }

        注:改function括号里面的形参不是必须要写的,是可选
   
 例子:
        function fun2(){
            console.log("这是我第二个函数");
            alert("函数太好用了!!!");
        }
        //这里如果想输出fun2函数中的内容我们需要调用函数fun2();

        fun2();
   
    函数表达式:
        语法:
            var 函数名 = function(形参1,形参2,形参3.....){
                语句....
            }

   
  
例子:
        //该函数也称之为[b]匿名函数[/b],因为这个函数并没用名字,只是函数赋值给了fun3
        var fun3 = function(){
            console.log("我是匿名函数")
        }
-------------------------------------------------------------
JS函数的参数

    上面相信大家已经了解了函数是个什么东西,也明白了大概要怎么写这时候可能就有聪明的小宝贝就要问了:
        那个那个既然函数能传形参,那么形参是干嘛的鸭~ 既然你大发慈悲的问了,我就在这里给你解答啦!
        废话不多说直接上例子!
   
  
例子1:
        /*
            定义一个用来求和的两个数和的函数
            可以在函数的()中来指定一个或多个形参(形式参数)
                多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
                但是并不赋值
        */


        function sum(num1,num2){
            console.log("result = " num1 + num2)
        }
        /*
            在调用函数时,可以在()中指定实参(实际参数)
                实参将会赋值给函数中对应的形参
        */
        sum(2,3); //输出结果为5

        //看到这里可能有聪明的小宝贝就要问了,那如果我不传数字而是其他值会怎么样呢?(请看下面的解释)

        /*
            这里我们形参2传入了hello,明显是个字符串类型所以这说明了
            调用函数时解析器不会检查实参的类型
                所以要注意,是否可能会接受非法的参数,如果有的话则需要对参数进行类型的检查
            
            函数的实参可以使用任意数据类型
        */
        sum(123,"hello");
        
        //我们来如果我们的传入多余的实参会怎么

        /*
            调用函数时,解析器也不会检查实参的数量
                多余的实参,不会被赋值
            
            如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
        */

        sum(123,true,"你好");
        
        //这里除了前两个123,456以为后面的值都为undefined
        sum(123,456,"Hello",true,null)

        这里补充一点,实参的值可以是任何的值,也可以是一个对象或者是一个函数

      
例子:
        /*
            创建一个函数,可以在控制台中输出一个人的信息
            可以输出人的name age gender address

            实参可以使任意的数据类型,也可以是一个对象
                当我们的参数过多时,可以将参数封装到一个对象中,
                然后我们通过对象传递
        */

        function sayHello(o){
            console.log("我是"+o.name+"今年我"+o.age+"岁了"+"我是一个"+o.gender+"人"+"我住在"+o.address);
        }

        //sayHello("孙悟空",18,"猴","花果山")
        //创建对象
        var obj = {
            name : "孙悟空",
            age : 18,
            gender : "男",
            address : "花果山"
        }

        //sayHello(info)


        /*
            实参可以是一个对象,也可以是一个函数 
        */

        function fun(a){
            console.log("a = "+a);
            /*这里的a是sayHello函数,可以理解为在这里调用了
                sayHello(obj) 因为现在的a是sayHello
            */
            a(obj)
        }

        fun(sayHello);  

        fun(function(){alert("hello")});
        
        fun(area(10)); 

        /*
            area()
                -调用函数
                -相当于使用的是函数的返回值
            area
                -函数对象
                -相当于直接使用函数对象
            
            不加括号传的是对象
            加括号传的是函数返回值
        */

----------------------------------------------------------
Js函数的返回值

    /*
            创建一个函数,用来计算三个数的和

            可以使用return 来设置函数的返回值
            语法:
                return 值/变量
            
            return后的值将会作为函数的执行结果返回,
                可以定义一个变量,来接受该结果
            
            在函数中return后的语句都不会执行

            如果return语句后不跟任何值,就相当于返回一个undefined
                如果函数中不写return,也会返回undefined
            
            return后可以跟任意类型的值
        */

  
例子:
        function sum(num1,num2,num3){
            var number = num1 + num2 + num3;
            return number;
            //因为在alert之前已经return所以这里alert不会生效
            alert("hello")
        }

        //这里我们调用sum函数,并传入实参1,10,15
        sum(1,10,15);
   

    函数的返回值也是可以返回任何数据类型的

  
例子:
        
        //返回值为对象
        function fun(){
            //返回对象
            return {name:"孙悟空"};
        }

        fun();//调用函数fun


        //返回值是函数
        function fun2(){
            //在函数里创建一个函数
            function fun3(){
                alert("我是内部函数fun3~~");
            }
            //将fun3作为fun2函数的返回值返回
            return fun4;
        }

        a = fun3();
        //console.log(a);
        a();

        fun3()();//这种写法跟上面是一样的,这不过这里没有创建变量而是直接调用
--------------------------------------------
Js中的匿名函数

  
例子:
        //这里在function外面用小括号包住,来声明它是一个整体,不用括号包住会报错
        /*
            立即执行函数
                函数定义完,立即被调用,这种函数叫做立即执行函数
                立即执行函数往往只会执行一次
        */
        (function(){
            alert("我是一个匿名函数");
        }) (); //直接使用();来调用函数

        (function(a,b){
            console.log("a = "+a);
            console.log("b = "+b);
        }) (123,456);
------------------------------------------
Js中的方法
   
    方法其实跟函数没有任何区别,两者之间只是名称上的区别
    函数也可以成为对象的属性,如果一个函数作为一个对象的属性保存
    那么我们称这个函数是这个对象的方法 调用这个函数就说调用对象的方法(method)
   
  
例子:
        //创建一个对象
        var obj = new Object();

        obj.name = "Tom";

        obj.sayNmae = function(){
            alert(obj.name)
        }

        //调用方法
        obj.sayNmae()

        //这里我们也可以理解为,在对象中保存的函数,当我们调用时就称之为方法
   
---------------------------------------
JS中枚举对象中的方法

    个人感觉Js中枚举方法的用法跟python for语句的结构基本一样,
        废话不多说直接上代码!
   
    这里需要介绍一个新的结构
    for...in语句
    语法:
       for(var 变量 in 对象){
            语句....
        }


            for...in语句: 对象中有几个属性,循环体就会执行几次
        每次执行时,会将对象中的一个属性名赋值给变量

   
  
例子:
        var obj = {
                    name:"tim",
                    age:18,
                    gender:"男",
                    address:"洛杉矶"
                };

        for(var n in obj){
            console.log("属性名: " + n);
            //这里输出属性值的时候,切记要有中括号,不然obj.n的意思是在obj对象中搜索名为n的属性名
            console.log("属性值: " + obj.[n];
        }
-----------------------------------------
Js中的作用域

   
    变量的声明提前
        -使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),
             但是如果声明变量时不使用var关键字,则变量不会提前声明
            
    函数的声明提前
        -使用函数申明形式创建的函数function 函数名(){}
            它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
        -使用函数表达式创建的函数,不会被声明提前,所以不能再声明前调用
   
  
例子:
        var a ;
        console.log("a = " + a);
        a = 123;


        //fun();
        

        //函数声明,会被提前创建
        function fun(){
            console.log("我是一个fun函数");
        }

        //函数表达式,不会被提前创建
        var fun2 = function(){
            console.log("我是一个fun2函数");
        }

        
        //fun2();
        fun2();
   

    全局作用域:
        -作用域指一个变量的作用的范围
            -在JS中一共有两种作用域:
                1.全局作用域
                    -直接编写在script标签中的JS代码,都在全局作用域
                    -全局作用域在页面打开时创建,在页面关闭时销毁
                    -在全局作用域中有一个全局对象windown,
                            它代表的是一个浏览器的窗口,它由我们浏览器创建我们可以直接使用
                    -在全局作用域中,创建的变量都会作为window对象的属性保存
                            创建的函数都会作为window对象的方法保存

                    -全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到

  
例子:
        var a= 10;
        var b = 20;
        var c = "hello";

        console.log(window.a);


        function fun(){
            console.log("我是fun函数");
        }

        //window.fun();

        window.alert("hello");

    函数作用域:
        函数作用域
            -调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
            -每调用一次函数就会创建一个新的函数作用于,他们之间是互相独立的
            -在函数作用域中,可以访问到全局作用域的变量,
                在全局作用域中无法访问到函数作用于的变量
            -当在函数作用于中才做一个变量时,它会在自身作用域中寻找,如果有就直接使用
                如果没有则向上一级作用域中寻找,直到找到全局作用域,
                如果全局作用域中依然没有找到,则会报错ReferenceError
            -在函数中要访问全局的变量则可以使用window对象    

    举一些例子:
        //创建一个变量
        var a = 10;

        function fun(){
            var a = "我是fun函数中的变量a";
            var b = 20;

            console.log("a = " + a);

            function fun2(){
                //这里加上window,访问的是全局作用域中的a,如果不加window则访问就近的a
                console.log("a = " + window.a);
            }
            fun2();
        }

        fun();//a输出为我是函数中的变量a

        console.log("a = " + a);//a输出为10

        /*
            在函数作用域中也有声明提前的特性,
                使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
                函数声明也会在函数中所有的代码执行之前执行
        */

        function fun3(){
            
            fun4();

            console.log(a);
            var a = 35;    

            function fun4(){
                alert("我是fun4");
            }
        }

        fun3();

        var c = 33;

        /*
            在函数中,不使用var声明的变量都会成为全局变量
        */
        function fun5(){
            console.log("c = " + c);
            c = 10;
            //d没有使用var关键字,则会设置为全局变量
            d = 100;
        }

        fun5();

        //在全局输出C
        console.log("d = " +d);


        var e = 23;
        /*
            定义形参就相当于在函数作用域中声明了变量
        */
        function fun6(e){
            alert(e);
        }

        fun6();
---------------------------------------

写在最后....由于这一章东西比较多,也不太好自己出练习题,希望大家能消化一下这次的东西,特别是函数跟作用域要搞明白
可以自己创建一些函数来玩一玩...基础语法估计最多还有两三章左右啦~这是继python一来第二门语言,虽然python学的也一般,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-1 13:43:41 | 显示全部楼层

回帖奖励 +5 鱼币

加油
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-1 13:44:16 | 显示全部楼层

回帖奖励 +5 鱼币


加油
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-4 09:42:51 | 显示全部楼层

回帖奖励 +5 鱼币

hhhh
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-4 11:51:52 | 显示全部楼层

回帖奖励 +5 鱼币

感谢分享!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-4 17:12:40 | 显示全部楼层

回帖奖励 +5 鱼币

学习
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2021-2-7 10:44:01 | 显示全部楼层
为啥我看不见我写的笔记惹????大家能看见嘛~之前没更新的时候好好的,更新完就消失了?!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-2-7 10:44:53 | 显示全部楼层
甚至直接在我的学习之路这个主题板块这个帖子直接消失不见了?!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-8 19:45:02 | 显示全部楼层

回帖奖励 +5 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-2-9 09:19:02 | 显示全部楼层

回帖奖励 +5 鱼币

虽然看不懂但还是支持一下
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-2-9 11:56:38 | 显示全部楼层

回帖奖励 +5 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-22 09:46

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表