巴黎人官网-巴黎人734手机版网址

document.getElementById介绍_javascript技巧_脚本之家

把你的大脑当做浏览器执行下面的代码两次,分别是IE6和IE9: 复制代码 代码如下: function testFunc } ${ var g = document.getElementById , w = window.testFunc ; //g alert; alert; alert; alert(g instanceof Function); //w alert; alert; alert; alert(w instanceof Function); //执行 alert; 在标准浏览器中上述代码执行得非常一致,返回结果如下: typeof => "function" 复制代码 代码如下: String => "function #funcName#{[native code]}" instanceof Object => true instanceof Function => true 很奇怪,虽然类型是函数,但是我们却不能直接使用括号来执行函数g,而需要使用call g.call; 但是如果运行环境是IE6,一切看起来非常诡异,下面是运行结果: 复制代码 代码如下: //g typeof => "object" String => "function getElementById{[native code]}" instanceof Object => false instanceof Function => false //w typeof => "function" String => "function testFunc{alert}" instanceof Object => true instanceof Function => true 在IE 6下,对于g和w都只能使用括号直接执行函数,而不需要使用call。对于函数g使用下面的方式调用会导致一个“对象没有该属性”的错误: g.call 在IE6下,对于自定义的函数testFunc测试结果没有任何问题,但是对于g却十分地诡异! 既然g是object那么为何可以像函数一样用()直接调用执行? 而在标准浏览器中,g既然是函数为什么却不能直接使用()来执行呢? 事实上对于document.getElementById,它到底是function还是object就连jQuery 1.6.2也没有解决这个问题。 在IE6中$.isFunction仍然返回的是false!下面是jQuery 1.6.2的jQuery.isFunction的相关源代码: 复制代码 代码如下: class2type={}; ... // Populate the class2type map jQuery.each("Boolean Number String Function Array Date RegExp Object".split, function { class2type[ "[object " + name + "]" ] = name.toLowerCase; ... type: function { return obj == null ? String : class2type[ Object.prototype.toString.call ] || "object"; }, ... isFunction: function { return jQuery.type === "function"; }

1.原始值与引用值

于是在StackOverflow上提了这个问题,好在牛人确实多,很快就有了回复。最后我简单的总结一下给大家参考:document.getElementById 最初被定义为 HTMLDocument 接口的一个成员,但是在后来的 2 级 DOM 中移入到 Document 接口中。document.getElementById属于host object,它是一个function,但是它并没有被定义在ECMAScript中而是DOM接口的一部分。支持[[Call]]host object的typeof返回值就是function。请记住Host Objects并不总是遵循Native Objects的相关规则,比如typeof。而对于testFunc它是native object, 更具体地说是native function。下面是EcmaScript 5对于typeof操作符的返回结果的归类:

原始值存放在栈里, 引用值存放在堆里. 如程序:

Type of val

复制代码 代码如下:

Result

function Person(id,name,age){
 this.id = id;
 this.name = name;
 this.age = age;
}

Undefined

var num = 10;
var bol = true;
var str = "abc";
var obj = new Object();
var arr = ['a','b','c'];
var person = new Person(100,"笨蛋的座右铭",25);

"undefined"

2.undefined和null

Null

undefined: 变量未定义; 是Undefined类型的专属值;

"object"

null:引用未分配; 是Null类型的专属值.

Boolean

typeof(undefined) == undefined;
typeof(null) == object;
undefined==null;
undefined!==null;
null instanceof Object == false;
undefined instanceof Object == false;

"boolean"

虽然有Undefined和Null类型, 但是通过下面的例子说明这两个类型是不可见的, 也就是说我们只能使用他们的值:

Number

alert(undefined instanceof Undefined);
alert(null instanceof Null);

"number"

3.伪数组

String

特点:
1) 具有length属性;

"string"

2) 像数组一样按索引顺序存取数据;

Object (native and does not implement [[Call]])

3) 不具备数组特有的操作数据的方法如push, pop, slice...

"object"

伪数组都可以通过Array.prototype.slice转换为真正的数组:

Object (native or host and does implement [[Call]])

var faceArray = {0: 'a', 1: 'b', length: 2}//标准的伪数组;

"function"

var realArray = Array.prototype.slice.call(fakeArray);

Object (host and does not implement [[Call]])

js中的伪数组:arguments, node.childNodes, document.getElementsByTagName()...

Implementation-defined except may not be "undefined", "boolean", "number", or"string".

IE中的问题 : IE中node.childNodes是不能用slice转化的.

所以如果要实现用$代替document.getElementById需要这么做: 复制代码 代码如下: var $ = function { return document.getElementById }; 但是即使有了上面的解释之后,我对Host Object和Native Object又有了新的疑惑。

Jquery中的伪数组 : Jquery本身就是一个伪数组:

alert($('.class1').length); alert($('.class1').[0].tagName);

4.关于简单类型的字面量

var a = 1; b = true, c = "ccc";

字面量看起来有类型

alert(typeof a);//number
alert(typeof b);//boolean
alert(typeof c);//string

但是通过instanceof却测不出来

alert(a instanceof Number)//false
alert(a instanceof Object)//false
alert(b instanceof Boolean)//false
alert(b instanceof Object)//false
alert(c instanceof String)//false
alert(c instanceof Object)//false

5.函数的prototype属性和对象实例的内部prototype属性

每个function(构造函数)都有一个prototype属性, 每个对象实例都有一个不可见的(mozilla把它公开了, 可以通过__proto__来取得)内部的prototype属性, 它指向构造函数的prototype属性. prototype还可以有它自己的prototype属性, 这构成了prototype链,  Object是最顶的对象, 所以所有的prototype链最终会指向Object.prototype. 当访问对象实例的属性/方法的时候, 从对象实例自己开始搜索, 若果搜索不到, 沿着prototype链向上搜索, 直到Object.prototype.prototype == null 为止.

6.构造函数的一个小秘密

本文由巴黎人官网发布于计算机服务器,转载请注明出处:document.getElementById介绍_javascript技巧_脚本之家

您可能还会对下面的文章感兴趣: