• JavaScript 一些语言特性


    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>
  • 相关阅读:
    关于javascript中私有作用域的预解释
    javascript中的数据类型
    关于JS面向对象继承问题
    自己写的,js 评分插件
    css的border效果
    css样式表分类
    js DOM的几个常用方法
    js object 对象 属性和方法的使用
    js 函数function的几种形式
    HTML5-新API-geolocation-实例-距离跟踪器
  • 原文地址:https://www.cnblogs.com/zsben991126/p/13198272.html
Copyright © 2020-2023  润新知