Java教程

JavaScript高级__1

本文主要是介绍JavaScript高级__1,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、JavaScript 函数

1.1 JavaScript 函数定义

1.函数是什么?

       实现某一个功能的代码集合

2.函数的格式

      function 函数名(参数列表) {

           执行的代码

     }

3.函数表达式

      JavaScript 函数可以通过一个表达式定义。

      函数表达式可以存储在变量中.

      匿名函数赋值给一个变量,此时函数名称就是变量名称

      在函数表达式存储在变量后,变量也可作为一个函数使用.

      var  变量名称 = function(参数列表){

                需要执行的代码。

};

    调用函数:变量名称(传入的参数);

4.function()构造函数

      我们了解到函数通过关键字 function 定义

        function test1(num1,num2){

                alert("通过关键字 function 定义函数");

            }

      函数同样可以通过内置的 JavaScript 函数构造器(Function())定义

      可以通过new Function()创建函数

      var test3 = new Function("num1","num2","alert('第一个函数构造器Function()'+(num1+num2))")

5.函数的提升

      先使用再声明/定义、

6.自调用函数

      自调用函数没有名称

      将函数定义部分使用()包围

       最后使用一个()来充当函数的参数列表。

7.函数是对象

      在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" .

      JavaScript 函数描述为一个对象更加准确。

      对象有属性和方法,而函数也有属性和方法,因此我们认为函数也是对象

      函数的属性  arguments  --- 封装函数参数的对象

      函数的方法  toString() 方法将函数作为一个字符串返回。

8.JavaScript 函数参数

      JavaScript 函数对参数的值没有进行任何的检查。
      函数显式参数(Parameters)与隐式参数(Arguments)
      函数显式参数在函数定义时列出。
      函数隐式参数在函数调用时传递给函数真正的值。

例如;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            //1.函数是什么?
            //实行某个功能的代码集合
            //2.函数格式
            /*
            function 函数,名称(参数列表){
                执行代码;
            }
            */

            //3.函数表达式
            //JavaScript函数可以通过表达式来定义或声明
            //函数表达式可以储存在变量中
            //匿名函数赋值给一个变量,此时函数名称就是变量名称
            var test1 =function(){
                alert("第一个函数表达式。")
            };
            
            var test2 =function(str){
                alert("第二个函数表达式作者:"+str)
            }
            //在函数表达式存储在变量后,变量也可作为一个函数使用.
            //test1();
            //test2("fxt");

            //4.function() 构造函数
            //我们了解到函数通过关键字 function 定义
            function test1(num1,num2){
                alert("通过关键字 function 定义函数");
            }
            //test1(100,100);
            //函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。
            //我能可以通过new Function()创建函数
            var test3 = new Function("num1","num2","alert('第一个函数构造器Function()'+(num1+num2))")
            //test3(1,5);
            //上面的构造函数相当于一个变量名称为test3的函数表达式
            var test3 = function(num1,num2){
                alert('第一个函数构造器Function()'+(num1+num2))
            }

            //5.函数提升(Hoisting)---- 先使用,后定义
            //变量的提升下面--- 先使用,后定义
             /*
            function  test4(){
                str="hello";
                alert(str);
                var str;
            }
            test4();
            */
           //函数的提升下面
            /*
            var res=test5();
            alert(res4);
            function  test5(){
                return "zhnagsan";
            }
            */

            //6.自调用函数
            function test6(){
                alert("手动调用!")
            }
            //test6();
            //1.自调用函数没有名称
            //2.将函数定义部分使用()包围
            //3.最后使用一个()来充当函数的参数列表。
            /*(function(){
                alert("自调用函数");
            })();*/
            //有参数的自调用函数
            /*(function(d1,d2){
                alert("有参数的自调用函数"+(d1+d2));
            })(12,56);*/

            //7.函数是对象
            /*function test7(){

            }
            alert(typeof test7);//函数类型*/
            //在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" .
            //JavaScript 函数描述为一个对象更加准确。
            //对象有属性和方法,而函数也有属性和方法,因此我们认为函数也是对象
            //函数的属性  arguments  --- 封装函数参数的对象
            function test8(a,b){
                alert("参数个数:--"+arguments.length)
            }
            //test8(1,2);
            //函数的方法  toString() 方法将函数作为一个字符串返回.
            var restest8=test8.toString();
            alert(typeof restest8);//string类型

            //8.函数是对象
            //JavaScript 函数对参数的值没有进行任何的检查。
            function  tes9(str){
              alert("参数---"+arguments.length);
            }
            test9("zhangsan");
            //函数显式参数(Parameters)与隐式参数(Arguments)
            //函数显式参数在函数定义时列出。
            //函数隐式参数在函数调用时传递给函数真正的值。
        </script>
    </body>
</html>

 二、JavaScript 函数调用

JavaScript 函数有 4 种调用方式。

   1.作为一个函数调用

    2.函数作为方法调用

    3.使用new 函数名称()调用函数

    4.函数是对象,作为JavaScript 函数,调用

例如;

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript 函数调用</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>作为一个全局函数调用的结果:</p>
        <p id="dome"></p>
        <script>
            //JavaScript 函数调用
            //JavaScript 函数有 4 种调用方式。
            //1.作为一个函数调用
            function test1(a,b){
                alert("参数"+(a+b))
                return a*b;
            }
            //document.getElementById("dome").innerHTML=test1(10,2);
            //上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
            //在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面.
            //在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
            //全局对象===window 对象
            //window.test1(2,3);

            //2.函数作为方法调用
            //方法属于对象的成员,对象的方法是一个函数,因此函数可以被作为方法调用。
           //创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName).
            var myObject={
                firstName:"房",
                lastName:"续婷",
                fullName:function(){
                    return this.firstName+" "+this.lastName;
                }
            }
            var name = myObject.fullName();
            //alert(name);

            //3.使用new 函数名称()调用函数
            function test2(str){
                alert("函数调用"+str);
            }
            //alert(typeof test2);//functio类型
            var res1 = new test2("fxt");
            alert(typeof res1);

            //4.作为函数方法调用函数
            //在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
            //call() 和 apply() 是javascripr预定义的函数方法
            //call()
            //第一参数 必须是对象本身。
            //第二参数 是一组参数,实际上是被调用函数的参数
            function test3(str,age){
               alert("函数调用,参数="+str+",age=="+age);
           }
           var res2;
             //res2=test3.call(test3,"fxt",22)
           //apply()
           //第一参数 必须是对象本身。
           //第二参数 是一个数组,将被调用函数的参数封装成一个数组
           function test4(str,age){
               alert("函数调用,参数="+str+",age=="+age);
           }
           var canShu =["fxt",22];//封装函数参数的数组
           test4.apply(test4,canShu);

            //也可以使用自调用函数方法
        </script>
    </body>
</html>

 二、JavaScript 对象

1 对象是什么?

       描述一个具体事务的代码

2.对象中的元素?

        属性【变量】和方法【函数】

3.java中对象的分类

3.1 自定义对象 -- javascript没有提供,需要我们自己创建的对象自定义对象

1.通过字面量的方式创建对象

2.通过构造函数方式创建对象

例如:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            //1 对象是什么?
            //描述一个具体事务的代码
            //2.对象中的元素?
            //属性【变量】和方法【函数】
            //3.java中对象的分类
            //3.1 自定义对象 -- javascript没有提供,需要我们自己创建的对象自定义对象
            //自定义对象的创建方式
            //1.通过字面量的方式创建对象
            var student={
                stuid:183766,
                stuname:"fxt",
                getstuof:function(){
                    alert("student对象的方法");
                    return this.stuid+"-"+this.stuname;
                }
            }
            //alert(typeof student);//objrct
            //alert(student.stuid+"-"+student.stuname);
            //var res=student.getstuof();
            //alert(res);
            //假如我们现需要一个新的学生对象,那么将需要重写编写一次
            var studebt2={
                stuid:183667,
                stuname:"ch",
                getstuof:function(){
                    alert("student1对象的方法");
                    return this.stuid+"-"+this.stuname;
                }};
                //通过字面量的方式创建对象在扩展的时候不方便,会造成重复操作。

                //2.通过构造函数方式创建对象
               function Person(perid,pername){
                    this.perid=perid;
                    this.pername=pername;
                    this.getper=function(){
                        alert("这是Person函数的方法!")
                        return this.perid+"-"+this.pername;
                    }
               };
                //alert(typeof Person)//function
                //通过new使得函数称为对象
                var per1=new Person(183766,"fxt");
                //alert(typeof per1)//object
                //alert(per1.perid+"-"+per1.pername)
                //var res1=per1.getper();
                //alert(res1)
                //假如我们现需要一个新的lisi对象,那么只需要重新new一个
                //var per2=new Person(183667,"ch");
                //alert(per2.perid+"-"+per2.pername);
                //var res2=per2.getper();
                //alert(res2);
        </script>
    </body>
</html>

3.2内置对象

3.2.1  内建对象

Number对象  、字符串(String)对象  、Date(日期) 对象、Array(数组) 对象

、Boolean(布尔) 对象 、Math(算数) 对象、RegExp 对象

 Number对象例如;

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            //3.2 内置对象
            // 3.2.1  内建对象
            // Number对象  
            // 字符串(String)对象  
            // Date(日期) 对象
            // Array(数组) 对象
            // Boolean(布尔) 对象 
            // Math(算数) 对象
            // RegExp 对象
           // 3.2.2  DOM对象

            //Number对象  
           //封装关于数字操作的对象
           //通过字面量的方式创建对象 -- 字面量=变量
           var  num1=100;
           //alert(typeof num1); //number
           //变量就是对象,数据类型为number
           //通过构造函数方式创建对象-- 数据类型为object
           var num2=new Number(100);
           //alert(typeof num2); //object
           
           //number转换成object-----new Number()
           var num3=new Number(num1);
           //alert(typeof num3); //object
           //object转换成number-----parseInt(num2)/parseFloat(num2)   
           var num4=Number.parseInt(num2);
           //alert(typeof num4); //number

            //常用的属性
           //Number.MAX_VALUE	最大值
           //Number.MIN_VALUE	最小值
           //alert(Number.MAX_VALUE); // 1.7976931348623157e+308
           //alert(Number.MIN_VALUE); // 5e-324

           //常用方法
           //Number.parseFloat()	将字符串转换成浮点数,和全局方法 parseFloat() 作用一致。
           //Number.parseInt()	将字符串转换成整型数字,和全局方法 parseInt() 作用一致。                    
           var str1="100";
           var number1 = Number.parseFloat(str1); 
           //alert(typeof number1);//number
           //alert(number1+1); //101
           //全局方法isNaN()判断传递的参数是否不是一个数字。
           //当是一个数字是结果为false
           //当不是一个数字是结果为true
           //isNaN---is Not a Number? 是否不是一个数字
           var age="ssssds";
           //alert(isNaN(age));
           //toFixed()	返回指定小数位数的表示形式。[主意正负值]
           var shuzi=-3.145;
           //alert(shuzi.toFixed(2)); //-3.15

           //JavaScript 不是类型语言
           //所有的数字都是由浮点型类型.
           //JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,它能表示最大值(Number.MAX_VALUE)为 ±1.7976931348623157e+308,最小值(Number.MIN_VALUE)为 ±5e-324。
           //此格式用 64 位存储数值,其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号
           //浮点运算并不总是 100% 准确
           //alert(10/3); //3.3333333333333335
           //整数(不使用小数点或指数计数法)最多为 15 位。
           //小数的最大位数是 17,
           //如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,
           //如果前缀为 0 和 "x",则解释为十六进制数。
           //toString() 方法可以将数字转成字符串
           //toString(2) 将当前数字对象转换成2进制字符串
           //toString(8) 将当前数字对象转换成8进制字符串
           //toString(16) 将当前数字对象转换成16进制字符串
           var  testnum1=10;
           alert(testnum1.toString(2)); //1010  string
           alert(testnum1.toString(8)); 
           alert(testnum1.toString(16)); 
        </script>
    </body>
</html>
这篇关于JavaScript高级__1的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!