BlogJava-zkjbeyond-随笔分类-javascript语言

ajax blog 搬家

原创专栏开源学习 — Mon, 21 Aug 2006 04:52:00 GMT

BlogJava做为java的专业blog，偶在这老写javascript ajax的东西，有些不合适。

朋友给了个blog,专门放ajax的文章吧！以后这专门写关于java的东西吧。
http://zkj.wisekernel.net

谢谢支持。

原创专栏开源学习 2006-08-21 12:52 发表评论

再说说prototype.js的事件注册

原创专栏开源学习 — Sun, 11 Jun 2006 18:12:00 GMT

摘要: 框架实现人员必看
关于prototype.js中 bind函数的问题和拖拉层代码的建议

阅读全文

原创专栏开源学习 2006-06-12 02:12 发表评论

闭包（续）

原创专栏开源学习 — Tue, 23 May 2006 15:51:00 GMT

摘要: 书接上回，继续闭包。

如果你懂javascript，而你不了解javascript的闭包。
那你将错过javascript最强大特性之一（闭包）。阅读全文

原创专栏开源学习 2006-05-23 23:51 发表评论

javascript语言中的闭包

原创专栏开源学习 — Fri, 19 May 2006 03:46:00 GMT

摘要: 2006.5.20下午16.21更新。

groove,python,perl这些高级脚本语言都有闭包概念。不懂这些语言的可能没机会理解闭包了。
幸运的是大家都熟悉javascript,那么从javascript开始闭包认识吧。
感觉闭包是高级的，但也是晦涩的。

本文译自
http://jibbering.com/faq/faq_notes/closures.html
阅读全文

原创专栏开源学习 2006-05-19 11:46 发表评论

javascript进阶之对象篇(7)网页中的javascript对象

原创专栏开源学习 — Sun, 23 Apr 2006 07:36:00 GMT

1、废话
这部分将要描述浏览器为我们创建的对象。就是大家熟悉的window,document

等。一般书上都叫对象层次和文档对象模型。用dom标准来说，一般浏览器都实现

了0级DOM，关于DOM标准我感觉知道0级就可以了。对于DOM标准W3C早已定义了1级

，2级，三级也在标准化，问题是各个浏览器不完全实现，尤其是IE的事件模型，

完全不和DOM一致。（不过prototype.js已经做了很好的封装）
我这里不会讲dom接口，更不会讲各个浏览器的如何实现这些接口及区别。（

我也没这能力）。而是要猜测一下浏览器是怎么用javascript定义这些接口或类

的。（注意是猜测，个人理解）

2、引子

以上简单的javascript代码，不知大家提出过疑问没有。
首先，document是个javascript对象，谁创建了它。；document的类是什么

(function Document(){....} 可能是new Document()创建了它)；document有些

什么属性或方法。这些对象与html关系是什么。这些对象与dom标准有什么关系。

接下来将试着回答这些问题。我会侧重讲述我的理解思路，而不是具体哪个方法

，接口。

3、一个简单的例子的深入理解

New Document

上面代码说明几个问题：
a、window\this就是我在变量篇里面提到过的窗体的全局对象，document是它的

一个属性，也叫全局属性。
b、window,document在html最前面已经存在了。我们可以随处使用document对象

。
c、对于输入框按钮这类html标记的javascript对象只有在解释过以后才能访问到

。当然我们编码用到这些对象时，都在body.onload或鼠标触发，一般不会出错。
d、例子中的document.getElementById('xm')javascript对象和我们自己创建的

javascript对象有什么区别呢？从应用角度看没有区别，只是自己定义的对象由

自己new来初始化，而document.getElementById('xm')有浏览器为我们初始化对

象，我们直接用方法得到句柄就可以了（有多种方法）。
e、我们怎么知道这些对象的用法呢？查看w3c DOM参考吗？我认为不用。

4、浏览器为我们创建的对象与我们自己定义的对象的区别。

(document.getElementById('xm').value);
alert(document.getElementById('myxm').value);">

希望你仔细的看看上面代码的执行结果。可能你会得到更震撼的想法来。暂时我

有以下几个感想：
a、我们自己也可以写一个界面控件，如果把属性建立全的话，完全可以复原浏览

器的内建类。
b、反过来，对于浏览器为我们创建的对象，我们可以当成自己的对象一样使用。

看看prototype.js中，使用了内建对象的方法。

escapeHTML: function() {
    var div = document.createElement('div');
    var text = document.createTextNode(this);
    div.appendChild(text);
    return div.innerHTML;
},
unescapeHTML: function() {
    var div = document.createElement('div');
    div.innerHTML = this.stripTags();
    return div.childNodes[0] ? div.childNodes[0].nodeValue : '';
},
c、大家可以打开描述注释，看看到底包含哪些属性和方法。注意

outerHTML属性的值是什么,在网页上表示什么。可以看出javascript对象的

outerHTML属性就是html(xhtml)规范中的标签。这样给了我们写javascriptUI控

件的新思路，一个控件就是一个javascript对象（其实很多人都这样做了，但好

象都是innerHtml等等）。可以象asp.net或jsf那样编写组合控件。
大家可以看一下ActiveWidgets代码（与我的思路有些差别），我认为这种基于

html标签的UI控件无论性能、开发人员使用难度上都不错。
对于dojo的widget这种做UI做法我个人不很赞同，完全用div，图片实现了一便

html的UI标签。性能不好，开发人员上手不容易，美工更不能修改，另外图片都

是定死的，界面也比较单调，也不好修改。

对于自己实现javascript控件，我认为在htmlUI基础上就可以了，毕竟自己实现

存在的UI难度不小。把html的标准UI组合成新的控件。例如，我们可以很容易的

实现一个包括（登陆密码验证码确认）的组合javascript控件

d、dom标准与浏览器对象
打开document.writeln(desc(document.getElementById('xm')));，你可以看到<

input type="text">的所有属性。这些属性 ”dom标准“，之所以加引号，DOM标

准我们有很多误解，认为DOM标准是个什么高不可及、不可违抗的、复杂的东西。
首先：我们接触了静态HTML,xml，有了DOM对象模型（熟悉java的都知道java的实

现），但javascript语言的特点使不能象java,c++那样来实现DOM对象模型。例如

input 继承了 HTMLElement，HTMLElement定义的一堆属性。按照dom标准,所有浏

览器实现 input javascript对象时都必须把这些属性加上，这就叫符合标准。其

实说白了：DOM标准就是浏览器为我们实现的javascript代码的总和。（可以浏览

器厂商不完全实现）
看protorype.js的代码
为了支持多了浏览器，定义下面代码。说明有的浏览器网页全局变量里有Element

，Event，有些浏览器没给我们定义。所以只能这样了。

if (!window.Element) {
var Element = new Object();
}
if (!window.Event) {
var Event = new Object();
}

还有用AJAX技术时
'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'，其实很简

单，就是浏览器中有没有这些javascript实现了。所有大家在DWR框架中用iframe

实现了一个javascript XMLHTTP类。

e、与xhtml标准的矛盾
在xhtml中，双引号是必须的，但outerHTML属性中却没

双引号。还没想明白。

5、浏览器为我们创建了几类对象
a、全局对象window或this。其实javascript的全局变量、全局方法（如

Math,setTimeout()）都可以由window对象访问。另外浏览器的特殊函数或属性。

（如window.status,window.alert()）
b、document对象。包括图片，applet,form等属性，可能我们用的最多。也是访

问我们可见的元素的入口（document.getElementById）,也提供了动态创建html

标签的方法。如var t=new Text("test");没有这样方法，只能 var

t=document.creatTextNode("test");都由document提供的工厂方法来创建。
c、页面中的html标签，当解释执行过，浏览器会为你初始化对象，放到document

对象中去。

6、对DOM标准的认识
DOM标准定义了接口，没有定义类。浏览器为我们实现了这些接口，实现这些接口

的类我们也看不见。所以这里接口的含义和java中接口的含义不同。
例如我们常用的document对象
DOM标准中定义了个Document接口，实现HTMLElemnt接口。
Document接口和HTMLElemnt接口在DOM标准中定义了很多属性和方法。
注意我们使用的document对象是浏览器为我们创建的javascript对象，到底

document对象有哪些属性和方法是有浏览器决定的，而不是由DOM标准决定的。
在这里javascript世界里没有继承概念，所以DOM标准定义的接口，对于我们开发

人员来说只能当成一个参考手册，象javadoc。

7、如何写出跨浏览器的javascript代码
这难度大了点.但说穿了，只要我们用javascript代码把浏览器没符合DOM标准

的代码补全就好了。但DOM标准之大不是一般人能全部搞清楚的，浏览器厂商也使

坏，让这个工作更难了。现在好象有个误区，人们写javascript都喜欢按照

DOM标准来写。如果我们按照各个浏览器实现DOM标准的交集写代码的话，可能会

更好点。

原创专栏开源学习 2006-04-23 15:36 发表评论

javascript进阶之对象篇(5)继承

原创专栏开源学习 — Mon, 17 Apr 2006 15:19:00 GMT

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

我只能说javascript的继承是模拟实现的。和java,c++中是不同的。是依靠prototype实现的。
我个人从来不用javascript的“继承”，始终认为javascript实现的继承不是真正的继承。可能是受java”毒害“够深。
在javascript中，我把继承分为两类：类继承，对象继承。
（1）、prototype.js中的继承
prototype.js中用如下代码实现继承。我认为只是个属性拷贝过程。

Object.extend  =   function (destination, source)   {
   for  (property  in  source)   {
    destination[property]  =  source[property];
  }
   return  destination;
}

//Object.prototype.extend 感觉这句话没必要，太模仿java了，想让对象实例直接继承。
a、prototype.js中的类继承

prototype.js  1.3 . 1
     String.prototype.extend(  {
      stripTags:  function ()   {
       return   this .replace( /< \ /? [ ^> ] +>/ gi, '');
    } ,

    escapeHTML:  function ()   {
       var  div  =  document.createElement('div');
       var  text  =  document.createTextNode( this );
      div.appendChild(text);
       return  div.innerHTML;
    } ,

    unescapeHTML:  function ()   {
       var  div  =  document.createElement('div');
      div.innerHTML  =   this .stripTags();
       return  div.childNodes[ 0 ].nodeValue;
    }
    } );

我把这类型的继承叫做类继承，直接把你自己写的对象属性拷贝到原型对象中去。

<SCRIPT LANGUAGE = "JavaScript">

SCRIPT>

看了以上代码，可能你会明白。直接拷贝类的原型对象确实可以实现某种概念上的继承。
但要注意：在继承体系中，Man的原型对象属性方法最好不要用Man的实例属性（name），因为可能Woman中并没有定义实例属性name;也最好不要用Man)原型对象属性字段（type）,虽然type也被拷贝过来了，但值还是”男人“。
虽然有解决办法，但javascript没有很好的语法检查工具，你用prototype.js的类继承时小心处理。

b、prototype.js中的对象继承

prototype.js 1.3.1
this.options = {
      method:       'post',
      asynchronous: true,
      parameters:   ''
    }.extend(options || {});

这个应用比较简单，典型的对象之间属性拷贝覆盖。
总结：关于prototype.js中继承的实现，我们当成javascript对象的属性拷贝可能在应用中更好理解。建议大家仔细读读prototype.js代码可能体会更深。模仿prototype.js中extend的应用。感觉var Insertion = new Object(); 的实现比较经典。

（2）、dojo-0.2.0-ajax中的继承

dojo.inherits  =   function (subclass, superclass)  {
  if ( typeof  superclass  !=  ' function ')  {
  dojo.raise( " superclass:  " + superclass + "  borken " );
}
subclass.prototype  =   new  superclass();
subclass.prototype.constructor  =  subclass;
subclass.superclass  =  superclass.prototype;
  //  DEPRICATED: super is a reserved word, use 'superclass'
  subclass['super']  =  superclass.prototype;
     }

dojo的继承实现比较正统，也是《javascript权威指南》中的实现方法。注意最后一句代码可以实现子类访问父类原型对象的方法。

<SCRIPT LANGUAGE = "JavaScript">

SCRIPT>

看看代码，感觉混乱。
dojo一直没时间仔细读读代码。这部分详细讨论待续。
(3)、总结
关于javascript的继承实现，建议一般不要使用，感觉很乱，代码可读性较差。一般也没有使用必要。详细在《9、javascript对象使用指南》中讨论。

原创专栏开源学习 2006-04-17 23:19 发表评论

javascript进阶之对象篇(4)构造函数、原型对象

原创专栏开源学习 — Mon, 17 Apr 2006 15:12:00 GMT

原型对象prototype是Object或与之同等级的对象如（function，Number)的一个属性，protorype是个对象。typeof的值是object。

如果看了上一小节的最后一个例子，对自定义的“类”应该比较熟悉了。
在javascript中，可以说没有方法，因为函数和字符串一样也是种数据类型，但类中的函数可以用this关键字。下面我说的类的属性可以是方法，也可以指字段。
在一个自定义“类”中有中有几个地方可以定义属性。
   a、函数名中直接定义。如Person.name。在这定义相当于类名的属性。静态的，访问的时候必须用Person.name来访问，不能用new Person().name访问，也访问不到。
   b、构造函数的this.中。当你用new function()时，这些属性就是你所持对象的属性。用new Person().属性来访问。
   c、构建好对象以后，给对象增加属性。和构造函数中的属性使用类似。
   d、函数名的prototype中
   e、父类或Object 的prototype中。

(1)对象属性优先级
通过运行以下代码，我们访问对象属性优先级如下：c>b>d>e
c种属性必须在定义以后访问才有效。a种属性实例访问不到。
javascrpt语言预定义的属性不能用for in 得到。如toString

<SCRIPT LANGUAGE = "JavaScript">

SCRIPT >

(2)prototype属性是只读的
看如下代码，你不要试图通过变量改变原型对象的属性。你也不可能改变，你只会通过c模式给对象增加一个属性。
另外原型对象是所有实例共享的。理论上也不可以改变。

<SCRIPT LANGUAGE ="JavaScript">

SCRIPT>

原创专栏开源学习 2006-04-17 23:12 发表评论

javascript进阶之对象篇(3)函数与自定义”类“

原创专栏开源学习 — Mon, 17 Apr 2006 15:07:00 GMT

开始之前我先明确个问题。如下代码

<SCRIPT LANGUAGE = "JavaScript">

SCRIPT>

在这里Person是个函数，但我们还可以定义它的属性（type）。而Person有Object实例的特性(for in、可以定义属性)，但Person不是Object的实例。

见如下代码：

<SCRIPT LANGUAGE = "JavaScript">

SCRIPT>

我理解function返回的数据类型是和Object同等级的数据类型。它有Object实例（new Object()）的一些特性,但它不是Object的实例，因为它没有继承Object.prototype.toString=function(){return 'myToString'};但我们Person.toString=function(){return 'Person toString'};改变了覆盖了方法。
在《javascript权威指南》中，作者用这个特性实现了“类方法、类变量”static方法，与java中不同，这些方法不能用new Person()来调用。

Object function 同等级 function可以定义属性，可以(for in)

new Object() new function() 同等级 new function()继承了Object的prototype, 也会继承 function的prototype

小例子。看了原型对象就很清楚了啊。原型对象最好在代码最前面定义，很容易被覆盖啊！

<SCRIPT LANGUAGE = "JavaScript">

SCRIPT>

原创专栏开源学习 2006-04-17 23:07 发表评论

javascript进阶之对象篇 (2)大家熟悉的javascript对象

原创专栏开源学习 — Mon, 17 Apr 2006 15:03:00 GMT

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

看以上两段代码，估计很多人对后面的代码熟悉，也这样写了。可他们执行结果是一样的。如果你改变了javascript对象的原型对象后会有些区别。
在这我想提出以下几个问题：
    a、javascript对象也是单根继承的对象.但不是所有对象都继承自Object.如例子中的Date对象。
    b、千万别乱定义Object.prototype原型对象。prototype.js中加了个extends被人说了半天。但我们自己写类库时，千万别尝试改Object的prototype。
    c、别用javacript语言模仿java来写代码。想上面的，需要一个person的“类”，并不是非需要定义一个，注意javascript对象的属性是可以随意增加或删除的。并不象java那样在类中写死。
    d、就上面两段代码有什么区别呢？可以简单的说是person继承了Object”类“。javascript中对象的继承是用prototype来实现的，后面我们讨论prototype原型对象。
    e、那我们应用的时候到底是否该自己定义自己的构造函数（如person）,还是直接使用Object呢？这是个复杂的问题，我个人来说喜欢多用Object.

原创专栏开源学习 2006-04-17 23:03 发表评论

javascript进阶之对象篇(1) javascript中有那些对象

原创专栏开源学习 — Mon, 17 Apr 2006 14:58:00 GMT

a、基本数据类型的包装对象。例如String Number Boolean.关于这三个包装对象这里不准备讨论。建议直接用var s=""; var i=1; var b=false;定义，包装类与java中的包装类不同。javascript中不要用包装类。
   b、javascript预定义的对象。Function Array Date   RegExp Error等对象。这些对象使用比较简单，也不讨论了。
   c、用new Object()创建的对象。等同与var o={a:0,b:'s'};
   d、用自定义的构造函数创建的对象。function O(){}; var o=new O();
   e、dom模型定义的构造函数，浏览器为你创建的对象。用var o=document.getElementById();或其他方法获得。
   f、null也是对象。typeof(null)= object.undefined我理解为变量预编译的初始化值，而null是特殊的对象。如果一个变量=null,说明这个变量是个对象，但不是我上面提到的任何来源方式的对象。如document.getElementById(页面中不存在的id);可以产生一个null对象。

用typeof() 方法返回的是 object 的变量都是对象。 Function除外用new定义的不一定都是对象。

原创专栏开源学习 2006-04-17 22:58 发表评论

javascript进阶之对象篇(6)Object类原型对象的属性和方法

原创专栏开源学习 — Sun, 16 Apr 2006 08:15:00 GMT

javascript所有对象都继承自Object类。以下是Object类的一些属性。原型对象

的一些属性。

1、constructor属性
从javascript1.1开始，每个对象都有这个属性，它指向用来初始化改对象的构造

函数

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

如以上代码，可以知道
a、constructor的类型是函数；
b、javascript内部实现了很多函数，如Object,Date都是函数由Function得到的

。
c、用原型对象实现的继承中，也要设置子类的constructor。如果你的程序中用

到了constructor，可能会出错。
2、toString()方法
相当于java Object类中toString方法。你alert() + 等操作中就会调用这个方

法。 var s='1'+'2',会自动把'1' '2' 转化成String对象在执行。

但数组定义自己的toString方法。alert(Array.prototype.toString)

如果对象或子类要调用父类的方法可以

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

3、toLocalString()方法
ECMAScript v3 javascript1.5中定义了这个方法。返回局部化的值。偶还不知道

什么用法。
4、valueof()
当javascript与要将一个对象转化成字符串之外的原始类型时调用它。

5、hasOwnProperty()方法
《javascript权威指南》说如果是非继承的属性返回true.但下列代码反映，它检

验对象的实例属性。对原型属性不会返回。

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

6、propertyIsEnumerable
《javascript权威指南》如果用能 for( in )枚举的属性，这个方法返回true;
以下代码说明《javascript权威指南》是错的。自己定义的原型对象属性可以枚

举，但返回false

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

7、isPrototypeOf方法
《javascript权威指南》如果调用对象是实际参数指定的对象的原型对象返回

true. 看代码吧。
居然alert(Object.prototype.isPrototypeOf(Person));//true也是true.搞不懂

< SCRIPT LANGUAGE = " JavaScript " >

SCRIPT >

8、总结
看《javascript权威指南》前，就知道toString方法。现在知道了些其他的方法

，但让我更加混乱，《javascript权威指南》讲的也有错误。开发中建议大家除

了toString,其他属性方法不要覆盖也不要使用了。除了对这些方法十分清楚。就

我知道的javascript开源框架中好象没用到这些。

原创专栏开源学习 2006-04-16 16:15 发表评论

javascript进阶之函数篇

原创专栏开源学习 — Thu, 06 Apr 2006 01:22:00 GMT

      在javascript中，function作为一个关键字有两方面的应用。
     a、可以定义函数。
     b、可以定义一个数据类型。这里只介绍函数。关于function定义类的功能在对象中介绍。
1、函数的概念
    javascript中提供了许多预定义函数，我们可以直接使用，比如Math.sin();eval()等。
我们也可以定义自己的函数。有以下四种方法：

a、function add(x,y){return x+y;}
b、var add = function(x,y){return x+y;}
c、var add = new Function("x","y","return x+y;");
d、var add =function a(x,y){return x+y;}

在这，如果用add(2,3);调用，返回的结果都是5。但它们使用有很大的区别，后面在详细解释。

2、函数的参数
回想上一篇提到函数的调用对象。虽然我们不能访问它，看不见，但引入这个概念确实可以方便我们解释很多东西。
在一个函数体内，标识符arguments有特殊含义。它是调用对象的一个特殊属性。

< SCRIPT LANGUAGE = " JavaScript " >
function add(x,y) {
document.writeln('x = ' + x);
document.writeln('y = ' + y);
document.writeln('arguments[ 0 ] = ' + arguments[ 0 ]);
document.writeln('arguments[ 1 ] = ' + arguments[ 1 ]);
arguments[ 0 ] = 11 ;
document.writeln('arguments[ 0 ] = ' + arguments[ 0 ]);
return x + y;
}
document.writeln(add( 2 , 3 ));
SCRIPT >

看例子，基本你可以把arguments当成个数组使用，但并不是真正的数组。
虽然arguments.length and arguments[index]可以在函数内改变，但建议你不要在函数内改变它们。关于arguments的具体用法可以看prototype.js.
arguments还有个属性 callee.引用当前正在执行的函数。

< SCRIPT LANGUAGE = " JavaScript " >
function add(x,y) {
    document.writeln(arguments.callee);
    document.writeln( typeof (arguments.callee));
     return x + y;
}
document.writeln(add);
document.writeln( typeof (add));
document.writeln(' br >----------------------- br > ');
add();
SCRIPT >

3、函数是一种数据类型
在javascript中，函数不但能象java一样当成语言的语法特性，还可以象字符串、数字、日期一样当成一种数据。
var add=function(x,y){return x+y;};其实我们函数的定义都是把函数附值给变量。函数不但可以附值给变量，还可以当成参数传递。

< SCRIPT LANGUAGE = " JavaScript " >
var add = function (x,y) { return x + y;} ;
var fun = add;
function opetate(fun,x,y) {
return fun(x,y);
}
alert(opetate(fun, 2 , 3 ));
SCRIPT >

其实javascript的熟手不会在全局变量里（直接在js文件中）定义函数，都会定义在全局变量的属性字段中。如

< SCRIPT LANGUAGE = " JavaScript " >
   var MyLib = {} ;
  MyLib.fun1 = function () {} ;
  MyLib.fun2 = function () {} ;
  alert(MyLib);
  alert(MyLib.fun1);
SCRIPT >

如果这种写法，我们就基本不会和别人写的程序发生命名上的冲突了。

4、函数的生命周期
在变量里我们知道函数有个预编译过程，这个过程我们也看到不到，另外函数定义不同写法情况也不同。所以，感觉函数的执行过程很是复杂。

< SCRIPT LANGUAGE = " JavaScript " >
  fun1();
  alert(fun1);
// ///////////把以下代码放到定义最后面可以执行。
  fun2();
  alert(fun2)
  fun3();
  alert(fun3)
   // /////////////////////////
   function fun1() {document.writeln('fun1 run ! ')}
   var fun2 = function () {document.writeln('fun2 run ! ')} ;
   var fun3 = new Function( " document.writeln('fun3 run!') " );
SCRIPT >

a、javascript预编译过程（在html中，前后,内外有特殊情况，这指纯.js文件中）
    javascript的预编译我认为是个很简单的过程，对于解释执行语言，肯定不会编译成什么中间语言。（我认为）过程如下：
    首先，为执行环境（一个html也，框架环境下有几个执行环境）建立建立一个全局对象，一般客户端脚本为 window或global对象。（在这我觉得global好理解，因为浏览器会放入window总其他的属性）
    然后，检查某环境中根代码块中（非函数或{}中）var关键字，把这些变量设置成global对象的属性，并附初值undefined.
   如果过程中遇到直接定义的函数（fun1的定义），那么把fun1设置成global对象的属性，并附初值函数的定义（你可以把函数当成undefined,true,1,'1'等数据类型）。
b、解释执行过程
   代码按照顺序执行，
   一般我们把全局变量的俯值放到代码最前面，如var s="hello"; 那么把s的值用 'hello'替换预编译过程的undefined。
   如果遇到变量的应用，如代码 document.writeln(a)，如果我们在global找到属性a,看a是否在前面代码俯值过，如果没有，a的值为预编译的undefined。如果是隐式变量声明，在这把它添加到global的属性中去。
   如果遇到类似var fun=function(){}; 把函数当成数据赋值给变量fun.
c、函数的调用过程
   你运行一下以下代码，为什么结果是 test undefined local

< SCRIPT LANGUAGE = " JavaScript " >
var s = " golbe " ;
function fun(s) {
    document.writeln(s);
    document.writeln(a);
     var s = " local " ;
     var a = "" ;
     return s;
}
document.writeln(fun( " test " ));
SCRIPT >

首先：预编译代码，把s、fun设置为golbe的属性，并赋值s=undefined,fun=函数定义（可以直接调用）。
然后：按照顺序解释执行代码。赋值s="golbe";   函数已经可以直接调用了。
执行函数：当运行到fun("test")时，开始函数调用。
       先为本次调用建立一个调用对象（fun-global）。
       预编译函数体内代码，把参数设置为fun-global的属性，值为为传入值"test",查找var，把a设置成fun-global的属性，值为undefined.(如果var s与参数名称相同，则不重复设置例如函数体内var s="local";)
      按照顺序执行函数内代码，当代码中遇到变量，先从调用对象属性中查找，如果找到直接使用。遇到var s="local";时，代码会覆盖调用对象中属性值（和参数名称相同）

调用对象是个暂时对象，生命周期很短，只有在调用过程中存在，递归可能会建立多个独立的调用对象。
javascript的函数应该和java中一样是线程安全的吧。

5、函数的属性和方法
a、length
看了以下代码一目了然，函数的length代表函数实际需要的参数个数。

< SCRIPT LANGUAGE = " JavaScript " >
function add(x,y) {
     var actual = arguments.length;
     var expected = arguments.callee.length;
     if (actual != expected) {
         throw new Error('函数需要' + expected + '个参数，你输入了' + actual + '个');
    }
     return x + y;
}
alert(add( 3 , 2 ));
alert(add( 3 , 2 , 3 ));
SCRIPT >

b、prototype
这个属性引用的是预定义的原型对象，只有在new 函数名才有效。讲解对象时介绍。
c、定义自己的函数属性

< SCRIPT LANGUAGE = " JavaScript " >
add.count = 0 ;
function add(x,y) {
add.count ++ ;
return x + y;
}
add( 3 , 2 );
add( 3 , 2 );
add( 3 , 2 );
add( 3 , 2 );
document.writeln('共调用函数几次：' + add.count);
SCRIPT >

d、apply() call()方法
去读读prototype.js吧。

原创专栏开源学习 2006-04-06 09:22 发表评论

javascript进阶之变量篇

原创专栏开源学习 — Thu, 30 Mar 2006 01:33:00 GMT

1、关于变量的声名
大家都知道javascript是可以隐式声名变量的。但要注意，隐式声名变量总是被创建为全局变量。看以下代码，情愿javascript语言强制声明变量。建议大家一定要var声明变量。

2、关于变量的作用域
猜猜以下代码输出什么。

如果你的答案是 000 undefined bbb aaa。恭喜，ok.当代码用到x变量时，先从函数块（权威指南中用调用对象来解释）中找，如果找不到，从上一级函数块找，直到找到，如果知道顶层代码（指var x='000';的位置）还没找到定义，代码会报未定义错误。

改一下代码，得到 000 undefined 111 111

3、新的问题
变量个作用域清楚了，注意上面的代码。为什么我的function a()定义以前就可以调用a函数了，而我的var x='111';前“不可以用”x啊？？？
让我把我的理解一一道来
首先：以下代码让我相信javascript有个预编译过程，不是完全按照顺序解释执行的。

个人理解这个预编译过程不会象java/c#那样把代码编译成虚拟机认识的语言，更不会象vb，vc那样编译成更底层的语言。猜想只是把这个函数预装载到这段函数执行的全局环境中，在这个执行环境中，该函数被标识定义过，可以直接使用了。（看到网上很多人写的AOP的javascript实现,其实这个预编译过程才是翻译元数据最佳时候，可惜就javascript语言来讲，是有些落伍了）

这个文章主要讲变量的一些问题。变量说了，为什么函数可以，我变量就不可以呢。

为什么我要输出undefined呢？为什么我a就不可以预编译一把呢？
大家看看以下两段代码会输出什么呢啊？？？

可能你运行试了，可能你本来就知道，a未定义。哈哈哈，好了。
现在我确信var a=0;被javascript解释器“预编译过”，至少是记录下来了。甚至把它的值设置为 undefined。“undefined”这个词名字取的很是让人误解，怎么能叫未定义呢，分明是javascript中所有变量的初始化值。关于null与undefined的比较我实在不愿提了。
注意上面两段代码还反映一个现象。隐式声明的变量是在解释的时候才把自己定义为全局变量的。

关于函数与变量javascript预编译的不同处理，大家可以与java class的加载过程比较下。java也是对基本类型设出值，对象为null的。（不往远扯了）
4、区别未定义变量和未附值变量

未定义变量和未附值变量权威指南中文版定义的。通过第三条分析，我觉得变量就应该以定义和未定义变量区别。未附值变量和undefined有点冲突，javascript不是强类型语言，没发附默认值，才来了个undefined。
5、基本类型和引用类型
熟悉java的朋友可能这部分很清楚。没啥
说头。
6、javascript的垃圾回收
关于这部分内容一直没见着个权威说法。在javascript权威指南中有两小节提到这个问题。
对于字符串、对象、数据这些没有固定大小，必须为它们动态的分配内存，但什么时候回收这些内存呢？javascript使用和java一样的garbage collection的方法。
var s="hello";
var u=s.toUpperCase();
s=u;
运行这段代码后，"hello"没有变量会再用到他，这是"hello"的存储空间的被垃圾回收了。对于javascript的垃圾回收，你唯一要关心的是，它一定会进行，不要对内存担心。
注意，javascript不提供任何的强制垃圾回收或释放内存的运算附或语句。
javascript的delete运算附和C++中的不同。

7、作为属性的变量
猜猜以下代码会输出什么。

估计很多人能得出正确答案
100 100 300 400
------------------------
200 200 300 400
但这里我想引入全局对象和调用对象的概念（javascript权威指南是这么翻译滴）

在函数的调用过程中，假设有个调用对象存在，把函数的参数，和函数内的临时变量当成这个调用对象的属性。当然这个调用对象的生命周期很短。
注意，当我们访问全局变量的属性入x的时候，不必要用this.x 或window.x访问，当在有的页面时会出现混淆。
关于函数的详细讨论我后续会详细讨论。

原创专栏开源学习 2006-03-30 09:33 发表评论