Asp.Net Ajax 学习笔记9 JavaScript的原生类型以及Microsoft AJAX Library的相关扩展(上)_在 microsoft.jscript.stackframe.pushstackframeforme-优快云博客

本文链接：https://blog.youkuaiyun.com/firewolffeng/article/details/1925361

1、Object原生类型

它是一个无序的集合，可以存放任意对象类型
可以作为字典使用。
可以使用for-in遍历字典的中的每一项
不允许扩展它prototype对象，影响面太广。就像在C#中的Object类型，如果可扩展其公开方法，那么所有的类型都被扩展了。
Asp.Net Ajax没有扩展Object类型

Object的prototype

toString()/toLocaleString()	得到表示当前对象与环境无/有关的字符串
valueOf()	返回表示该对象的value（大部分类型会覆盖这个方法）
hasOwnProperty(propertyName)	对象上是否直接定义了某个属性
isPrototypeOf(obj)	obj是不是当前对象的prototype对象
propertyIsEnumerable(propertyName)	某属性是否可遍历

//使用new来实例一个Object对象，也可以用JSon字符串来实例化

//一个Obejct对象

var o = new Object(); // {}; {name : "Jeffrey"}

//通过字典方式给Object类型的对象属性赋值

o["name"] = "Jeffrey";

//也可以直接给Object类型的对象属性赋值

o.salary = 1000;

var dict = new Object();

for (var i = 0; i < 10; i++)

{

var key = "key_" + i;

dict[key] = Math.random();

}

//使用delete删除Object类型对象中的字段

//有点类似与c++中的删除内存的语法

delete dict["key_5"];

//使用for-in循环来遍历Object类型对象中的字段或属性

for (var key in dict)

{

display("Key: " + key + ", Value + " + dict[key]);

}

2、Array原生类型

长度可变数组对象，最大长度2^32−1 = 4294967295
构造此对象时可不指定大小/指定大小，也可以带Array里对象值构造，也就是说可以直接将Array里的元素作为参数构造，那么元素直接赋值到Array里

Array的prototype

length属性	数组长度，可读写
concat([ item1 [ , item2 [ , … ] ] ])	返回一个新数组，保存了原数组所有元素和所有的参数
push([ item1 [ , item2 [ , … ] ] ])	在数组尾添加一个或多个元素
pop()	obj是不是当前对象的prototype对象
shift()	从数组头去除并返回元素
unshift([ item1 [ , item2 [ , … ] ] ])	在数组头添加一个或多个元素
join(separator)	返回以separator作为分割符得到一个连接所有元素的的字符串
reverse()	将数组内所有元素逆转
sort(compareFunction)	参数为一个方法，用于比较两个元素,有两个参数。,比较函数的逻辑是：如果两参数的比较值小于0，则表示a必须出现在b前面，否则在b后面省略了参数则直接使用<, ==, >比较两个元素
slice(start, end)	返回新数组，不影响旧数组包含从下标start开始到下标end-1的元素如果省略end则包含从下标start开始至末尾的所有元素如果参数为负数，则表示数组的“倒数”第几个下标（即下标为n + array.length）如果start元素在end元素之后或相同，则返回空数组
splice (start, deleteCount [ , item1 [ , item2 [ , … ] ] ] )	最灵活的方法，影响当前数组从下标start的元素开始，删除deleteCount个元素，并在当前start位置开始插入剩余元素删除元素：splice(2, 1) 插入元素：splice(2, 0, "Hello", "World") 替换元素：splice(2, 1, “Hello”, “World”)

注：push、pop、shift三个方法组合使用能实现栈和队列。

3、Array原生类型的扩展

Array.enqueue	入队列操作，将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中移除item元素
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
Array.add(array, item)	将item添加至array末尾，它和Array.enqueue其实是同一个函数
Array.forEach(array, method, instance)	以instance为上下文this引用，将array中的每个元素依次作为参数，循环调用method方法

//elt每次调用此函数的Array里的元素

//index每次调用此函数Array里元素的索引

//array用来调用此函数的array

function method(elt, index, array)

{

this.result += "[" + index + ". " + elt + "] ";

}

var items = "I am Jeffrey Zhao".split(" ");

//使用JSon字符串来构造对象

var obj = {result : ""};

//obj作为用来接收函数调用上下文引用

Array.forEach(items, method, obj);

alert(obj.result);

</script>

4、Error原生类型

表示错误对象，如EvalError, URIError, RangeError
捕获或抛出错误try { …throw new Error(…) } catch(e) { … }
Error对象IE和FireFox公有属性，message
IE拥有的特定属性：description：同message属性。number：错误编号，只有脚本引擎抛出的错误才有该属性
FireFox拥有的特定属性：fileName：创建错误的文件。lineNumber：创建错误对象的行号。stack：创建错误时的堆栈信息

5、Error原生类型的扩展

Error.create(message, errorInfo)	创建新的Error对象将Error对象的错误信息属性设为message 将errorInfo上的信息附加到Error对象
Error.prototype.popStackFrame()	为Error对象整理出更优雅直观的信息（lineNumber, stack）对于IE无效如果一个方法仅仅是返回Error对象而不是抛出对象，则在返回前应该调用该方法

6、Function原生类型

与Array，String等类型处于同等地位
每个方法均为Function类型的实例。例：typeof(Array) == typeof(Function) == “function”
方法调用时根据发起的对象来确定this上下文引用
Function.prototype.apply(instance, args)
Function.prototype.call(instance, [ arg1 [ , arg2 [ , … ] ] ])

<script language="javascript" type="text/javascript">
    function display(text)
    ...{
        document.getElementById("info").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>

以上代码用a.aMethod.call方法调用b，那么a.aMethod的this上下文就是b，使用this就是在使用b对象，b.aMethod.apply也相同，a是this上下文。call和apply的区别在于，call使用不定参数，apply使用数组也就是Array参数

7、Function原生类型扩展

Function.createDelegate(instance, method)	得到一个方法引用，执行它时则会调用method方法，并且保证method方法的上下文this引用为instance
Function.createCallback(method, context)	得到一个方法引用，执行它时则会调用method方法，并将context作为额外的参数传入

var obj =

{

//定义obj对象的属性。

text : "Hello",

//定义obj对象的onClick事件，并加上事件处理器

onClick : function(e, arg)

{

alert(this.text + " " + arg);

}

//创建一个obj.onClick的方法引用，obj为这个方法的this上下文

var delegate = Function.createDelegate(obj, obj.onClick);

//创建一个obj.onClick的方法引用的引用，将"World"作为额外的arg参数

var onClickCallback = Function.createCallback(delegate, "World");

//为DOM元素添加某一事件的处理函数，事件名称应去掉“on”前缀。

//$addHandler是缩写，完整写法应该是Sys.UI.DomEvent.addHandler

//使用$addHandler方法添加事件处理器，那么自动将事件对象click作为参数e传入了事件处理器
$addHandler($get("btn"), "click", onClickCallback);

</script>

此处为什么要联合使用createDelegate和createCallback方法，因为在obj.onClick方法中，用到了this上下文和附加arg。

附：

Event对象的属性

altKey：判断触发事件时Alt键是否被按下。
button：得到触发事件的鼠标按键。可选值为Sys.UI.MouseButton枚举（leftButton、middleButton和rightButton）。
charCode：得到触发事件时的键盘按键代码。可以为Sys.UI.Key枚举（backspace, tab, enter,esc, space, pageUp, pageDown, end, home, left, up, right, down, del）。
clientX：鼠标指针相对于文档可见区域的X坐标。
clientY：鼠标指针相对于文档可见区域的Y坐标。
ctrlKey：判断触发事件时Ctrl键是否被按下。
offsetX：鼠标指针相对于触发事件元素左侧边缘的偏移位置。
offsetY：鼠标指针相对于触发事件元素上边缘的偏移位置。
rawEvent：原始的DOM事件。
screenX：鼠标指针相对于浏览者屏幕的X坐标。
screenY：鼠标指针相对于浏览者屏幕的Y坐标。
shiftKey：判断触发事件时Shift键是否被按下。
target：触发事件的对象。
type：事件名称（例如“click”）。