`
wenxin2009
  • 浏览: 315320 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS复习二

    博客分类:
  • js
 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<title>JS Study</title>
<meta charset="utf-8">
<style>
    .userData {behavior:url(#default#userdata);}
</style>
<script type="text/javascript">
    //组合使用构造函数模式和原型模式
    function Person(name,age,job){
        this.name=name;
        this.age=age;
        this.job=job;
        this.friends=["Shelby","Court"];
    }
    Person.prototype={
        constructor:Person,
        sayName:function(){
            alert(this.name);
        }
    }
    var person1=new Person("test",20,"software");
    var person2=new Person("test2",22,"software2");
    person1.friends.push("Van");
    alert(person1.friends);
    alert(person2.friends);
    alert(person1.friends===person2.friends);//false
    alert(person1.sayName===person2.sayName);//true
    
    /*
    //原型对象问题
    function Person(){
        
    }
    Person.prototype={
        constructor:Person,
        name:"test",
        age:20,
        job:"IT",
        friends:["Shelby","Court"],
        sayName:function(){
            alert(this.name);
        }
    };
    var person1=new Person();
    var person2=new Person();
    person1.friends.push("Van");
    alert(person1.friends);//Shelby,Court,Van
    alert(person2.friends);//Shelby,Court,Van
    alert(person1.friends===person2.friends);//true
     */
    
    /*
    //构造函数模式
    function Person(name,age,job){
        this.name=name;
        this.age=age;
        this.job=job;
        this.sayName=function(){
            alert(this.name);
        };
    }
    var person1=new Person("test",20,"IT");
    person1.sayName();
     */
    
    /*
    //Math对象
    var max=Math.max(3,54,32,16);
    alert(max);
    var min=Math.min(3,54,32,16);
    alert(min);
    //Math舍入方法
    //ceil()向上舍入
    //floor()向下舍入
    //round()四舍五入
    alert(Math.ceil(25.9));//26
    alert(Math.floor(25.5));//25
    alert(Math.round(25.6));//26
     */
    
    /*
    //Global全局对象
    //eval()方法
    eval("alert('hi')");
    eval("function sayHi(){alert('hi')}");
    sayHi();
     */
    
    /*
    //编码
    var uri="http://www.english hello.com";
    //编码后除了空格之外的其他字符都原封不动,只有空格被替换成了%20 http://www.english%20hello.com 
    alert(encodeURI(uri));
    //对所有非字母数字编码
    alert(encodeURIComponent(uri));//http%3A%2F%2Fwww.english%20hello.com
    
    //解码
    var uri2="http%3A%2F%2Fwww.english%20hello.com";
    alert(decodeURI(uri));
    alert(decodeURIComponent(uri));
     */
    
    /*
    var text="cat, bat, sat, fat";
    var pos=text.search(/at/);
    alert(pos);//1
     */
    
    /*
    //String中的slice()、substr()和substring()方法
    var stringValue="hello world";
    alert(stringValue.slice(3));//lo world
    alert(stringValue.slice(3,7));//lo w
    alert(stringValue.substring(3,7));//lo w
    alert(stringValue.substr(3,7));//lo worl
     */
    
    /*
    //call()、apply()方法最强大的地方是能够扩充函数赖以运行的作用域
    window.color="red";
    var o={color:"blue"};
    function sayColor(){
        alert(this.color);
    }
    sayColor();//red
    sayColor.call(this);//red
    sayColor.call(window);//red
    sayColor.call(o);//blue
     */
    
    /*
    //call()方法
    function sum(num1,num2){
        return num1+num2;
    }
    function callSum(num1,num2){
        return sum.call(this,num1,num2);
    }
    alert(callSum(10,10));
     */
    
    /*
    //apply方法
    function sum(num1,num2){
        return num1+num2;
    }
    function callSum1(num1,num2){
        return sum.apply(this,arguments);//传入arguments对象
    }
    function callSum2(num1,num2){
        return sum.apply(this,[num1,num2]);//传入数组
    }
    alert(callSum1(10,10));//20
    alert(callSum2(10,10));//20
     */
    
    /*
    //compare排序
    function compare(value1,value2){
        if(value1<value2){
            //return 1;
            return -1;
        }else if(value1>value2){
            //return -1;
            return 1;
        }else{
            return 0;
        }
    }
    var values=[0,5,2,7,10];
    values.sort(compare);
    alert(values);
     */
    
    /*
    //重排序方法
    var values=[1,2,3,4,5];
    values.reverse();
    alert(values);//5,4,3,2,1
    var values2 = [0,5,2,7,3];
    values2.sort();
    alert(values2);//0,2,3,5,7
     */
    
    /*
    //数组(队列方法)
    var colors = new Array();
    var count=colors.unshift("red","green");//推入两项
    count=colors.unshift("black");
    var item=colors.pop();
    alert(item);//green
    alert(colors.length);
     */
    
    /*
    //数组(队列方法)
    var colors = new Array();//创建一个数组
    var count=colors.push("red","green");//推入两项
    alert(count);
    count=colors.push("black");//推入另一项
    alert(count);
    var item=colors.pop();//取得最后一项
    alert(item);
    var item2=colors.shift();//取得第一项
    alert(item2);
     */
    
    /*
    //数组
    var colors=["red","blue","green"];
    colors.length=4;
    colors[3]="yellow";
    //alert(colors[3]);
    //alert(colors.toString());
    //alert(colors.valueOf());
    //alert(colors);
    alert(colors.join("||"));
     */
    
    /*
    //定义对象(方法一)
    var person={
        "name":"test",
        "age":28
    };
    //定义对象(方法二)
    var person={};
    person.name="test";
    person.age=28;
     */
    
    /*
    //模块模式(闭包)
    function BaseComponent(){
        
    }
    function OtherComponent(){
        
    }
    var application=function(){
        //私有变量和函数
        var components=new Array();
        //初始化
        components.push(new BaseComponent());
        //公共
        return {
            getComponentCount:function(){
                return components.length;
            },
            registerComponent:function(component){
                if(typeof component == "object"){
                    components.push(component);
                }
            }
        };
    }();
    application.registerComponent(new OtherComponent());
    alert(application.getComponentCount());
     */
    
    /*
    //闭包错误定义
    function(){
        //这里是块级作用域
    }();//出错
    //闭包正确定义
    (function(){
        //这里是块级作用域,里面的变量用完就销毁了
     })();
     */
    
    /*
    //闭包
    function createFunctions(){
        var result = new Array();
        for(var i=0;i<10;i++){
            result[i] = function(num){
                return function(){
                    return num+num2;
                };
            }(i);//定义并立即调用了一个匿名函数
        }
        return result;
    }
    var funcs=createFunctions();
    //输出数组
    for(var i=0;i<funcs.length;i++){
        document.write(funcs[i]()+"<br/>");
    }
     */
    
    /*
    //UserData文本框标记的应用(只支持window+IE,其他的不支持)
    function fnSaveInput(){
         
        var oPersist=oPersistForm.oPersistInput;
        oPersist.setAttribute("sPersist",oPersist.value);//将oPersist.value存储为sPersist属性中
        alert(0);
        oPersist.save("oXMLBranch");//存储在名为oXMLBranch的UserData存储区
        alert(1);
    }
    function fnLoadInput(){
        var oPersist=oPersistForm.oPersistInput;
        oPersist.load("oXMLBranch");//载入在名为oXMLBranch的UserData存储区
        oPersist.value=oPersist.getAttribute("sPersist");//将oPersist属性赋值给oPersist.value
    }
     */
    
    /*
    //私有域
    function dwn(s){
        document.write(s+"<br/>");
    }
    var a,b;
    (function(){
     //(function(){...})();的写法利用闭包构成一个私有域
     showAB=function(){
     dwn(a);
     dwn(b);
     }
     var a=10;
     var b=20;
     })();
    a=-10;
    b=-20;//外部改写a,b
    dwn(a);
    dwn(b);
    showAB();//不会破坏showAB()得到的内部的a,b的值
     */
    
    /*
    //闭包和面向对象
    function dwn(s){
        document.write(s+"<br/>");
    }
    //定义一个Foo类型
    function Foo(a){
        function _pc(){//私有函数
            return a;
        }
        //公有的函数,通过它产生的闭包可以访问对象内部的私有方法_pc()
        this.bar=function(){
            dwn("foo "+_pc()+"!");
        }
    }
    var obj=new Foo("bar");
    obj.bar();
     */
    
    /*
     //闭包的封闭性
     function dwn(s){
     document.write(s+"<br/>");
     }
     (function(){
     //封闭的私有域
     var innerX = 10,innerY = 20;
     //开放的公共域
     outerObj = {x:innerX,y:innerY};
     })();
     
     try{
     dwn(innerX);//内部数据无法访问
     }catch(ex){
     dwn("内部数据无法访问");
     }
     dwn(outerObj.x);//通过外部接口访问
     */
    
    /*
    //装箱和拆箱
    function dwn(s){
        document.write(s+"<br/>");
    }
    //Number的装箱
    Number.prototype.foo=function(){
        dwn(this instanceof Number);//true
        dwn(typeof(this));//object
    }
    //定义一个基本类型Number的对象
    var num=10;
    //num.foo()执行时自动装箱为Number对象
    num.foo();
    
    //Number的拆箱
    //定义一个包装类型Number的对象
    var objNum = new Number(10);
    //调用valueOf可以得到拆箱后的数值
    dwn(objNum.valueOf() instanceof Number);//false
    dwn(typeof(objNum.valueOf()));//number
    //String的装箱
    String.prototype.foo=function(){
        dwn(this instanceof String);//true
        dwn(typeof(this));//object
    }
    //定义一个基本字符串变量str
    var str = "www.51js.com";
    //str.foo()执行自动装箱为String对象
    str.foo();
    
    //String的拆箱
    //定义一个包装类型String的对象
    var objStr = new String("abc");
    //调用toString()可以得到拆箱后的字符串
    dwn(objStr.toString() instanceof String);//false
    dwn(typeof(objStr.toString()));//string
     */
    
    
    /*
    //值和引用
    function dwn(s){
        document.write(s+"<br/>");
    }
    //va是数值类型,vb是布尔类型
    var va=10,vb=true;
    //ra是数组,rb是对象
    var ra=[1,2,3],rb={x:1,y:2};
    //参数为值类型的函数例子
    function ValueType(x,y){
        x++;
        y=false;
        dwn(x);
        dwn(y);
    }
    //参数为引用类型的函数例子
    function ReferTypes(x,y){
        x.push(4);
        delete y.x;
        dwn(x);
        dwn(y.x);
    }
    ValueType(va,vb);
    dwn(va);
    dwn(vb);
    ReferTypes(ra,rb);
    dwn(ra);
    dwn(rb.x);
    //运行结果:
    //11
    //false
    //10
    //true
    //1,2,3,4
    //undefined
    //1,2,3,4
    //undefined
     */
    
    
    /*
    //多态
    function dwn(s){
        document.write(s+"<br/>");
    }
    //定义一个Animal类型
    function Animal(){
        this.bite = function(){
            dwn("animal bite!");
        }
    }
    //定义一个Cat类型,继承Animal类型
    function Cat(){
        this.bite = function(){
            dwn("Cat bite");
        }
    }
    Cat.prototype = new Animal();
    //定义一个Dog类型,继承Animal类型
    function Dog(){
        this.bite = function(){
            dwn("dog bit!");
        }
    }
    Dog.prototype = new Animal();
    //定义一个AnimalBite多态方法
    function AnimalBite(animal){
        if(animal instanceof Animal){
            animal.bite();
        }
    }
    //构造一个Cat对象
    var cat = new Cat();
    //构造一个Dog对象
    var dog = new Dog();
    //Cat和Dog都是Animal,AnimalBite是一个多态函数
    AnimalBite(cat);
    AnimalBite(dog);
     */
    
    /*
    //实现接口
    IPoint = {x:undefined,y:undefined}
    var Point = {}
    Point.prototype = new IPoint();
    var p = new Point();
    for(var each in p){
        alert(each);//包含有属性x和y,因为Point实现了IPoint接口
    }
     */
    
    /*
    //多重继承
    Function.prototype.extends = function(obj){
        for(var each in obj){
            this.prototype[each] = obj[each];
        }
    }
    function Transportation(){
        
    }
    function Motorcar(){
        
    }
    //Motorcar继承Transportation
    Motorcar.extends(new Transportation());
    function Ship(){
        
    }
    //Ship继承Transportation
    Ship.extends(new Transportation());
    function TwoRoosts(){
        
    }
    TwoRoosts.extends(new Motorcar());
    TwoRoosts.extends(new Ship());//TwoRoosts同时继承Motorcar和Ship
     */
    
    
    /*
    //混合继承法
    function Point2D(x,y){
        this.x=x;
        this.y=y;
    }
    function ColorPoint2D(x,y,c){
        Point2d.call(this,x,y);//这里是构造继承,调用了父类的构造函数
        this.color=c;
    }
    //这里用了原型继承,让ColorPoint2D以Point2D对象为原型
    ColorPoint2D.prototype = new Point2D();
    */
    
    /*
    //实例继承法
    function dwn(s){
        document.write(s+"<br/>");
    }
    function MyDate(){
        var instance=new Date();//instance是一个新创建的日期对象
        instance.printDate = function(){
            document.write("<p>"+instance.toLocaleString()+"</p>");
        }//对instance扩展printDate()方法
        return instance;//将instance作为构造函数的返回值返回
    }
    
    var md = new MyDate();
    dwn(md.toGMTString());
    md.printDate();
     */
    
    /*
    //原型继承法
    function dwn(s){
        document.write(s+"<br/>");
    }
    //定义一个Point类型
    function Point(dimension){
        this.dimension = dimension;
    }
    //定义一个Point2D类型,继承Point类型
    function Point2D(x,y){
        this.x=x;
        this.y=y;
    }
    Point2D.prototype.dimension=function(){
        return Math.sqrt(this.x*this.x+this.y*this.y);
    }
    Point2D.prototype=new Point(2);//Point2D继承Point
    //定义一个Point3D类型,也继承Point类型
    function Point3D(x,y,z){
        this.x=x;
        this.y=y;
        this.z=z;
    }
    Point3D.prototype=new Point(3);//Point3D也继承了Point
    //构造一个Point2D对象
    var p1=new Point2D(0,0);
    var p2=new Point3D(0,1,2);
    dwn(p1.dimension);
    dwn(p2.dimension);
    dwn(p1 instanceof Point2D);//p1是一个Point2D
    dwn(p1 instanceof Point);//p1也是一个Point
    dwn(p2 instanceof Point);//p2也是一个Point
    */
     
    /*
    //构造继承法
    function dwn(s){
        document.write(s+"<br/>");
    }
    //定义一个Collection类型
    function Collection(size){
        this.size=function(){return size};//公有方法,可以被继承
    }
    Collection.prototype.isEmpty=function(){//静态方法,不能被继承
        return this.size()==0;
    }
    //定义一个ArrayList类型,它继承Collection类型
    function ArrayList(){
        var m_elements = [];
        m_elements=Array.apply(m_elements,arguments);
        
        //ArrayList类型继承Collection
        this.base=Collection;
        this.base.call(this,m_elements.length);
        
        this.add=function(){
            return m_elements.push.apply(m_elements,arguments);
        }
        this.toArray=function(){
            return m_elements;
        }
    }
    ArrayList.prototype.toString=function(){
        return this.toArray().toString();
    }
    //定义一个SortedList类型,它继承ArrayList类型
    function SortedList(){
        //SortedList类型继承ArrayList
        this.base=ArrayList;
        this.base.apply(this,arguments);
        
        this.sort=function(){
            var arr=this.toArray();
            arr.sort.apply(arr,arguments);
        }
    }
    //构造一个ArrayList
    var a=new ArrayList(1,2,3);
    dwn(a);
    dwn(a.size());//a从Collection继承了size()方法
    dwn(a.isEmpty);//a没有继承到isEmpty()方法
    //构造一个SortedList
    var b=new SortedList(3,1,2);
    b.add(4,0);//b从ArrayList继承了add()方法
    dwn(b.toArray());//b从ArrayList继承了toArray()方法
    b.sort();//b自己实现的sort方法
    dwn(b.toArray());
    dwn(b);
    dwn(b.size());//b从Collection继承了size方法
     */
    
    /*
    function dwn(s){
        document.write(s+"<br/>");
    }
    //定义一个类型ClassA
    function ClassA(){
        this.a=[];
    }
    //定义一个类型ClassB
    function ClassB(){
        this.b=function(){}
    }
    //ClassB以ClassA的对象为原型
    ClassB.prototype=new ClassA();
    //创建两个ClassB类型的对象
    var objB1=new ClassB();
    var objB2=new ClassB();
    //改变objB1对象中的a属性的值(引用类型传)
    objB1.a.push(1,2,3);
    dwn(objB2.a);
     */
    
    /*
    //prototype的实质
    function dwn(s){
        document.write(s+"<br/>");
    }
    //定义Point2D对象
    function Point2D(x,y){
        this.x=x;
        this.y=y;
    }
    Point2D.prototype.x=0;
    Point2D.prototype.y=0;
    //定义ColorPoint2D对象
    function ColorPoint2D(x,y,c){
        this.x=x;
        this.y=y;
    }
    //ColorPoint2D以Point2D对象为原型
    ColorPoint2D.prototype=new Point2D();
    ColorPoint2D.prototype.x=1;
    ColorPoint2D.prototype.y=1;
    //构造一个ColorPoint2D对象
    var cp=new ColorPoint2D(10,20,"red");
    dwn(cp.x);//10 先查找cp本身的属性
    delete cp.x;
    dwn(cp.x);//1 删除后查找上层原型链上的属性
    delete ColorPoint2D.prototype.x;
    dwn(cp.x);//0 删除后继续查找更上层原型链上的属性
     */
    
    /*
    //用prototype巧设getter
    function Point(x,y){
        if(x) this.x=x;
        if(y) this.y=y;
    }
    Point.prototype.x=0;
    Point.prototype.y=0;
    function LineSegment(p1,p2){
        //私有成员
        var m_firstPoint = p1;
        var m_lastPoint=p2;
        var m_width={
            valueOf:function(){return Math.abs(p1.x-p2.x)},
            toString:function(){return Math.abs(p1.x-p2.x)}
        }
        var m_height={
            valueOf:function(){return Math.abs(p1.y-p2.y)},
            toString:function(){return Math.abs(p1.y-p2.y)}
        }
        this.getFirstPoint=function(){
            return m_firstPoint;
            
            //function GETTER(){};//定义一个临时类型
            //将m_firstPoint设为这个类型的原型
            //GETTER.prototype=m_firstPoint;
            //构造一个这个类型的对象返回
            //return new GETTER();
        }
        this.getLastPoint = function(){
            return m_lastPoint;
        }
        this.length={
            valueOf:function(){return Math.sqrt(m_width*m_width+m_height*m_height)},
            toString:function(){return Math.sqrt(m_width*m_width+m_height*m_height)}
        }
    }
    //构造p1,p2两个Point对象
    var p1=new Point;
    var p2=new Point(2,3);
    //用p1、p2构造line1一个LineSegment对象
    var line1=new LineSegment(p1,p2);
    var lp=line1.getFirstPoint();
    lp.x=100;
    alert(line1.getFirstPoint().x);
    alert(line.length);
    */
    
    /*
    //带默认值的Point对象
    function dwn(s){
        document.write(s+"<br/>");
    }
    function Point(x,y){
        if(x) this.x=x;
        if(y) this.y=y;
    }
    //设定Point对象的x、y默认值为0
    Point.prototype.x=0;
    Point.prototype.y=0;
    //p1是一个默认(0,0)的对象
    var p1=new Point;
    //p2赋值(1,2)
    var p2=new Point(1,2);
    dwn(p1.x+','+p1.y);
    dwn(p2.x+','+p2.y);
     */
    
    /*
    //给原型对象添加属性
    function dwn(s){
        document.write(s+"<br/>");
    }
    function Point(x,y){
        this.x=x;
        this.y=y;
    }
    var p1=new Point(1,2);
    var p2=new Point(3,4);
    Point.prototype.z=0;//动态为Point的原型添加属性
    dwn(p1.z);
    dwn(p2.z);
     */
    
    /*
    //三种基本构造方法
    //第一种
    var a=new Object();
    a.x=1,a.y=2;
    //第二种
    var b={x:1,y:2};
    //第三种
    function Point(x,y){
        this.x=x;
        this.y=y;
    }
    var p=new Point(1,2);
     */
    
    //=====数据类型=================================================================
    /*
    //Math.floor取比当前数值小的最大整数
    document.writeln(Math.floor(12.5));
    document.writeln(Math.floor(-7.6));
    //Math.round四舍五入
    document.writeln(Math.round(12.5));
    document.writeln(Math.round(-7.6));
    //Math.ceil取比当前数值大的最小整数
    document.writeln(Math.ceil(12.5));
    document.writeln(Math.ceil(-7.6));
    //toFixed(n)保留n位小数
    var a=12.3456;
    document.writeln(a.toFixed(2));
     */
    
    /*
    //强制类型转换
    function dwn(s){
        document.write(s+"<br/>");
    }
    //var str='100';//字符串类型强制转换
    //var str=100;//数值类型的强制转换
    var str = {};//对象类型强制转换
    var s = String(obj);
    dwn(typeof(s)+':'+str);
    var num=Number(str);
    dwn(typeof(num)+':'+num);
    var obj=Object(str);
    dwn(typeof(obj)+':'+obj);
    var bool = Boolean(str);
    dwn(typeof(bool)+':'+bool);
    var fun=Function(str);
    dwn(typeof(fun)+':'+fun);
     */
    
    /*
    var a=110,b="50",c=40,d="123.95";
    var c1=a+b;//11050
    var c2=a-b;//60
    var c3=a+parseInt(b);//160
    var c4=a.toString()+c.toString();//11040
    var c5=a+parseFloat(d);//233.95
    document.write(c1+"<br/>"+c2+"<br/>"+c3+"<br/>"+c4+"<br/>"+c5);
    */
    
    /*
    //引用类型
    var a=[1,2,3];
    var b=a;
    b[0]=99;
    alert('a='+a+', b='+b);
     */
    
    /*
    //函数和闭包
    function parabola(a,b,c){
        var ret = function(x){
            return a*x*x+b*x+c;
        }
        ret.toString = function(){
            return a+"a^2+"+b+"x+"+c;
        }
        return ret;
    }
    var p1 = parabola(2,3,4);
    document.write(p1+"-->"+p1(15)+"<br/>");
    var p2 = parabola(2,-3,14);
    document.write(p2+"-->"+p2(15));
     */
    
    /*
    //构造函数
    function Point(x,y){
        this.x=x;
        this.y=y;
        //定义方法
        this.getDistance = function(){
            return Math.sqrt(this.x*this.x+this.y*this.y);
        }
        //重写toString方法
        this.toString = function(){
            return "("+this.x+","+this.y+")";
        }
    }
    //构造Point对象
    var pointA = new Point(1,2);
    var pointB = new Point(3,4);
    var pointC = new Point(-1,-2);
    //重载过的toString()方法显示它们
    document.write(pointA+"<br/>");
    document.write(pointB+"<br/>");
    //调用getDistance方法
    document.write(pointC.getDistance());
     */
    
    //数组
    /*var table = [100,110,120,130,140,150];
    alert(table[1]);*/
    /*var x=33;
    var y=x.toString(2);
    alert(y);
    var z = (255).toString(16);
    alert(z);*/
    
//======================================================================
    /*
//提交数据并响应服务器端应答
    function submit(url){
        alert(1);
        //创建XmlHttp对象
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        //以GET方式同info.xml交互
        xmlHttp.open("GET",url,true);
        xmlHttp.send();
        //回调dataReady,处理返回的数据
        xmlHttp.onreadystatechange = function(){
            dataReady(xmlHttp);
        }
        return false;
    }
    //对服务器应答的数据进行处理
    function dataReady(xh){
        if(xh.readyState==4){
            if(xh.status==200){
                //返回xml文本内容
                var resText = xmlHttp.responseText;
                alert(resText);
            }
        }
    }
     */
</script>

</head>

<body>
<form id="oPersistForm">
    <input class="userdata" type="text" id="oPersistInput"/>
    <input type="button" value="load" onclick="fnLoadInput()"/>
    <input type="button" value="save" onclick="fnSaveInput()"/>
</form>
</body>
</html>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics