JS——语句、函数与面向对象

一、语句

（一）条件语句

　　JS的条件语句，有 if 条件语句和 switch 选择语句两种，if条件语句的格式与python也不相同，

（二）循环语句

　　JS支持两种循环语句：for、while，for循环有支持两种模式：基本for循环、foreach，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>

    </style>

</head>
<body>
   <div>
       <p>关于条件语句：if、switch</p>
       <p>循环 语句</p>
   </div>


    <script language="JavaScript">
    /*
    //if 语句
        function f(num){
            if (num==1){
                console.log(1);}else if (num==123){
                console.log(123);}else{
                console.log("default");};
        };

        f(1);       //1
        f(123);     //123
        f(34);      //default


    //switch 语句
        function g(name){
            switch(name){
                case "lucy":
                    console.log("lucy");
                    break;
                case "dongxue":
                    console.log("dongxue");
                    break;
                default:
                    console.log("default");
            }
        }
        g("lucy");          //lucy
        g("dongxue");       //dongxue
        g("hi");            //default
    */
    //循环语句：for、whilt,两种语句，三种模式
        var li = [12,3,4,5,"li"];
        var dic = {"k1":12,k2:5,}
        //模式一：for循环索引，相当于foreach
        for(item in li){
            console.log(item,li[item]);
        };
        for(item in dic){
            console.log(item,":",dic[item]);
        };
        //模式二：for基本循环
        for(i=0;i<10;i++){
            console.log(i);
        }
        //模式三：while循环
        var i = 0;
        while(i<li.length){
            console.log(li[i]);
            i += 1;
        }

    </script>
</body>
</html>

View Code

二、异常处理

　　JS的异常处理语句：try{ } \ catch(e){ } \ finally{ } ,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>

    </style>

</head>
<body>
   <div>
       <p>关于异常处理</p>
       <p></p>
   </div>


    <script language="JavaScript">
        try{
            console.log("try");
            console.log(hello);
        }
        catch(e){
        //try中代码出现异常，将执行catch中的代码，
            console.log(e);
        }
        finally{
        //无论try中代码是否执行，都执行这里的代码，
            console.log("over");
        }

    </script>
</body>
</html>

View Code

三、函数

　　JS中的函数有三种类型：基本函数、匿名函数、自执行函数，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>

    </style>

</head>
<body>
   <div>
       <p>JS函数：基本函数、匿名函数、自执行函数</p>
       <p></p>
   </div>


    <script language="JavaScript">
        //基本函数
        function f1(name){
            console.log("my name is :",name);
        };
        f1("lucy");

        //匿名函数
        var f2 = function(name){
            console.log("my name is :",name);
        };
        f2("hebe");

        //自执行函数
        (function(name){
            console.log("my name is :",name);
        })("hu");

    </script>
</body>
</html>

View Code

　　注意1：函数中的参数可以缺省，不影响函数执行，系统变量 arguments 指明函数传递进来的所有参数，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>

    </style>

</head>
<body>
   <div>
       <p>函数变量可以缺省，arguments指明传递进来的所有参数，</p>
       <p></p>
   </div>


    <script language="JavaScript">
        function f1(a,b,c){
            console.log(arguments);      
            console.log(a,b,c);         
        };
        f1(1,2);
            //[1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            //1 2 undefined
        f1(4,5,6,7,);
            //(4) [4, 5, 6, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            //4 5 6

    </script>
</body>
</html>

View Code

　　注意2：JS中无块级作用域概念，使用的是函数作用域；

　　　　　函数在预编译的时候，其中变量提前声明，函数不运行；　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>

    </style>

</head>
<body>
   <div>
       <p>关于作用域</p>
       <p>每一个函数都保存有自己的一个作用域链，在预编译的时候就确定死了，不在更改，</p>
       <p><JS>预编译函数的时候，将其中的变量提前声明</JS></p>
   </div>


    <script language="JavaScript">

    //提前声明，在js预编译的时候
    /*
        //无提前声明,返回空
        function f1(){
            console.log(name);
        }
        f1();       //返回空

        //预编译时提前声明，返回undefined
        function f1(){
            console.log(name);
            var name = "lucy";
            var age = 5;
        }
        f1();       //undefined
    */

    //每个函数的作用域，在预编译的时候就明确了，之后不在改变
        /*
        var name = "lucy";
        function f1(){
            var name = "dognxue";
            function f2(){
                console.log(name);
            };
            f2();
        }
        f1();       //dognxue
        */
        var name = "lucy";
        function f1(){
            var name = "dognxue";
            function f2(){
                console.log(name);
            };
            return f2;
        }
        ret = f1();
        ret();      //dognxue

    </script>
</body>
</html>

View Code

　　　　　　变量预编译声明时确定取值范围就是作用域链，之后不改变；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        name = "seven";
        function Bar(){
            console.log(name);
        };

        function F2(){
            var name = "lucy";
            return Bar;
        };

        var ret = F2();
        ret();   //seven


    </script>
</body>
</html>

View Code

　　注意3：JS中函数闭包的概念，相当于python中的装饰器，本质就是函数的嵌套，使用时注意作用域范围，由内而外确定，

四、面向对象

　　JS中不存在类的概念，但是可以通过函数进行构造，创建类和对象时，需要注意应用原型提高内存效率，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>

    </style>

</head>
<body>
   <div>
       <p>JS中不存在类的概念，可使用函数创建类，实现面向对象</p>
       <p>注意创建类和对象的时候，使用原型，避免内存级的重复，提高效率，</p>
   </div>


    <script language="JavaScript">
    /*
    //方式一:类方法直接放在构造函数中，每次创建对象，都会重复创建类方法，占用较多内存，
    function Foo(name,age){
        this.name = name;
        this.age = age;
        this.func = function(){
            return this.name + this.age;
        }
    }
    f1 = new Foo("lucy",6);
    f2 = new Foo("dongxuew",33);
    console.log(f1);                //foo {name: "lucy", age: 6, func: ƒ}
    console.log(f2);                //foo {name: "dongxuew", age: 33, func: ƒ}
    console.log(f1.func());        //lucy6
    console.log(f2.func());        //dongxuew33


    //方式二：类方法以字典形式存放在类中，不在构造方法中，每次创建对象时，不重复创建类方法
    function Foo(name,age){
        this.name = name;
        this.age = age;
    };
    Foo.prototype = {
        func1 : function(){
            return this.name + this.age;
        },
        func2 : function(){
            return this.age + this.name;
        },
    };
    f = new Foo("lucy",6);
    console.log(f);                 //Foo {name: "lucy", age: 6}
    console.log(f.func1());         //lucy6
    console.log(f.func2());         //6lucy
    */

    //方式三:类方法直接单独定义，不在构造方法中，每次创建对象时，不重复创建类方法，
    function Foo(name,age){
        this.name = name;
        this.age = age;
    };
    Foo.prototype.func1 = function(){return this.name + this.age;};
    Foo.prototype.func2 = function(){return this.age + this.name;};

    f = new Foo("lucy",6);
    console.log(f);                 //Foo {name: "lucy", age: 6}
    console.log(f.func1());         //lucy6
    console.log(f.func2());         //6lucy


    </script>
</body>
</html>

View Code

发表于 2017-08-14 09:55 笨笨是个名字阅读(118) 评论(0) 收藏举报

刷新页面返回顶部

JS——语句、函数与面向对象

公告

导航