|
锁定老帖子 主题：用js书写UI组件之js基础知识
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-11-28
最后修改：2008-12-01
本人在用js书写UI组件道路上正不断探索与学习，下面是自已的理解与学习笔记。欢迎各位 网友指正。本贴内容仅供参考。但有一点，所发的源代码，本人是测试过的。如果因此各各位 带来不便，请谅解！ [color=blue] 特别说明： 1 本人文中所用的词，也许与各位网页见到的词，概念上有不一致的地方。请各位见谅。本文有许多词 是属于理解之物，请各位注意。重点看例子！通过例子 与文字描述试着理解，如果还理解不了，请各位不要浪费时间了！ 再次说明，本文是笔记与探索文，阅读时要严重注意！ 2 本文的例子全部调试通过了的。默认的浏览器是 firefox 3,调试工具是firebug.在印象中会在ie 6下验证能否 是同样的效果，但不能保证每个都会在ie6 下验证。如果没有特别说明，意味着其他浏览器全部没测试。 本博文与另一篇博文《javascript函数式编程---解决事件参数传递问题》 构成了用js实现书写UI组件的基础知识，及实现的技术手段。 笔记很多，仅选用了自认为对同样道路上有用的朋友。 关于封装的总的方法论，时机到了再发布。 3.1 javascript 模拟类 [/color] 说明： 1 在javascript中，函数就是一个特简单的类。定义了一个函数，就定义了一个类。可用var关键字与new关键字为该函数生成一个对象。 例：
function Aa(){var dd="ddd"};//类名是Aa
var aa1=new Aa();//aa1 是类Aa的对象。同时Aa()函数就是Aa类的构造函数。
2 函数中，前缀有“this.”的变量，就是刻函数类的公有变量与公有方法。 3 注意 this 关键字的使用，它指向当前对象。 例 ：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script language=Javascript>
function Pasta(aaa ){ //构造方法,同时也是类名
this.aaa= aaa;//定义属性,
this.ddd="ddd"; //定义属性,
this.bb=cc;//定义方法
this.eee=function(){alert("cc")};//另一种方法定义及实现
}
function cc(){//方法实现
document.write(this.aaa);
}
// 另一种方法定义与实现
Pasta.prototype.dd= function(d){
alert(d);
}
var xx=new Pasta("hello word");//为类Pasta生成一个名叫xx的对象
xx.bb("sssss");//使用对象
xx.dd("sssxxxx");
xx..eee();
</script>
</body>
</html>
3.2 prototype使用----能简单模拟类 说明： (经walkman指出，在这里作了更改) (1) 所有函数都具有prototype属性。 (2) 函数可当成一个类，可用new为该函数生成一个函数对象。 (3) 可用prototype为函数动态新增函数属性与方法。 (4) 假定有一个函数名为 Afun,则用prototype可为Afun增加属性与方法。此时所有的Afun对象都具有这些属性与方法。 (5) 特别注意：假定有一个对象名为anObj,但无法用prototype为anObj增加属性与方法。 如：
function Dd(){};//定义一个空的类
var dd=new Dd();//生成一个Dd对象
;//动态为Dd类增加一个xx属性,从此时起所有的Dd对象都具有xx属性。
Dd.prototype.xx="22";
//动态为Dd类增加一个say函数,从此时起所有的Dd对象都具有say函数。
Dd.prototype.say=function(){alert(this.xx)};
dd.say(); //执行后，将显示一个信息框，内容为22
var bb=new Dd();//再生成一个Dd对象
bb.say();//执行后，将显示一个信息框，内容为22
//也就是说bb,dd都能调用用prototype定义的属性与函数
结论： 使用prototype能模拟类 3.3 apply与call 使用 appply是所有函数都具有的方法。其作用时，调用该函数，参数通过参数表的形式传入；同时还传递一个对象到该函数的this对象中。 调用形式： functionName.apply(obj,[“zhang”,”34”]); 其义是：调用functionName函数，其参数是”zhang”,”34”,同时在functionName函数执行时，其内部的this对象还具有一个属性obj。注意：这个obj不是functionNam函数固有的，随着apply调用变化而变化。 这个apply动态传一个对象到被调用函数的this对象中，是为特殊应用而生。 另外：1 arguments是每个函数都固有的对象，存放着该函的参数 2 call与apply类似，仅参数方式不同。 例： functionName.call(obj,“zhang”,”34”) 例：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body><script language=Javascript>
function parent(name,age){
this.name=name;
this.age=age;
this.say=function(){
alert(this.name);
}
}
function Son(){
var dd1="ha ha ha";
this.tel="11";
//调用parennt函数，且此时的该函数（即parennt）内的this对象具有dd1的属性。注意：
//仅限于本次执行时才能确定具有dd1的属性。
parent.apply(dd1,["zhang"]);
this.calltel=function(){
alert(this.tel);
}
}
var s = new Son("ss","aa");
s.calltel();
</script>
</body>
</html>
用途： 可用在下面的情景中。 当模拟类继承时，子类构造函数，通过apply调用父类的构造函数。这样执行子类构造函数，也能执行父类的函数。 3.4 模拟类继承 使用prototype与apply实现类继承的模拟。用prototype把父类的公有方法与公有变量加入到子类中去。在子类构造方法中，用apply执行父类的构造方法。 例：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script language=Javascript>
function Parent(){ //父类
this.pname="parentName";//父类公有变量
this.say=function(){alert(this.pname)};//父类公有方法
this.tell=function(){alert(this.pname+"tell")};//父类公有方法
}
function Son(){
//以下两句要先执行，不然不能完成方法覆盖
Son.prototype=new Parent();//得到父类的公有变量与公有方法
Parent.apply(this); //调用父类的构造函数
this.sname="sonName";//子类公有变量
this.say=function(){alert(this.sname)};//子类公有方法，覆盖了父类的say方法
this.talk=function(){alert(this.sname+"talk")};//子类公有方法
}
var son1=new Son();
son1.say();//显示 sonName,表时成功覆盖父类
son1.talk();//显示 sonNametalk ，执行子类自已的方法
son1.tell();//显示 parentNametell ,执父类没被覆盖的方法。
son1.pname="父亲老张"; //使用父类的变量
son1.tell();//显示 父亲老张 表明成功使用了父类的公有方法与属性
son1.sname="儿子小张"; //用子类自已的变量
son1.say(); //显示 儿子小张 表明子类的属性与覆盖方法正常
son1.talk();//显示 儿子小张 表明子类的属性与方法正常
var son2=new Son();//生成另一个子类，研究子类是否是对父类的方法与变量的拷贝
son2.pname="母亲李夫人";
son2.tell();//显示 母亲李夫人； 表明成功使用父类的方法
son1.tell();//显示 父亲老张； 表明多个子类使用的同名的父类的变量，各有自已的值。
</script>
</body>
</html>
3.5 用js实现自已定义的类体系 3.5.1 说明： (1) 本节实例多半摘自悟透javascript一书。 (2) 本节中的类是用javascript语法，实现了自已设定的类体系结构。 (3) Javascript原本是没有类的，只有函数。其他一些章节中提到的类，仅仅是模拟类体系罢了。而这里是要用javascript自已实现一套类体系 3.5.2 语法规定 Create函数-----类的构造函数； Class 函数------类定义函数 New 函数-----产生类的实例。 object---所有自定义类的基类。 说明：javascript区分大小写，自身的关键字为：new Object 自定义的类，如下形式表式：
var Person ={ //定义名为Person的类
Create: function(name, age) {//Create指明构造函数
this.name = name;//定义类公有变量
this.age = age; //定义类公有变量
},
SayHello: function(){//定义公有方法
alert("Hello, I'm " + this.name);
},
HowOld: function(){//定义公有方法
alert(this.name + " is " + this.age + " years old.");
}
};
说明： （1）上例是自已定义的类体系使用例子。例子中定义了一个名为Person的类，其构造方法，由Create指明。 （2）本例中可直接用Person.SayHello()的形式，调用方法。但是无法得到公有变量值，即name与age.解决方法。 （3）在调用了Create函数后，Person类就有了name变量与age变量。 为了说明方便见下例：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script language=Javascript>
var Person ={ //定义名为Person的类
Create: function(name, age) {//Create指明构造函数
this.name = name;//定义类公有变量
this.age = age; //定义类公有变量
},
SayHello: function(){//定义公有方法
alert("Hello, I'm " + this.name);
},
HowOld: function(){//定义公有方法
alert(this.name + " is " + this.age + " years old.");
}
};
// //该语句执行后，Penson类就有了name与age变量。
// Person.Create("dd1","ss1");
function Fun(){Person.Create("dd","ss");};//定义了一个名为Fun的函数，
Fun.prototype=Person;//让Fun拥有Person类的成员
//一旦执行了Fun函数，就执行了Person.Create方法，
//Person.Create方法一执行，Person就有了公有变量name与age
//当Person有了公有变量时，由于Fun中有Person类成员，因此Fun也就有了name变量
//与age变量。
var p =new Fun();
p.SayHello();// 显示“Hello, I'm dd ”， 这表明了p具有了变量name与age.
</script>
3.5.3 New实现 为了生成自定义类的对象，定义了New方法，该方法原型为： New(aClass, aParams) 其中：aClass 类,该类定义中要有Create方法。aParams类构造函数的参数表. 实现时： （1）生成一个临时函数，该函数要执行类定义中的Create方法。 （2） 这个临时函数具有aClass对象； （3） 生成临时函数的对象，并返回给调用者。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>18-1.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<script language="javascript">
//aClass 类，该类定义中有名为Create的函数；aParams 类构造函数的参数表。
function New(aClass, aParams) {
function new_() { //定义临时函数
aClass.Create.apply(this, aParams); //调用类的构造函数，并执行
};
//让临时函数具有aClass类
new_.prototype = aClass;
//生成临时函数的对象。生成时要执行该临时函数，该临时函数会执行类的
//构造函数。类构造函数一旦执行，类就有了公有变量，从而拥有该类的临时
//函数也就具有了类的公有变量。
var a=new new_();
return a; //返回aClass的实例
};
//*******************下面是具自定义类的使用*******************]
//定义Person类
var Person = {
Create: function(name, age){ //定义构造函数
this.name = name; //定义公有变量
this.age = age; //定义公有变量
},
SayHello: function() { //定义公有方法
alert("Hello, I'm " + this.name);
},
HowOld: function() { //定义公有方法
alert(this.name + " is " + this.age + " years old.");
}
};
var BillGates = New(Person, ["Bill Gates", 53]); //生成Person类的实例
//使用Person的实例
BillGates.SayHello();
BillGates.HowOld();
</script>
</body>
</html>
3.6 自定义类体系实现及使用
<!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>20-1.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<script language="javascript">
// 根类 实现,注意object不是的关键字。Object才是固有的。
var object = {
// 判断本实例是否属于指定的类。
isA: function(aType) {
var self = this;
while(self)
{
if (self == aType)
return true;
self = self.Type; //由于类的继承原故，因此要循环。
};
return false;
}
};
// 类定义函数 实现。该函数实现了一个类的定义
//aBaseClass----父类；aClassDefine子类
function Class(aBaseClass, aClassDefine) {
//临时函数
function class_() {
this.Type = aBaseClass; //保存类的父类类型，注：不是祖先类
//复制类定义
for(var member in aClassDefine)
this[member] = aClassDefine[member];
};
//让临时函数拥有父类
class_.prototype = aBaseClass;
//生成临时函数的对象，并返回。该临时函数不仅有父类成员，也有子类成员，
//另外还通过type保存了类的父类的类型。
return new class_();
};
//实例生成函数实现
//aClass---类；aParams---类构造函数的参数表
function New(aClass, aParams) {
//临时函数
function new_() {
this.Type = aClass;//保存该实例的类型
//如果类定义中有名为Create的函数，则执行。
//这个Create是我们约定的构造函数
if (aClass.Create)
aClass.Create.apply(this, aParams); //执行构造函数
};
//让临时函数拥有aClass类
new_.prototype = aClass;
//生成临时函数的实例，并返回给调用者。该实例有类中的所有公有
//变量与方法，还有一个公有变量Type保存着该实例的类型。
return new new_();
};
//*********************自定义类体系使用*************************
//定义一个Person类，父类是object
var Person = Class(object,
//下面是Person类定义的描述
{
Create: function(name, age) { //定义构造函数
this.name = name; //定义公有变量
this.age = age; //定义公有量
},
SayHello: function() { //定义公有方法
alert("Hello, I'm " + this.name + ", " + this.age + " years old.");
}
});
//定义一个Employee类，继承于Person类
var Employee = Class(Person,
//个Employee类的定义描述
{
Create: function(name, age, salary) {
Person.Create.call(this, name, age); //调用基类的构造函数
this.salary = salary;
},
ShowMeTheMoney: function() {
alert(this.name + " $" + this.salary);
}
});
//生成Person类的实例
var BillGates = New(Person, ["Bill Gates", 53]);
//生成Employee类的实例
var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]);
BillGates.SayHello();
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();
//根据 BillGate的类型创建 LittleBill
var LittleBill = New(BillGates.Type, ["Little Bill", 6]);
LittleBill.SayHello();
alert(BillGates.isA(Person)); //true
alert(BillGates.isA(Employee)); //false
alert(SteveJobs.isA(Person)); //true
alert(Person.isA(Employee)); //false
alert(Employee.isA(Person)); //true
</script>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-11-29
最后修改：2008-11-29
yunhaifeiwu 写道
3.2 prototype使用----能简单模拟类 说明： (1) 所有对象都具有prototype属性。
1. 原型(中文解释) 2. 属性名(例如：aFunction.prototype)
所以在 js 中提到 prototype 时，我觉得尤其要对这两种含义加以区分。在下文中，对于第一种意思书写为：prototype 原型，对于第二种意思用斜体加以区分：prototype 属性
我的理解：
1. 每个对象都有 prototype 原型，但是不是每个对象都有 prototype 属性，prototype 属性只有函数才有
2. 一个对象的 prototype 原型就是创建该对象的构造函数的 prototype 属性的值
3. 因为以上第二点，所以“所有的”函数的原型就是 Function 对象的 prototype 属性的值，而和其自身的 prototype 属性无关！例如 Ext 中每个函数都有 createDelegate 方法，这是因为 Function 的 prototype 属性被 Ext 重写了
4. 补充第一点，除了函数以外，其他对象都没有 prototype 属性，只有一个指向其构造函数的 prototype 属性的“内部引用”(外界无法访问)，这点体现在创造它的构造函数中，用函数创建对象的详细故事大家都比较了解，不多说了
|
| 返回顶楼 | |
|
发表时间：2008-11-29
最后修改：2008-11-29
walkman 写道 yunhaifeiwu 写道 3.2 prototype使用----能简单模拟类 说明： (1) 所有对象都具有prototype属性。 说说我对 “prototype” 的理解，首先我“不太”赞同楼主的这个观点。prototype 谁人不知谁人不晓？大名鼎鼎的 js 库啊！但是除了这个显赫的身份外，prototype 在 js 语言中还有两层意思： 1. 原型(中文解释) 2. 属性名(例如：aFunction.prototype) 所以在 js 中提到 prototype 时，我觉得尤其要对这两种含义加以区分。在下文中，对于第一种意思书写为：prototype 原型，对于第二种意思用斜体加以区分：prototype 属性 我的理解： 1. 每个对象都有 prototype 原型，但是不是每个对象都有 prototype 属性，prototype 属性只有函数才有 2. 一个对象的 prototype 原型就是创建该对象的构造函数的 prototype 属性的值 3. 因为以上第二点，所以“所有的”函数的原型就是 Function 对象的 prototype 属性的值，而和其自身的 prototype 属性无关！例如 Ext 中每个函数都有 createDelegate 方法，这是因为 Function 的 prototype 属性被 Ext 重写了 4. 补充第一点，除了函数以外，其他对象都没有 prototype 属性，只有一个指向其构造函数的 prototype 属性的“内部引用”(外界无法访问)，这点体现在创造它的构造函数中，用函数创建对象的详细故事大家都比较了解，不多说了 真诚感谢walkman! 在这一点上，自已的确很迷惑，自已总结的第一点与第二点存在着明显的不协调！现在作了更改。 这里才次感谢walkman! ，我再查查有没有更合的理解与归纳！ |
| 返回顶楼 | |
|
发表时间：2008-11-30
UI要解决的主要问题应该是数据和表现的管理.
表现也就是UI的视觉. 数据就是UI的内容. 从理论上说这符合模板的功能. 因此我一直认为UI就是对数据进行详细管理的模板. |
| 返回顶楼 | |
|
发表时间：2008-11-30
最后修改：2008-11-30
achun 写道 UI要解决的主要问题应该是数据和表现的管理.
表现也就是UI的视觉. 数据就是UI的内容. 从理论上说这符合模板的功能. 因此我一直认为UI就是对数据进行详细管理的模板. 这个理解与观点，我支持！ 要设计可以复用的UI组件（指基于html的web组件，其他的还没琢磨），重要一点就是要对已经写好的且大量重复的html代码（或其他）进行封装。 许多浏览器都支持js，因此用js封装 方便一些。而封装，如果用面向对象的思想与方法进行，可把以往的知识运用到这里，少了许多思想与方法上的探索。故，我认为用js进行模拟面向对象是用js书写UI组件的基础之一。基础之二就是，会用js动态生成可视的DOM节点（如常见的div,文本框，按钮等），这个没难度，难度在于为这些节点关联事件响应函数。js太灵活了，仅提供了各种基本的技术，需要把他们综合才能实现。因此关联事件响应，并传递自定义参数，是基础知识之二。 在这两天的琢磨过程中，认为简单的封装，上面提到的两个基础知识点，就差不多了。如果要复杂的封装，如在一个已经封装好的组件中，在加入另一个已经写好的组件，这两个知识点还不够。 正如achun所言，UI组件是数据与表现的管理，如何把数据与表现进行描述并在js中实现，是UI复杂封装要考虑的问题， 初步思路时，用一个map数据结构保存UI组件挂入点（该组件可视部份在DOM树中的哪一个节点下），用另一个map数据结构保存各个组件对象。这样当需要时，直接从他们中查找出再使用就可以了。当然这种方法，在强大的js中，不会是高效的，但是能实现封装目的，有了这个封装方法，再结合优秀的其他方法优化它，必要时还可陶汰这种探索过的方法。 这样我至始至终有一个系列实现自已目的东东。在复杂的WEB视觉设计中，自已的灵活度非常的高。 因此，寻找一个高效的数据结构是UI复杂组件不可少的另一任务。js没提供map,但支持json，这个json太强了，把眼前简单封装搞到一定程度，再从json中寻找出一个高效的数据结构（json本身就是一个树状结构，现在思想有点混，还没理清）。 |
| 返回顶楼 | |
|
发表时间：2008-11-30
最后修改：2008-11-30
to:yunhaifeiwu
我们这样做,你看如何. 你先提一个简单的UI组件,我们分别用不同的方法来实现他 我用我写的jct模板工具做. 我一直认为jCT有这个能力,不过没有实际去做成组件.(当然可能要配合其他工具) 通过实战,找到一种比较好的开发模式. |
| 返回顶楼 | |
|
发表时间：2008-11-30
最后修改：2008-11-30
achun 写道 to:yunhaifeiwu
我们这样做,你看如何. 你先提一个简单的UI组件,我们分别用不同的方法来实现他 我用我写的jct模板工具做. 我一直认为jCT有这个能力,不过没有实际去做成组件.(当然可能要配合其他工具) 通过实战,找到一种比较好的开发模式. 好啊！我接下来先打算做一个简单的lightBox。然后，在这个基础上，允许多次向lightBox装入lightBox。到这里，现阶段就不在深入了，然后考虑基本网页如何用这个简单的lightBox进行表达。javascript封装现阶段就到此为止。（我将按计划做其他东东） 重点是找到书写自已UI组件方法，当看到一个网页局部版面较好时，通过foxBug查出其div布局样式，快速封装出来；或在平面设计软件上，作出布局与构图，然后用div,css去表现，再封装出来。这种方法与直接用第三方组件相比，有点笨，但自我感觉自已设计的自由度大点。如果兼容性不容易满足，会考虑用jquery之类的轻量级框架，进行封装。 |
| 返回顶楼 | |
|
发表时间：2008-11-30
最后修改：2008-11-30
好。就拿lightBox开头。
由上面的基本分析来说，如果我们按照由简单到复杂的模式开发这个的话，也不可避免的要处理几个关键问题
开发策略。我首选的是用jQuery来做这个(完成之后再用其他方法实现一个，比较一下)，貌似这个用不上jCT。这3个基本需求jQuery都有支持（扩展）。 而且前几天我正好改造了一个center的扩展可以用到这上面 jQuery 插件 center今天太晚了，明天做吧。
|
| 返回顶楼 | |
|
发表时间：2008-12-01
最后修改：2008-12-01
achun 写道 好。就拿lightBox开头。 我们先分析一下lightBox的特性：
由上面的基本分析来说，如果我们按照由简单到复杂的模式开发这个的话，也不可避免的要处理几个关键问题
开发策略。我首选的是用jQuery来做这个(完成之后再用其他方法实现一个，比较一下)，貌似这个用不上jCT。这3个基本需求jQuery都有支持（扩展）。 而且前几天我正好改造了一个center的扩展可以用到这上面 jQuery 插件 center 今天太晚了，明天做吧。 对于javascript知识，我比较薄弱。现在还处于造轮子阶段。今天利用空闲时间，先研究一下yemoo 的消息提示组件。汗，昨天才粗步弄清大体的工作过程。对了，在javascript中，昨天总算找到了一个可以模仿java中的map的东东--------关联数组。但这个还不能直接当map用，对key他允许重复（这个有疑问了，在脚本中暂时不会重复），需要对之处理。
var dd =new Array();//定义数组
dd["aa"]="aaa";//新增一个key为"aa"的元素
dd["ss"]="sss";//新增一个key为"aa"的元素
dd["aa"]="bbb";//修改key为"aa"的元素。奇怪，在用firebug的监控器里输入该语句会再新加入一个元素
delete dd["aa"];//删降key为"aa"的元素
for(var t in dd){ //循环遍历数组
alert(dd[t]);//读出数组中的数据，其中key值为t中的值
}
}
24
|
| 返回顶楼 | |
|
发表时间：2008-12-01
最后修改：2008-12-01
yunhaifeiwu 写道
对于javascript知识，我比较薄弱。现在还处于造轮子阶段。今天利用空闲时间，先研究一下yemoo 的消息提示组件。汗，昨天才粗步弄清大体的工作过程。对了，在javascript中，昨天总算找到了一个可以模仿java中的map的东东--------关联数组。但这个还不能直接当map用，对key他允许重复（这个有疑问了，在脚本中暂时不会重复），需要对之处理。 var dd =new Array();//定义数组
dd["aa"]="aaa";//新增一个key为"aa"的元素
dd["ss"]="sss";//新增一个key为"aa"的元素
dd["aa"]="bbb";//修改key为"aa"的元素。奇怪，在用firebug的监控器里输入该语句会再新加入一个元素
delete dd["aa"];//删降key为"aa"的元素
for(var t in dd){ //循环遍历数组
alert(dd[t]);//读出数组中的数据，其中key值为t中的值
}
}
24
不能呀!哥们.你把java的习惯完全带到javascript了呀! var obj={aa:'aaa',ss:'sss'};//这就是一个普通的js对象,也是js中2等的对象,这就是一个超级大map呀
var fun=function (){}//一等的是函数,定义一个函数对象
fun.aa='aaa';//扩展fun,
fun.ss='sss';//相比前面的obj,fun多了可执行,当然细节上是有差异的,比如说不能定义
fun.length=4;//错误因为length是每个function都有的属性,表示定义的时候参数的个数
var array=[1,2,3,'aaa','bbb','ccc',444,55,6,8];//定义数组对象
array.aaa='aaa';//扩展它,注意上面的aaa是数组array索引为3的元素值,现在的是扩展了,也就是说js里的对象是这么的随便,这也是一个超级大map
for(var k in array){alert(k);}//就是遍历对象array的成员了,可以遍历到array.aaa,当然对于数组来说预定义的方法和属性是不会被遍历到的,比如length,split,slice等
for(var i=0;i<array.length;i++){alert(array[i])}//这是普通的遍历数组的方法了,和上面的相比当不能访问到,array.aaa了
for(var k in obj){alert(k);}//就是遍历对象obj的成员了,当然对于Object来说,也是遍历不到预定义的方法和属性
for(var k in fun){alert(k);}//就是遍历对象fun的成员了,当然对于Function来说,也是遍历不到预定义的方法和属性
另外对象的key是不会重复的,不知道你是怎么测试的.但是这肯定是不会发生的事情. |
| 返回顶楼 | |
