JavaScript的原生类型以及Microsoft AJAX Library的相关扩展(1)

来源：互联网发布：淘宝店美人药妆编辑：程序博客网时间：2024/06/05 15:31

ajax服务器端还有部分内容,我没有完全理解,所以就直接记录下客户端的编成,等理解了回头继续记录下

1,Microsoft AJAX Library

Microsoft Ajax Library就是asp.net ajax的客户端部分,是一个纯客户端框架,并且提供了javaScript扩展和基础类库

2,javaScript的原生类型

Object原生类型:

1, 一个无须的集合,可以存放任意类型的对象.

2, 常作为字典使用,如: var o=new Object();

o.ItemName="";

o["ItemName"]="";

3, 可以使用for-in遍历字典中的每一项

4, 禁止扩展其prototype对象

注意: Microsoft Ajax Library并没有扩展object对象

下面的方法出现在所有对象中,新对象一般都覆盖了这些方法

1,toString() 得到表示当前对象与环境无有关的字符串

2, valueOf() 返回表示该对象的value

3, hasOwnProperty(prorertyName) 对象上是否直接定义了某个属性

4, isPrototypeOf(obj) obj是不是当前对象的prototype对象

5,propertyIsEnumerable(properyName) 某属性是否可遍历

Object常用方法例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body>
<div id="message"></div>
<script type="text/javascript" language="javascript">
    function display(text){
        document.getElementById("message").innerHTML+=(text+"<br />");
    }
    function useAsDictionary(){
        var o=new Object();
        //俩种赋值方法
        o["name"]="Zhang San";
        o.age=25;
        //俩种取值方法
        display("Name: "+o.name);
        display("Age: "+o["age"]);
        display("---------------------");
        //也可以这么娶值
        display("Name:  "+o["name"]);
        display("Age: "+o.age);
        display("---------------------");
    }
    
    function useForIn(){
       //作为字典覆值取值
        var oo=new Object();
        for(var i=0;i<10;i++){
            var key="key_"+i;
            oo[key]=Math.random();
        }
        //删除一个元素
        delete oo["key_5"];
        for( var key in oo){
            display("Key:"+key +", Value: "+oo[key]);
        }
    }
    //函数调用
    useAsDictionary();
    useForIn();
</script>
</body>
</html>

Array原生类型

1,是一个长度可变数组对象的数组对象

2,构造Array对象方法: new Array();定义空数组

new Array(3);长度为2的数组

new Array(1,"haha");有俩个元素的数组

属性方法:

　　　　　length属性：　数组长度，可读写

　　　　　toString()方法：　返回逗号分割的字符串

　　　　　concat([item1[,item2[,...]]])方法：返回一个新数组，保存了原数组所有的元素和所有的参数

　　　　　push([item1[,item2[,...]]])方法：在数组尾添加一个或多个元素

　　　　　pop()方法：从数组尾去除并返回元素

　　　　　shift()方法：从数组头去除并返回元素

　　　　　unshift([item1[,item2[,...]]])方法：在数组头添加一个或多个元素

　　　　　join(separator)方法：返回以separator作为分隔符得到一个连接所有元素的字符串，类似StringBuilder加快连接字符串

　　　　　reverse()方法：将数组内所有元素逆转

　　　　　sort(compareFunction)方法：参数为一个方法，用于比较俩个元素

　　　　　　　　　　　　　　　　　　　省略了参数则直接使用<,==,>比较俩个元素

　　　　　slice(start,end)方法：返回新数组，不影响旧数组

　　　　　　　　　　　　　　　新数组包含从下标start开始到下标end-1的元素

　　　　　　　　　　　　　　　如果省略了end则包含从下标start开始至末尾的所有元素

　　　　　　　　　　　　　　　如果参数为负数，则表示数组的“倒数”第几个的下标

　　　　　　　　　　　　　　　如果start元素在end之后或者相同，则返回空数组

　　　　　splice(start,deletCount[,item1[,item2[,...]]])方法：

　　　　　　　　　　　　最灵活，影响当前数组

　　　　　　　　　　　　从下标start的元素开始，删除deleteCount个元素，并在当前位置开始插入剩余参数的元素

　　　　　　　　　　　　删除元素：splice(2,1) 从第２个元素删除一个元素

　　　　　　　　　　　　插入元素：splice(2,0,"hello","world") 从第２个元素开始删除０个元素，并插入俩个元素

　　　　　　　　　　　　替换元素：splice(2,1,"hello","world") 从第２个元素开始删除１个元素，并插入俩个(也就是说俩个参数替换了删除掉的那个元素)

使用例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body>
<div id="message"></div>
<script type="text/javascript" language="javascript">
    function display(text){
        document.getElementById("message").innerHTML+=(text+"<br />");
    }
    Array.prototype.display=function(){
        //调用了上面的display方法,然后传入自己字符串
        window.display("a: "+this);
    }
    
    var a=new Array(1,2,3,4,5);//输出: a={1,2,3,4,5};
    display("Array Test:");
    //给数组尾添加俩个元素
    display("a.push(6,7)");
    a.push(6,7);//{1,2,3,4,5,6,7}
    a.display();
    //给数组头删除一个元素并返回删除的元素
    display("a.shift():"+a.shift());
    a.display();//{2,3,4,5,6,7}
    
    //给数组头添加一个元素
    display("a.unshift(8)");
    a.unshift(8);
    a.display();//{8,2,3,4,5,6,7}
    
    //数组末尾删除一个元素并返回删除元素
    display("a.pup():"+a.pop());
    a.display();//{8,2,3,4,5,6}
    
    //返回一个新数组包含原数组的元素和参数
    
    display("a.concat(9,10):"+a.concat(9,10)); //{8,2,3,4,5,6,9,10}
    a.display(); //{8,2,3,4,5,6}
    
    //用"]["分割数组
    display("'['+a.join('][')+']':"+"["+a.join("][")+"]");//{[8][2][3][4][5][6]}
    a.display();//原数组不变{8,2,3,4,5,6}
    
    //在原来数组中取新数组
    display("a.slice(2,5):"+a.slice(2,5));//得到新数组{3,4,5}
    display("a.slice(2,-2):"+a.slice(2,-2)); //得到新数组{3,4}
    a.display();//原数组不变{8,2,3,4,5,6}
    
    display("a.splice(3,2):"+a.splice(3,2));//删除(4,5)
    a.display();//{8,2,3,6}
    
    display("a.splice(2,0,7,8):"+a.splice(2,0,7,8));
    a.display();//{8,2,7,8,3,6}
    
    display("a.splice(3,1,9,10):"+a.splice(3,1,9,10));
    a.display();//{8,2,7,9,10,3}
    
    display("a.sort():"+a.sort());
    a.display();//{10,2,3,6,7,8,9}
    
    display("a.sort(function(x,y){return y-x;})");
    a.sort(function(x,y){return y-x;});
    a.display();//{10,9,8,7,3,2}
    
    
</script>
</body>
</html>

Array原生类的扩展(Microsoft ajax Library)

全都是静态方法，为了和其他类库兼容(Prototype)，提供了一些方用的方法主要是对原来类方法的简单封装，主要是为了提供语义良好的方法名。

　　Array.enqueua(array,item)方法：　入队列操作，将item添加至array末尾

　　Array.dequeue(array)方法：　出队列操作，返回并删除array的第一个元素

　　Array.addRange(array,items)方法：将items数组中所有元素添加至array末尾

　　Array.contains(array,item)方法:　如果array中包含item元素，则返回true，否则返回false

Array.clear(array)方法：　清除array中的所有元素

　　Array.insert(array,index,item)方法：　将item插入至array中下标为index的位置

　　Array.remove(array,item)方法：　从array中移除下标为index的元素

　　Array.removeAt(array,index)方法：　从array中移除下标为index的元素

　　Array.clone(array)方法：　放回一个与array相同的新数组

　　Array.parse(value)方法：　将表示数组的json 字符串变为一个数组对象　

　　Array.indexOf(array,item,start)方法：获得item在array中的下标，从下标为start开始查找．如果array中没有item元素，那么返回-1

Ａrray.add(array,item)方法：将item添加至array末尾，它和Array.enqueue其实是同一个函数

　 Array.forEach(array,method,instance)方法: 移instance为上下文this引用，将array中的每个元素依次作为参数，循环调用method方法

　下面的例子介绍下　Array.forEach()方法：　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication5._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
       <script type="text/javascript" language="javascript">
       function method(elt,index,array){
            this.reslut+="["+index+"."+elt+"]";
       }
       var array="I am Zhang San".split(" ");
       var obj={reslut:""};
       Array.forEach(array,method,obj);
       alert(obj.reslut);
       </script>
    </form>
</body>
</html>

Error元生类型

　　表示错误对象　子类有：　EvalError,URIError等

　　捕获方式：　

　　　　　　　try{throw new Error()} carch(e){...}

Error对象IE和fireFoc共有属性：　message错误信息

　　　　　　　　　　　　特定属性：　　　

　　　　　　　　　　　　IE:description:同message属性

　　　　　　　　　　　　　number:错误编号，只有脚本引擎抛出的错误才有该属性

　　　　　　　　　　　　FireFox:fileName:创建错误的文件

　　　　　　　　　　　　　　　　lineNumber:创建错误对象的行号

　　　　　　　　　　　　　　　　stack:创建错误时的堆栈信息

例子：　抛出捕获显示错误：　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function throwError(){
    throw new Error("Custom Error!");
}
try{
    throwError();
}catch(e){
    var errorMsg=("Message:"+e.message+"/n");
    if(!e.stack)//IE
    {
        errorMsg+=("Description:"+e.description+"/n");
        errorMsg+=("Number:"+e.number+"/n");
    }else{
        errorMsg+=("Line Number:"+e.lineNumber+"/n");
        errorMsg+=("File Name:"+e.fileName+"/t/n");
        errorMsg+=("Stack:"+e.stack);
    }
    alert(errorMsg);
}
</script>
</body>
</html>

Error原生类型的扩展

　Error.create(message,errorInfo)方法：创建新的Error对象

　　　　　　　　　　　　　　　　　　　将Error对象的message属性设为true

将errorInfo上的信息附加到Error对象

　Error.prototype.popStackFrame()方法：为Error对象整理出更优雅的信息对ie无效，方法是返回Error对象而不是抛出则在返回前条用这个方法

例子：　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AJAXEnabledWebApplication5.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript" language="javascript">
        function niceError(){
            var e=Error.create("Error Message",{customMessage:"Custom Message"});
            e.popStackFrame();
            return e;
        }
        try{
            throw niceError();
        }catch(e){
             var errorMsg=("Message:"+e.message+"/n");
             errorMsg+=("Line Number:"+e.lineNumber+"/n");
             errorMsg+=("File Name:"+e.fileName+"/t/n");
             errorMsg+=("Stack:"+e.stack);
                alert(errorMsg);
        }
        </script>
    </div>
    </form>
</body>
</html>

Function原生类型

　与Array,String等类型处于同等地位，每个方法均为Function类型的实例

　　如：typeof(Array)==typeof(Function)=="function"

　方法调用时候根据发起的对象来确定this上下文的引用：

　Function.prototype.apply(instance,args)　

Function.prototype.call(instance,[arg1[,arg2[,...]]])　

使用例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
</head>
<body>
<div id="message"></div>
<script type="text/javascript" language="javascript">
function display(text){
    document.getElementById("message").innerHTML+=(text+"<br />");
}
function aMethod(){
    var result=this.toString();
    for(var i=0;i<arguments.length;i++){
        result+=(","+arguments[i]);
    }
    return result;
}
var a=new String("I am String A");
var b=new String("I am String B");
a.aMethod=b.aMethod=aMethod;
display("aMethod():"+aMethod());
display("a.aMethod():"+a.aMethod());
display("b.aMethod():"+b.aMethod());
               display("a.aMethod.call(b,1,2,3):"+a.aMethod.call(b,1,2,3));
               display("b.aMethod.apply(a,[1,2,3]):"+b.aMethod.apply(a,[1,2,3]));
</script>
</body>
</html>

Function原生类型扩展

Function.createDelegate(instance,method)方法：得到一个方法引用，执行它时则会调用method方法，并保证method方的上下文饮用为instance

　Function.createCallBack(method,context)方法：得到一个方法引用，执行它时则调用method方法,并将context作为额外　　　　　　　　　　　　　　　　　　　　　　　　的参数传入

例子：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AJAXEnabledWebApplication5.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server"  >
    
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <input id="btn" type="button" value="Click Me--Function.createDelegate" />
    <input id="btn2" type="button" value="Click Me--Function.createCallBack" />  
    <script language="javascript" type="text/javascript">
    var obj={
        text:"hello",
        onClick:function(e){
            alert(this.text);
        }
    };
    //直接调用 返回hello
    //obj.onClick();
    
    // $addHandler($get("btn"),"click",obj.onClick);
    var onClickDeleget=Function.createDelegate(obj,obj.onClick);
    $addHandler($get("btn"),"click",onClickDeleget);
    
    var obj2={
     text:"world",
     onClick:function(e,args){
        alert(this.text+" " +args );
     }
    };
    var onClickDelegate2=Function.createCallback(Function.createDelegate(obj2,obj2.onClick),"world");
    $addHandler($get("btn2"),"click",onClickDelegate2);
    </script>
    </form>
</body>
</html>