BlogJava-谁动了我的代码-随笔分类-JavaScript

关于样式表对象style与currentStyle的区别

teddy — Sun, 18 Oct 2009 14:59:00 GMT

style和currentStyle都能用来取得当前样式表中的信息，但是style只能取得在HTML中用style声明的样式表信息，无法取得通过class声明的样式表信息，而currentStyle两种声明方式都可以取得。

teddy 2009-10-18 22:59 发表评论

关于JavaScript的cloneNode方法对于节点上的事件clone问题的研究。

teddy — Sun, 18 Oct 2009 05:28:00 GMT

我的测试环境是IE8，对于事件clone要注意一下3点：
1.运行时添加的事件不会被克隆，如下例：

1a = document.getElementById('a'); //假设a是一个div
2 a.onclick = function () { alert(this.innerHTML); }
3b = a.cloneNode();

2.解析HTML时原来带的事件会被克隆，如下例：

1<div id='a' onclick='alert(this.innerHTML)'>aaaadiv>

3.通过attachEvent添加的事件会被克隆，如下例：

1a = document.getElementById('a');
2    a.attachEvent('onclick', function () {
3          alert(this.innerHTML);
4    });
5b = a.cloneNode();

最后如果想在clone时将节点其中的子节点一同clone的话，请使用cloneNode(true)。

teddy 2009-10-18 13:28 发表评论

参考Prototype的Class.create写了一个类似的实现，但是不是Ruby like OOP，使用上更像Java。

teddy — Mon, 08 Jun 2009 16:04:00 GMT

实现代码：

1 function $A (Arguments) {
2     var result = [];
3     for (var i = 0; i < Arguments.length; i++)
4         result.push(Arguments[i]);
5     return result;
6 }
7
8 Class = {
9     create : function () {
10         var args = $A(arguments);
11         var parentClass = args.shift();
12         var properties;
13         if (parentClass instanceof Function)
14             properties = args.shift();
15         else if (parentClass instanceof Object) {
16             properties = parentClass;
17             parentClass = void 0;
18         }
19
20         var klazz = function () {
21             if (this.initialize) this.initialize.apply(this, arguments);
22         };
23
24         if (parentClass) {
25             var tmpClass = new Function;
26             tmpClass.prototype = parentClass.prototype;
27             klazz.prototype = new tmpClass();
28             klazz.prototype.constructor = klazz;
29         }
30
31         for (var key in properties) {
32             if (properties[key] instanceof Function && klazz.prototype[key] instanceof Function) {
33                 klazz.prototype[key] = (function () {
34                     var _parent = klazz.prototype[key];
35                     var _method = properties[key];
36                     return function() {
37                         var _this = this;
38                         $super = function(){
39                             _parent.apply(_this, arguments);
40                         }
41                         _method.apply(this, arguments);
42                     }
43                 })();
44             }
45             else
46                 klazz.prototype[key] = properties[key];
47         }
48
49         return klazz;
50     }
51 }

测试代码：

1
2             T = Class.create({
3                 initialize : function (tt,mm) {
4                     alert("initialize T");
5                     this.tt = tt;
6                     this.mm = mm;
7                 },
8                 l : function () {
9                     alert("f");
10                 },
11                 f : function () {
12                     alert(123);
13                 }
14             });
15
16             M = Class.create(T, {
17                 initialize : function (tt,mm,nn) {
18                     $super(tt,mm);
19                     alert("initialize M");
20                     this.nn = nn;
21                 },
22                 f : function () {
23                     //$super(); 这里也可以不调用父类的f方法
24                     alert(456);
25                 },
26                 s : function () {
27                     alert("sssss");
28                 }
29             });
30
31             N = Class.create(M);
32
33             m = new N(1,2,3);
34             m.f();
35             m.l();
36             m.s();
37             alert(m.tt);
38             alert(m.mm);
39             alert(m.nn);
40             alert(m instanceof N);
41             alert(m instanceof M);
42             alert(m instanceof T);

在做的过程中，上面粗体部分不是像现在这样实现的，遇到了一个怪异的问题，下面给出原来的实现：

1 var _parent = klazz.prototype[key];
2 var _method = properties[key];
3 klazz.prototype[key] = function() {
4     var _this = this;
5     $super = function(){
6          _parent.apply(_this, arguments);
7     }
8     _method.apply(this, arguments);
9 }

这种实现造成了klazz的prototype中的每个方法执行总是返回相同结果，原因是_parent和_method在create一个Class的时候已经被固定到properties的最后一个key上，所以在运行的时候会返回相同的结果，解决方法如同上面粗体部分，必须用一个函数封装并立即执行返回内部函数，这是闭包的一种使用方式，这种做法类似把函数内的内容做一个快照，返回的内部函数存取变量的时候其实是从快照中取得，而不是从 properties中取得。

这个版本并不能用在生产环境中，由于时间仓促，肯定会有BUG或不完善的地方。所以建议大家还是使用Prototype的实现，我这个实现只是用来更加深刻的理解一些概念，比如变量作用域链、闭包等等的使用。

teddy 2009-06-09 00:04 发表评论

对JavaScript的变量作用域的理解

teddy — Mon, 18 May 2009 18:06:00 GMT

作用域是一个抽象概念，在浏览器的JavaScript实现中会有这个概念，但是不同浏览器实现可能不同。

一、作用域的种类（自己感悟）
1.对象作用域，window及标签元素都属于对象作用域。
2.函数作用域，函数自身形成的作用域。
可以把作用域看作是上下文（context）之类的对象。

看下面的代码
例0

1breakE = 0;
2var state = 1;                //1
3Person = function(name) {     //2
4    var age = 20;
5    this.name = name;
6    this.show = function () {     //3
7        alert(age);
8        alert(state);
9        alert(name);
               alert(this.name);
10    }
11    alert(m);
12}
13    Person.prototype.check = function () {};
14m = new Person('mike');       //4
15var j = new Person('Jerry');      //5
16
17m.show();                     //6

通过看上面这段代码我们发现有时候定义变量时用var，有时候却不用，这里有什么区别吗？在此之前我们先定下规矩，那就是必须有一个全局作用域，就像是window对象的存在一样，是作用域的最顶层。那么哪些变量被定义到作用域的最顶层呢？那就是state，对于不在任何函数或类中用var定义的变量存在于全局作用域中。那么全局作用域属于作用域的哪种类型呢？那就是对象作用域。具体是哪个对象的作用域呢？非window对象莫属。

我们可以把对象作用域想像成两部分，左面部分是对象级别的，保存的是和对象绑定的成员属性（无论是变量还是函数），通过this来访问的。右面的部分是作用域级别的，保存的是var定义的属性（无论是变量还是函数），可以直接通过变量名称访问。对于window来说它是个特殊体，从用var定义的变量可以用this来访问就能看出问题，我个人猜测window对象既是JavaScript的顶层对象又是顶层作用域，所以才会有这种效果。
另一种情况就是标签元素的对象作用域和全局作用域非常的像，如下例：

1//例1
2<input type='button' value='click me' onclick='alert(value)'/>
3//例2
4<input type='button' value='click me' onclick='alert(this.value)'/>
5//例3
6function test() {
7 alert(value);
8 alert(this.value);
9}
10<input type='button' value='click me' onclick='test()'/>

很奇怪为什么例1和例2访问value和全局作用域里的var定义的变量的行为是一致的，按理说value应该属于input标签元素对象的成员属性，访问对象的成员属性应该用this来访问，我们自定义的类，如果成员方法想访问成员变量都需要加this的，就像最上面的例子里的this.show方法访问this.name成员变量一样。而对于例3，勤快的读者如果运行一下便知一定会出错的，第一句系统会报value未定义（除非你在全局作用域定义过value变量），第二句会打印出undefined。为什么会这样呢？这就要引出作用域链这个概念了，后面会解释这个概念的。

反观函数作用域，由于函数中用var定义的变量不能用this来访问，所以在函数作用域中不再像对象作用域那样分两部分，而this实际保存的是与该函数绑定的对象的引用，也就是说this在函数中有特殊的含义，是不能挪作它用的。

二、作用域链
作用域是可以嵌套的，而嵌套的结果就形成了作用域链，如例0所示，我们来描述一下作用域链：
全局作用域<----Person函数作用域<-----show函数作用域
在全局作用域中可以访问哪些变量呢（注意我现在指的只是作用域中的变量）？
1.state
2.j
在Person函数作用域中可以访问哪些变量呢？
1.全局作用域中的所有可访问的变量
2.name（参数）
3.age
在show函数中又有哪些变量可以被访问呢？
1.全局作用域中的所有可访问变量
2.Person函数作用域中所有可访问变量
3.如若show函数中还定义了var变量也要加入show函数作用域

如果在show中访问一个x变量，首先从show函数作用域里查是否有x这个变量，如果没有再查Person作用域，如果还没有的话再查全局作用域，找到就返回该变量。
讲解到这里我们发现一个问题，似乎作用域是定义时生成块级作用域（即单独的对象作用域和函数作用域）而运行时生成作用域链，这就是词法作用域的由来。有了这种作用域就构成了闭包的基础。
下面是一个稍微特殊的例子：

1 function test() {
2     test2();
3 }
4
5 function test3() {
6     test2 = function() {
7         alert("test2");
8     }
9     test();
10 }

定义test的时候test2还不存在，但是调用test的时候，test2就存在了，这说明了作用域链确实是运行时生成的。

通过作用域链如何解释例1、2、3呢？
我的分析是对于HTML元素来说当页面解析的时候，元素被解析成DOM树，HTML元素里的标准属性作为该元素对象作用域的变量（类似var定义的那种），而非该元素DOM对象的成员属性（类似this定义的那种），这样就解释了两个问题：
1.在页面上预定义的HTML元素标准属性是不能用delete和removeAttribute删除的。
2.onclick属于input元素的一个方法，那么这个作用域链应该像下面这样：
   全局作用域<-----HTML元素作用域<-------onclick函数作用域
   value变量在哪个作用域里呢？答案是HTML元素作用域中。所以onclick不但可以访问而且加不加this都可以。
那么例3的作用域链是什么样的呢？如下：
    全局作用域<-----test函数作用域
    全局作用域<-----HTML元素作用域<-------onclick函数作用域
没错是两条，因为当单击按钮后执行到onclick函数中时走的是第二条链，而在onclick中调用了test函数时，走的是第一条链。
显然value还是定义在HTML元素作用域中，而test想访问value值一定是访问不到的。

对于这个问题我还测试了一下非标准属性，如下例：

1<input type="button" value="click me" bb="123" onclick="delete this.bb; alert(bb)"/>

测试发现非标准的HTML元素属性可以被删除，但是delete语句执行时必须用this来引用（IE中测试），直接访问如alert到没有这个限制。
说明bb是input对象属性是没错的，因为它可以被删除，但是如果它没有被删除的话alert(bb)还是能显示出来的，说明这类属性很特殊，具体怎么解释我还没有想好，如果有朋友能解释的通，请告知我。

三、什么是闭包
show函数显然是一个闭包，但是它是由类的构造函数生成的，和另一种形式其实是一样的，代码如下：

1function getFunc (a, b) {
2    return function () {
3         alert(a - b);
4    }
5}
6
7var func1 = getFunc(10,5);
8func1();
9
10var func2 = getFunc(20,30);
11func2();

上面的代码func1函数无论我执行多少次都显示5，func2函数无论我执行多少次都显示-10，这和例0是多么的像呀，例0中m.show()无论执行多少次都能显示'mike'，j.show()无论执行多少次都能显示'Jerry'（行号9那行在起作用，先不考虑this.name那行）。这就是闭包，把作用域链中变化的变量给固定化，然后把作用域链和函数本身进行绑定，无论我在什么地方执行函数，函数的作用域链始终是它定义的时候那条。

四、关于对象成员的访问（即this能引用的那些属性），我只是在猜想，可能的作用域链应该如下：
    全局作用域<-------m对象作用域<-------m.test函数作用域
    m的对象成员（类中this定义的）保存在对象作用域的左半部，m的作用域变量（类中var定义的）保存在对象作用域的右半部。
    m.test函数要访问对象成员时从对象作用域的左半部检索，要访问作用域变量时从对象作用域的右半部检索。
    同时这个作用域链还解答了另一个问题，即原型方法（公共方法）为什么不能访问类中用var定义的变量。
    看例0即可知check和Person根本就不在同一个链上，又谈何能访问呢？

至此把JavaScript变量作用域讲解完毕，我觉得这个还是蛮重要的，如果一定要有个比较的话，应该和Java中的ClassLoader有同样的重要性吧。大家借鉴的同时请多给我指出错误，因为这其中有一些还是我的猜测。

teddy 2009-05-19 02:06 发表评论

IE document compatMode

teddy — Wed, 15 Apr 2009 09:37:00 GMT

compatMode Property

Gets a value that indicates whether standards-compliant mode is switched on for the object.

Syntax

[ sMode = ] object.compatMode

Possible Values

sMode String that receives one of the following values.

BackCompatStandards-compliant mode is not switched on.

CSS1CompatStandards-compliant mode is switched on.

The property is read-only. The property has no default value.

Remarks

With Microsoft Internet Explorer 6 and later, you switch on standards-compliant mode by including the !DOCTYPE declaration at the top of your document, specifying a valid Label in the declaration, and in some cases, specifying the Definition or URL. The Label element specifies the unique name of the Document Type Definition (DTD), and can be appended with the version number of the DTD. The Definition element specifies the definition of the DTD that is specified in the Label. The URL element specifies the location of the DTD.

When standards-compliant mode is switched on (also called "strict mode"), Windows Internet Explorer displays the document according to the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard. When standards-compliant mode is not switched on (also called "quirks mode"), the document is displayed as it was displayed in previous versions of Internet Explorer.

The compatMode property is deprecated in Internet Explorer 8 in favor of the documentMode property.

IE8 documentMode

Syntax

[ vMode = ] object.documentMode

Possible Values

vMode Floating-point that receives one of the following values.

5Microsoft Internet Explorer 5 mode (also known as "quirks mode").

7Internet Explorer 7 Standards mode.

8Internet Explorer 8 Standards mode.

The property is read-only. The property has no default value.

Remarks

This property is available in all compatibility modes.

The document compatibility mode of a Web page determines how Internet Explorer 8 interprets and renders the page. Page authors generally use meta elements to specify X-UA-Compatible HTTP-EQUIV headers that specify the document compatibility mode. For more information, see Defining Document Compatibility. In versions of Internet Explorer previous to Internet Explorer 8, compatMode was solely determined by DOCTYPE.

teddy 2009-04-15 17:37 发表评论

JavaScript对form及form中的引用。

teddy — Thu, 19 Mar 2009 12:44:00 GMT

通常我们对form的引用通过给form加上id来实现，其实我们可以使用name来实现。两者的不同是id需要用document.getElementById()来检索，name通过document.forms[form_name]来检索，在form中的表单元素都有name的时候可以通过document.forms[form_name][element_name]来检索到指定的表单元素。另一种方法可以通过document.forms[form_name].elements来获得表单元素的集合，但是其中不包括input type='image'，所有这些方法在IE7、Opera、FF2、FF3、Chrome、Safari上测试通过。

teddy 2009-03-19 20:44 发表评论

JavaScript注意事项（不定期更新）

teddy — Mon, 19 Jan 2009 02:42:00 GMT

本贴将不定期更新，将集合JavaScript使用中常见的问题。
约定：浏览器名称IE/FF(通指Windows平台上的IE、FF)、IE5.5+/FF2+(后面的数字表示版本，甚至可以有更详细的版本信息）
目前只测试IE和FF，其他浏览器不在测试范围内，如果我只提及IE的，则说明在IE中有问题，而在FF中没有问题。

IE中Class不能跨窗口引用，即在父窗口定义的SomeClass不能在子窗口中实例化,如new opener.SomeClass()。请注意在这里我没有提到frame的情况，因为我还没有时间测试，如果哪位有时间测试请告诉我结果。
IE中delete操作只能删除JavaScript或自定义对象的属性，而不能删除HTML Element对象的属性，如果想删除Element的属性，请使用removeAttribute()方法。
IE中delete操作只能删除非var定义的变量。
IE中如果在一个窗口引用一个对象，如果这个对象是在其他窗口建立的，但是那个窗口已经关闭了，那么对这个对象的引用将会出错。

          如在窗口A中
          opener.someClassObj = new SomeClass();
          window.close();
          窗口B中
          typeof someClassObj 结果是 'object'，但是实际引用该对象却会出错。

teddy 2009-01-19 10:42 发表评论

在定义一个js类的时候，为什么要设置该类的prototype属性为它所要继承的类的实例对象

teddy — Fri, 05 Dec 2008 06:24:00 GMT

在些JavaScript类定义的时候，大家很可能都写过下面的代码：
function A() {}
function B() {}
B.prototype = new A()

上面这样写是为了让instanceof语句能起作用。举个例子：
1.不重写子类的prototype属性
b = new B();
b instanceof B //return true
b instanceof A // return false
b instanceof Object //return true

2.写子类的prototype属性
b = new B();
b instanceof B //return true
b instanceof A //return true
b instanceof Object //return true

另外，prototype的作用是可以用来模拟继承，使我们在父类里添加的属性方法在子类里能访问。
但是我们可以使用一种其他的方法来变通。

function A(x) {
    this.x = x;
    this.method1 = functioni () {};
}

function B(x,y) {
    A.call(this,x);
    this.y = y;
}

b = new B(1, 2)

这时b中绝对有x，并且x 等于1，但是我们为什么还要使用prototype呢？
主要是为了向父类原型动态添加的属性和方法可以出现在子类的实例对象中。
接着上面的例子

A.prototype.z = function () {}

如果我们没有设置B.prototype = new A()，则b不会动态添加方法z 。

teddy 2008-12-05 14:24 发表评论

JavaScript 类型转换注意事项

teddy — Fri, 14 Nov 2008 01:32:00 GMT

注：部分摘自《JavaScript: The Definitive Guide, 5th Edition》

字符型转换为数值型可以使用下列方法
parseInt(stringVar);     //parseInt还可以指定二进制、八进制、或16进制
parseFloat(stringVar);
Number(stringVar);

for example:
parseInt("ff")    //will throw a error
parseInt("ff", 16) == parseInt("0xff")     // return 255
parseInt("77")    //return 77
parseInt("077") == parseInt("77", 8)    // return 63
注：加"0"或"0x"前缀会自动检测并转换为相应的数制所表示的值
If parseInt( ) or parseFloat( ) cannot convert the specified string to a number, it returns NaN

数值型转换为字符型
numberVar + "";
numberVar.toString();   //可以指定二进制、八进制、或16进制
String(numberVar);

other useful method
var n = 123456.789;
n.toFixed(0); // "123457"
n.toFixed(2); // "123456.79"
n.toExponential(1); // "1.2e+5"
n.toExponential(3); // "1.235e+5"
n.toPrecision(4); // "1.235e+5"
n.toPrecision(7); // "123456.8"

其实还有一种方法就是使用new操作符，如
new String(numberVar);
new Numer(stringVar);
但是这种方法返回的结果是object类型，而不是原始数据类型，大家可以酌情使用。

另外，在相等判断时使用' == '会自动转型（具体转换情况请参考其他资料），如果想精确判断请使用' === '。
如   1 == '1'    //return true
       1 === '1' //return false
       1 == new Number(1)   //return true
       1 === new Number(1)   //return false

数值连接等相关操作
"21" + "2" == "21" + 2 //return 212
2 + "21"   //return 221
"21" * "2" == "21" * 2 == 2 * "21" //return 42
"21" / "3" == "21" / 3 == 21 / "3" //return 7
"21" - "2" == "21" - 2 == 21 - "2" == 21 - "    2    " //return 19

正如和Java中一样，new Number(3) == new Number(3)返回false，同理推广到其他类型，new操作符总是建立一个新对象，
而==只是比较其引用，并不比较对象本身，所以两个new的对象的引用总是不同的。所以在通常的逻辑判断中(如if或while等)，
最好避免使用Primitive Datatype Wrapper，而直接使用Primitive Datatype。

From Wrapper to Primitive, for example:
new Number(3).valueOf()
new String("str").valueOf()
new Date().valueOf()        //convert a Date to millisecond representation
[any other object].valueOf()    //The primitive value associated with the object, if any. If there is no value associated with object, returns the object itself.

Finally, note that any number, string, or boolean value can be converted to its corresponding wrapper object with the Object( ) function:

var number_wrapper = Object(3);

Automatic datatype conversions
Value	Context in which value is used
	String	Number	Boolean	Object
Undefined value	`"undefined"`	`NaN`	`false`	Error
`null`	`"null"`	`0`	`false`	Error
Nonempty string	As is	Numeric value of string or `NaN`	`TRue`	String object
Empty string	As is	`0`	`false`	String object
`0`	`"0"`	As is	`false`	Number object
`NaN`	`"NaN"`	As is	`false`	Number object
Infinity	`"Infinity"`	As is	`true`	Number object
Negative infinity	`"-Infinity"`	As is	`TRue`	Number object
Any other number	String value of number	As is	`true`	Number object
`true`	`"true"`	`1`	As is	Boolean object
`false`	`"false"`	`0`	As is	Boolean object
Object	`toString( )`	`valueOf( )`, `toString( )`, or `NaN`	`true`	As is

利用上面的表，我们可以知道if ("") 、if (0)、if (undefined)、if (null)、if (NaN)，这些if语句的条件都为false.

teddy 2008-11-14 09:32 发表评论

面向对象的JavaScript（二，TSS上的一篇文章，先借鉴一下）

teddy — Wed, 17 Sep 2008 12:15:00 GMT

Object Oriented JavaScript Demonstrated

teddy 2008-09-17 20:15 发表评论

面向对象的JavaScript （一、对象基础，使用函数来模拟类）

teddy — Wed, 03 Sep 2008 11:09:00 GMT

通过一个例子可以很直观的表述本主题，所以没有任何其他的说明文字，请看代码吧。

  1function Person(name, age) {
  2
  3    //私有变量(private variables)
  4    var myName = name;
  5    var myAge = age;
  6
  7    //公共属性(public properties)
  8    this.name = myName;
  9    this.age = myAge;
10
11    //私有函数(private functions)
12    function getMyName() {
13    return myName;
14    };
15
16    function getName() {
17    return name;
18    };
19
20    var getMyAge = function () {
21    return myAge;
22    };
23
24    var getAge = function () {
25    return age;
26    };
27
28    //特权方法(privileged methods)
29    this.getName = function () {
30    return this.name;
31        //return myName;       可以访问私有变量
32    //return name;         可以访问构造函数参数(其参数本质也是私有变量)
33    //return getMyName();  可以访问私有函数
34    //return getName();    可以访问私有函数
35    };
36
37    this.getAge = function () {
38    return getAge();
39    };
40
41    this.getRealAge = function () {
42    return this.age;
43    };
44}
45
46//公共方法(public methods)
47Person.prototype.acceptName = function (param) {
48    this.name = param;
49    //name = param;       公共方法不能访问私有变量
50    //myName = param;     公共方法不能访问私有变量
51};
52
53//原型属性(prototype properties)
54Person.prototype.legs = 2;
55
56//静态属性(static properties)
57//整个类只有一个静态属性，各个对象共享同一个静态属性值
58Person.arms = 2;
59
60Person.getArms = function () {
61    return Person.arms;
62    //return this.arms;   可以使用this来指代Person对象本身
63};
64
65/*
66Person是一个逻辑上的类，他的本质是一个Function，在JavaScript中类是由Function来模拟的，所以Person还是一个Function的实例。而arms和getArms方法是一个Function对象实例上的属性和方法，是Person对象所特有的，所以本例可以使用Person.arms来引用，同时在getArms方法中，可以使用this.arms来引用，因为getArms是Person对象上的方法，在该方法内部this指代Person对象自身。
67*/
68alert(Person.getArms());
69
70var pa = new Person("Teddy", 25);
71
72//alert(pa.myName);  不能访问私有变量
73
74alert(pa.name);
75
76alert(pa.getAge());
77
78pa.acceptName("Born");
79
80alert(pa.getName());
81
82var pb = new Person("John", 18);
83
84//运行时动态加入方法
85Person.prototype.acceptAge = function (param) {
86    this.age = param;
87};
88
89//pb对象也可以调用动态添加的方法
90pb.acceptAge(30);
91
92alert(pb.getAge());
93
94alert(pb.getRealAge());
95
96//运行时覆盖已定义方法
97Person.prototype.acceptName = function (param) {
98    return param;
99};
100
101//所有已创建对象都自动继承被覆盖的方法
102alert(pa.acceptName("Black"));
103
104alert(pa.getName());
105
106alert(pa.legs);
107
108//运行时改变原型属性值
109Person.prototype.legs = 4;
110
111//所有已创建对象都自动继承被改变的原型属性值
112alert(pb.legs);
113
114//运行时将原型属性改为公共方法
115Person.prototype.legs = function () {
116    return 4;
117};
118
119//所有已创建对象都自动继承原型属性到公共方法的改变
120alert(pa.legs());

teddy 2008-09-03 19:09 发表评论

兼容IE和FF的Javascript动态添加Select控件的Option选项

teddy — Sun, 30 Dec 2007 14:49:00 GMT

看了很多Javascript的书籍，发现对Select可以使用add方法添加Option选项。
selectObj.add(new Option("Label", "Value"));
但是add方法好像只在IE下好用。现在提供一个通用的方法：
selectObj.options[selectObj.length] = new Option("Label", "Value");
另外如果想还想使用add方法，可以写成如下格式：
selectObj.add(new Option("Label", "Value"), null);
请注意，在IE6及IE7下请使用不带null参数的add方法，在FF下请使用带null参数的方法，IE8下带不带都可以。
很奇怪为什么一定要加null，我猜测add方法里一定使用了'=== null'来判断第二的参数或者没有对参数数组的长度做验证。

teddy 2007-12-30 22:49 发表评论

关于IE与FF对HtmlElement属性操作的不同

teddy — Wed, 12 Sep 2007 13:17:00 GMT

今天突然发现IE和FF对于一些属性可以直接读取，使用element.attributeName或element[attributeName]形式。
但是有些不可以，在FF下必须用element.getAttribute(attributeName)来读取。
并且，IE下这三种方式的行为是一致的，而FF下前两种和后一种是不一致的。
同理设置属性的方法也是不一致的。
其内部的实现原理还不得而知，希望有知道的朋友指点一二。

teddy 2007-09-12 21:17 发表评论

关于JavaScript的Prototype更进一步的讨论

teddy — Sat, 26 May 2007 00:49:00 GMT

摘要: 本文里讲述的是关于JavaScript的prototype问题，如this成员和prototype成员有什么不同等。
本文属于中等级别的文章，如果大家对OOP of JavaScript还不清楚的话，请先去了解一下，
写本文的原因是习惯了Java、C#等语言，对于JavaScript的prototype（通常所说的原型）非常
不适应，很多朋友可能都有这样的体验，这篇文章能解答你们很多的同类问题。阅读全文

teddy 2007-05-26 08:49 发表评论