yanghongchen666 发表于 2021-2-1 13:38:50

JS学习第六章~

本帖最后由 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.....){
                语句....
            }
   
    例子:
      //该函数也称之为匿名函数,因为这个函数并没用名字,只是函数赋值给了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.;
      }
-----------------------------------------
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学的也一般,

小甲鱼的铁粉 发表于 2021-2-1 13:43:41

{:10_256:}加油

liuzhengyuan 发表于 2021-2-1 13:44:16


加油

玖玥 发表于 2021-2-4 09:42:51

hhhh

hornwong 发表于 2021-2-4 11:51:52

感谢分享!

还不够好 发表于 2021-2-4 17:12:40

学习

yanghongchen666 发表于 2021-2-7 10:44:01

为啥我看不见我写的笔记惹????大家能看见嘛~之前没更新的时候好好的,更新完就消失了?!

yanghongchen666 发表于 2021-2-7 10:44:53

甚至直接在我的学习之路这个主题板块这个帖子直接消失不见了?!

kkl44stupid 发表于 2021-2-8 19:45:02

Yoromi 发表于 2021-2-9 09:19:02

虽然看不懂但还是支持一下{:5_109:}

攸鱼 发表于 2021-2-9 11:56:38

页: [1]
查看完整版本: JS学习第六章~