JavaScript 一些语言特性

Posted 2020-12-13 zsbenn

1.函数原型对象 Function 的使用

　　 <!--将字符串转换成可执行的代码-->
    小朋友，请输入简单计算
    <input type="text" id="calc"/>
    <input type="button" value="计算" onclick="calc()"/>
    结果：<span id="result"></span>
    <script>
        function calc(){
            /*
                函数原型Function，可以将里面的语句转换成代码进行执行
            */
            var t = new Function(‘return ‘+document.getElementById("calc").value+‘;‘);
            document.getElementById(‘result‘).innerhtml= t();
        }
    </script>

 

2.JSON的使用

　　<!--JSON的使用-->
    <script>
        debugger;
        var json = {
            xx:[1,34,{name:"张三",arr:[1,2,3,"abc"]}],
            yy:34
        }    
        /*将JSON转换成字符串*/    
        var strJson = JSON.stringify(json);
        /*将字符串转换成JSON*/
        var json2 = JSON.parse(strJson);
    </script>


    <!--利用JSON进行对象克隆-->
    <script>
        var obj = {a:1, b:2};
        var obj_clone = JSON.parse(JSON.stringify(obj));
    </script>

 

3.对象和数组的统一

　　<script>
        var arr = [[1,2,3],[1,2,3]];
        var arr1 = new Array(1,2,3,"abc");    
        arr1[0]=20;
        arr1[100]=12;//可以越界，且按语义正常执行

        var obj = {a:1, "b":"abc", "zhang san":"name", "age":23};
        
        obj.b = 45;        //1
        obj["b"] = 67;    //2和1等价
        var b = ‘123‘;    
        obj[b]=67;        //3和1不等价

        obj["zhang san"] = "123";    //4
        obj["arr"] = 1;                //5
        obj[arr] = 1;                //6和5不等价，此时obj中多了 arr:1 这样的值

        // 遍历json对象的key集合
        for(var key in obj)
            alert(key+":"+obj[key]);
    </script>

 

4.join和split

    <script>
        // join将数组通过某种方式连接成字符串
        var arr = ["zhangsan","lisi","wangwu"];
        var arrStr = arr.join(";");// 用";"进行连接

        // split将字符串通过某个分隔符进行分割
        var str = "123465 45647 123";
        var strArr = str.split(" ");
        var sum = 0;
        for(var i in strArr)
            sum += parseInt(strArr[i], 10);//字符串->十进制
    </script> 

 

5.类，方法，函数，独享空间和共享空间

    <!--类，方法和函数，共享空间和独享空间-->
    <script>
        debugger;

        // 定义在这里的都是对象的独享空间
        function f(_name,_age){
            this.name = _name;
            this.age = _age;
            return 1;
        }
        
        // 通过prototype定义的是类的共享空间
        f.prototype.getName = function(){
            return this.name;
        }
        f.prototype.sex = 1;

        var o = {};
        o.f = f;                    // 此时f被用作对象的方法，里面的this指的是对象o

        var r1 = f(‘zsben‘,42);        // 此时f被用作函数调用，里面的this指的是全局window
        var obj2 = new f(‘z1‘,12);
        var obj3 = new f(‘z2‘,32);    // 此时f被用作类进行构造，里面的this指的是构造出来的对象 

        o.f(‘z3‘,56);                // 调用o的方法f

        f(‘xxx‘,100);                // 此时window的name=‘xxx‘,age=100

        // 修改共享空间的属性
        obj2.sex = 2;                // 通过对象修改共享空间：此时是将共享空间的属性拷贝一份到了obj2的独享空间
        f.prototype.sex = 3;        // 通过原型修改共享空间：只能通过原型来改变共享空间的值

    </script>

 

6.继承和多态

　　<!--继承与多态机制-->
    <script>
        function Person(_name,_age){
            this.name = _name;
            this.age = _age;
        }
        function Student(_no){
            this.no = _no;
        }
        // 将父亲拷贝到共享空间，就是继承了父亲属性
        Student.prototype = new Person("NoName", 0);
        
        var p1 = new Person("张三",23);
        var p2 = new Person("李四",24);

        var s1 = new Student("101010");
        var s2 = new Student("101011");

        // 此时对象要修改共享空间的属性，就直接复制一份属性到独享空间去了，不会影响共享空间的值
        s1.name = "王五"; 
        s2.name = "赵六";

    </script>