JavaScript基础之继承

2014-06-19  来源:本站原创  分类:编程  人气:11 

前些天写了一篇关于JavaScript基础的帖子"JavaScript基础之对象"。在那篇帖子中说马上就会写一些关于继承方面的东西。可是上周杂事太多,都没有时间动笔,就一直拖到今天才终于下笔写了。上一篇帖子中很多人认为我自己的东西太少了,所以这篇帖子中在说完基础知识之后我会给出一个完整的例子。

大家都知道面向对象语言的三大特性为:封装、继承、多态。面向对象的语言之所以强大就全依赖于这三大特性。脚本作为一种准面向对象的语言虽然有先天的不足,但还是能在某种程度上去实现这些特性。实现最多、技术最成熟的就数继承了,不过脚本也不能像C#一样简单地用一个":"就能实现继承,而是要自己去实现继承的细节。

1 继承的几种实现方法

要实现继承首先就必须要有子类、父类(超类、基类等叫法)。子类去继承父类的方法和属性。在脚本里所有开发人员定义的类都可以作为父类,不过本地类(native object)和宿主类(host object)不能作为父类。由于脚本里面没有访问修饰符,父类所有的属性和方法都可以被子类直接访问。子类也可以扩展父类的属性和方法。

1.1 call()方法

Call方法是脚本的一个内置(build in)方法。官方说明为:调用一个对象的方法,以另一个对象替换当前对象。语法为:call([thisObj[,arg1[, arg2[, [,.argN]]]]])。用这个方法可以很容易地模拟继承的实现:

类(funCreateElement)有一个属性(sAClassName)和一个方法(createALink)。它的作用是创建一个DOM元素。这个类使用this关键字给属性赋值,这样就确保了所有的实例指向的都是自己的值。

1function funCreateElement(sClassName)
2 {
3 this.sAClassName=sClassName;
4
5 this.createALink=function()
6 {
7 var oA=document.createElement("a");
8 oA.className=this.sAClassName;
9 return oA;
10 }
11 }

1function funCurrNavi()
2 {
3 // 继承元素创建类
4 funCreateElement.call(this,"tblNavigatorA");
5 }

这样就实现了一个最简单的继承了。在funCurrNavi的实例里就可以直接使用funCreateElement类里面的方法了。

var o=new funCurrNavi();
o.createALink();

1.2 apply()方法

apply方法也是脚本的一个内置(build in)方法。其用法和call对象类似。官方说明为:应用某一对象的一个方法,用另一个对象替换当前对象。语法为:apply([thisObj[,argArray]])。实际上这两个的作用几乎是相同的,要注意的地方是call(thisObj[,arg1[, arg2[,)中的arg参数可以是变量,而apply([thisObj[,argArray]])中的参数为数组集合。由于和call方法就只有参数的不同而已所以就不举例子了。

1.3 原型链

Prototype对象是所有类的源头。如果修改了prototype类的方法则这个修改会反映到所有类的实例里面。比如:在string.prototype里面加一个方法trim(),String.prototype.trim=function(){}。那么所有的字符串都会具有trim()方法了("aa".trim())。由于prototype的这个特性,我们就可以实现继承方法了。如果用原型链的方式重定义前面的例子,它们将变为下面的形式:

这种方式采用funCurrNavi.prototype=new funCreateElement()方法,将funCreateElement类里面所有的属性和方法都复制到funCurrNavi类里面。非常的快捷。这种方式虽然非常的快捷,但是也有其缺点。采用这种方式时子类所有的属性和方法都必须在funCurrNavi.prototype=new funCreateElement()语句之后。因为该语句会覆盖funCurrNavi类原有的prototype类,添加了新的属性和方法的原有prototype类将被销毁。而且父类和子类都没有参数,只能通过设置属性的方法传入参数。

1function funCreateElement()
2 {
3 }
4
5 funCreateElement.prototype.sAClassName=sClassName; // 样式类
6 funCreateElement.prototype.createALink=function()
7 {
8 var oA=document.createElement("a");
9 oA.className=this.sAClassName;
10 return oA;
11 }
12
13
14 function funCurrNavi()
15 {
16 }
17
18 funCurrNavi.prototype=new funCreateElement();
19 funCurrNavi.prototype.showMeInDiv=function()
20 {
21 }

1.4 混合方式

混合方式就是指将前两种方式结合起来使用,取长避短。在call方式里面定义类的方式不理想,相同的方法在实例里面被重复的实例化了。原型链的方法则因为没有参数而不理想,使用参数前得额外的去设置其属性,不如构造函数的参数来的方便。根据上一篇帖子中定义类的混合方式,我们重新定义funCreateElement类:

1function funCreateElement(sClassName)
2 {
3 this.sAClassName=sClassName;
4 }
5
6 funCreateElement.prototype.createALink=function()
7 {
8 var oA=document.createElement("a");
9 oA.className=this.sAClassName;
10 return oA;
11 }

然后在funCurrNavi类里面采用call方式继承funCreateElement类的属性,采用原型链的方式继承其方法。如下:

1function funCurrNavi(sLinkText)
2 {
3 funCreateElement.call(this,"tblNavigatorA");
4
5 this.LinkText=sLinkText;
6 }
7
8 funCurrNavi.prototype=new funCreateElement(); // 继承超链接类
9
10 funCurrNavi.prototype.showMeInDiv=function()
11 {
12 var oLink=this.createALink();
13 oLink.text=this.LinkText;
14 }

采用funCreateElement.call(this,"tblNavigatorA")方式继承其参数,funCurrNavi.prototype=new funCreateElement()方式继承其方法。从而达到方法不会被实例化多次的目的。

2 实例

前面讲述了几种继承的实现方式,这一小节就利用前面讲述的方法去练习一个小例子。这个例子是根据一个字符串去呈现一个树状的列表,这种需求常见于页面的导航中。由于只是为了辅助讲述继承,例子有些地方不免有些牵强附会和小题大做的地方。这些就希望各位网友包涵了,请各位珍惜自己的砖头了。我在这里戴上钢盔等候大家的批评了。:)

下面是其运行成功的样图:

左面的那个是用table作为容器,右边的那个是用div作为容器。

1<html xmlns="http://www.w3.org/1999/xhtml">
2<head>
3 <title>Create Admin Pages" Navigator</title>
4 <style type="text/css">
5 /**//*导航table的样式*/.tblNavigator
6 {
7 border: 2px solid #FFD7AC;
8 width: 200px;
9 margin: 3px;
10 background: #fff;
11 margin-top: 5px;
12 margin-bottom: 5px;
13 border-collapse: collapse;
14 }
15 /**//*每个根节点的样式*/.tblNavigatorRoot
16 {
17 height: 30px;
18 line-height: 30px;
19 text-align: left;
20 vertical-align: middle;
21 }
22 /**//*根节点的子节点的样式*/.tblNavigatorTD
23 {
24 border-collapse: collapse;
25 border: 1px solid #FFE6CB;
26 height: 22px;
27 text-indent: 15px;
28 background: #fff;
29 width: 100%;
30 }
31 /**//*导航中的超链接*/.tblNavigatorA
32 {
33 font-weight: 700;
34 text-decoration: none;
35 color: Black;
36 width: 100px;
37 }
38 </style>
39</head>
40<body>
41 <div id="divMain">
42 </div>
43 <div id="divMain2" class="tblNavigator">
44 </div>
45
46 <script type="text/javascript">
47
48 var sNavigatorMain =
49 {
50 sNavigators:[
51 {
52 root:[{name:"root1"}],
53 sons:[{name:"root1Son1",url:"bcc"},{name:"root1Son2",url:"bcc"}]
54 },
55 {
56 root:[{name:"root2"}],
57 sons:[{name:"root2Son1",url:"bcc"}]
58 },
59 {
60 root:[{name:"root3"}],
61 sons:[{name:"root3Son1",url:"bcc"},{name:"root3Son2",url:"bcc"},{name:"root3Son3",url:"bcc"}]
62 },
63 {
64 root:[{name:"root4"}],
65 sons:[{name:"root4Son1",url:"bcc"},{name:"root4Son3",url:"bcc"}]
66 }
67 ,
68 {
69 root:[{name:"root4"}],
70 sons:[{name:"root4Son1",url:"bcc"},{name:"root4Son3",url:"bcc"}]
71 }
72 ]
73 };
74
75 /**//*
76 * 创建一个元素
77 * sClassName:元素的样式控制类
78 */
79 function funCreateElement(sClassName)
80 {
81 // 样式类
82 this.sAClassName=sClassName;
83 }
84
85 /**//*
86 * 创建超链接元素
87 * sText:超链接显示的文本
88 * sUrl:超链接的href
89 * sTarget:打开链接的目标
90 * 返回:超链接元素
91 */
92 funCreateElement.prototype.createALink=function(sText,sUrl,sTarget)
93 {
94 var oA=document.createElement("a");
95 oA.href=sUrl; // 链接文本
96 oA.className=this.sAClassName; // 样式类
97 oA.target=sTarget; // 打开链接的目标
98 oA.appendChild(document.createTextNode(sText)); // 显示文本
99
100 return oA;
101 }
102
103 /**//*
104 * 创建Div元素
105 * sText:显示的文本
106 * 返回:Div元素
107 */
108 funCreateElement.prototype.createDivBlank=function()
109 {
110 var oDiv=document.createElement("div");
111 oDiv.className=this.sAClassName;
112 return oDiv;
113 }
114
115 /**//*
116 * 创建Div元素
117 * sText:显示的文本
118 * 返回:Div元素
119 */
120 funCreateElement.prototype.createDivNoLink=function(sText)
121 {
122 var oDiv=document.createElement("div");
123 oDiv.className=this.sAClassName;
124 oDiv.appendChild(document.createTextNode(sText));
125
126 return oDiv;
127 }
128
129 /**//*
130 * 创建一个模块的节点
131 * oNaviJSON:一个模块节点的文本
132 * oParentObject:父节点
133 * sClassNameRoot:根节点的样式类
134 * sClassNameNode:子节点的样式类
135 */
136 function funCurrNavi(oNaviJSON,oParentObject,sClassNameRoot,sClassNameNode)
137 {
138 // 继承元素创建类
139 funCreateElement.call(this,"tblNavigatorA");
140
141 // 当前导航的菜单
142 this.oNavi=oNaviJSON;
143 // 当前导航的父节点
144 this.oParent=oParentObject;
145 // 根节点的样式类
146 this.oNClassNameRoot=sClassNameRoot;
147 // 子节点的样式类
148 this.oNClassNameNode=sClassNameNode;
149 }
150
151 // 继承超链接类
152 funCurrNavi.prototype=new funCreateElement();
153
154 // 显示自己(在Table容器里)
155 funCurrNavi.prototype.showMeInTable=function()
156 {
157 // 在父容器中添加一行,并将父节点写入
158 this.oParent.insertRow(0);
159 this.oParent.rows[0].onclick=function(){alert(this.innerText)};
160 this.oParent.rows[0].insertCell(0);
161 this.oParent.rows[0].cells[0].className=this.oNClassName;
162 this.oParent.rows[0].cells[0].appendChild(document.createTextNode(this.oNavi.root[0].name));
163
164 var j=this.oNavi.sons.length;
165 for(var i=0;i<j;i++)
166 {
167 this.oParent.insertRow(i+1);
168 this.oParent.rows[i+1].insertCell(0);
169 this.oParent.rows[i+1].cells[0].className=this.oNClassNameNode;
170 this.oParent.rows[i+1].cells[0].appendChild(this.createALink(this.oNavi.sons[i].name,this.oNavi.sons[i].url,"_blank"));
171 }
172 }
173
174 // 显示自己(在Div容器里) 返回:div
175 funCurrNavi.prototype.showMeInDiv=function()
176 {
177 // 创建一个暂时的容器
178 var oDivContainer=document.createElement("div");
179
180 // 在父容器中将父节点写入
181 var oDivRoot=this.createDivNoLink(this.oNavi.root[0].name);
182 oDivRoot.className=this.oNClassNameRoot;
183 oDivRoot.onclick=function(){alert(this.innerText);};
184 oDivContainer.appendChild(oDivRoot);
185
186 // 链接节点
187 var oDivLinkNode;
188
189 var j=this.oNavi.sons.length;
190 for(var i=0;i<j;i++)
191 {
192 oDivLinkNode=this.createDivBlank();
193 oDivLinkNode.appendChild(this.createALink(this.oNavi.sons[i].name,this.oNavi.sons[i].url,"_blank"));
194 oDivLinkNode.className=this.oNClassNameNode;
195 oDivContainer.appendChild(oDivLinkNode);
196 }
197
198 return oDivContainer;
199 }
200
201
202 /**//*
203 * 创建所有的节点
204 * oNavisJSON:所有节点的文本
205 */
206 function funCurrNavis(oNavisJSON,sClassName)
207 {
208 // 当前导航的菜单
209 this.oNavis=oNavisJSON;
210 // 样式类
211 this.oNsClassName=sClassName;
212 }
213
214 // 创建所有的节点(以Table为容器)
215 funCurrNavis.prototype.createNavigatorsInTable=function()
216 {
217 // 创建父Table
218 var oTable=document.createElement("table");
219 oTable.className=this.oNsClassName;
220
221 // 创建tbody
222 var oTBody=document.createElement("tbody");
223 oTable.appendChild(oTBody);
224
225 var j=this.oNavis.sNavigators.length;
226 var CNavi;
227
228 for(var i=j-1;i>=0;i--)
229 {
230 CNavi=new funCurrNavi(this.oNavis.sNavigators[i],oTBody,"tblNavigatorRoot","tblNavigatorTD");
231 CNavi.showMeInTable();
232 }
233
234 return oTable;
235 }
236
237 // 创建所有的节点(以Div为容器)
238 funCurrNavis.prototype.createNavigatorsInDiv=function()
239 {
240 // 创建容器
241 var oContainer=document.createDocumentFragment();
242
243 var j=this.oNavis.sNavigators.length;
244 var CNavi;
245
246 for(var i=0;i<j;i++)
247 {
248 CNavi=new funCurrNavi(this.oNavis.sNavigators[i],{},"tblNavigatorRoot","tblNavigatorTD");
249 oContainer.appendChild(CNavi.showMeInDiv());
250 }
251
252 return oContainer;
253 }
254
255 /**//*
256 * 供调用的函数
257 * sNavigatorMain:所有节点的文本
258 * sParentID:导航父容器的ID
259 */
260 function showNavigator(sNavigatorMain,sParentID,sFlag)
261 {
262 var oTemp=eval("ddkk="+sNavigatorMain);
263 var main=new funCurrNavis(oTemp,"tblNavigator");
264
265 if(sFlag=="div")
266 {
267 document.getElementById(sParentID).appendChild(main.createNavigatorsInDiv());
268 }
269 else
270 {
271 document.getElementById(sParentID).appendChild(main.createNavigatorsInTable());
272 }
273 }
274
275 </script>
276
277 <script type="text/javascript">
278 // showNavigator("{sNavigators:[{root:[{name:"用户管理"}],sons:[{name:"个人信息管理",url:"~/UserMng/frmMyInfoMng.aspx"},{name:"本单位用户管理",url:"~/UserMng/frmUserMng.aspx"},{name:"本单位信息管理",url:"~/SysMaintenance/frmDeptInfo.aspx"}]},{root:[{name:"申报管理"}],sons:[{name:"项目管理",url:"~/Declaration/frmProjAppMng.aspx"}]},{root:[{name:"留言板管理"}],sons:[{name:"给管理员留言",url:"~/Information/frmQuestion.aspx"}]}]}","divMain","table");
279
280 //showNavigator("{sNavigators:[{root:[{name:"用户管理"}],sons:[{name:"个人信息管理",url:"~/UserMng/frmMyInfoMng.aspx"},{name:"本单位用户管理",url:"~/UserMng/frmUserMng.aspx"},{name:"本单位信息管理",url:"~/SysMaintenance/frmDeptInfo.aspx"}]},{root:[{name:"申报管理"}],sons:[{name:"项目管理",url:"~/Declaration/frmProjAppMng.aspx"}]},{root:[{name:"留言板管理"}],sons:[{name:"给管理员留言",url:"~/Information/frmQuestion.aspx"}]}]}","divMain2","div");
281 </script>
282
283</body>
284</html>

在这个实例里面采用了JSON字符串作为数据源"{sNavigators:[{root:[{name:"用户管理"}],sons:[{name:"个人信息管理",url:"~/UserMng/frmMyInfoMng.aspx"},{name:"本单位用户管理",url:"~/UserMng/frmUserMng.aspx"},{name:"本单位信息管理",url:"~/SysMaintenance/frmDeptInfo.aspx"}]},{root:[{name:"申报管理"}],sons:[{name:"项目管理",url:"~/Declaration/frmProjAppMng.aspx"}]},{root:[{name:"留言板管理"}],sons:[{name:"给管理员留言",url:"~/Information/frmQuestion.aspx"}]}]}"。其格式好了的形式类似于上面例子中的

1var sNavigatorMain =
2 {
3 sNavigators:[
4 {
5 root:[{name:"root1"}],
6 sons:[{name:"root1Son1",url:"bcc"},{name:"root1Son2",url:"bcc"}]
7 },
8 {
9 root:[{name:"root2"}],
10 sons:[{name:"root2Son1",url:"bcc"}]
11 },
12 {
13 root:[{name:"root3"}],
14 sons:[{name:"root3Son1",url:"bcc"},{name:"root3Son2",url:"bcc"},{name:"root3Son3",url:"bcc"}]
15 },
16 {
17 root:[{name:"root4"}],
18 sons:[{name:"root4Son1",url:"bcc"},{name:"root4Son3",url:"bcc"}]
19 }
20 ,
21 {
22 root:[{name:"root4"}],
23 sons:[{name:"root4Son1",url:"bcc"},{name:"root4Son3",url:"bcc"}]
24 }
25 ]
26 };

用JSON字符串作为数据源非常的方便,他能直接转化成类。上面的例子非常简单就不详细地说明了,通过注释就能看明白了。

这篇帖子我希望各位兄台就技术方面多提提意见。千万别扔砖头!!

相关文章:"JavaScript基础之对象";

来自:http://www.cnblogs.com/syuko/archive/2008/03/18/1110210.html

相关文章
  • JavaScript基础之继承(二) 2014-12-12

    接上文:<JavaScript基础之继承(一)> JavaScrip是一个无类.面向对象的语言.因为如此,它采用了原型的继承方式取代了传统的继承方式.这就会使那些接受传统面向对象语言(像C++,Java)教育的程序员们迷惑了.JavaScript的原型继承方式使它比传统的继承方式具有更强的表现力.这点我们马上就要看到了. Java JavaScript 强类型 弱类型 静态的 动态的 传统的继承 原型的方式 类 函数 构造器 函数 方法 函数 但是首先,为什么我们这么在意继承呢?有两个主要原因

  • JavaScript基础之继承 2014-06-19

    前些天写了一篇关于JavaScript基础的帖子"JavaScript基础之对象".在那篇帖子中说马上就会写一些关于继承方面的东西.可是上周杂事太多,都没有时间动笔,就一直拖到今天才终于下笔写了.上一篇帖子中很多人认为我自己的东西太少了,所以这篇帖子中在说完基础知识之后我会给出一个完整的例子. 大家都知道面向对象语言的三大特性为:封装.继承.多态.面向对象的语言之所以强大就全依赖于这三大特性.脚本作为一种准面向对象的语言虽然有先天的不足,但还是能在某种程度上去实现这些特性.实现最多.技

  • JavaScript类和继承 constructor属性 2013-10-19

    本文介绍了JavaScript里面的constructor属性.这个属性是理解JavaScript类和继承的重要基础. constructor属性始终指向创建当前对象的构造函数.比如下面例子:比如下面例子: // 等价于 var foo = new Array(1, 56, 34, 12); var arr = [1, 56, 34, 12]; console.log(arr.constructor === Array); // true // 等价于 var foo = new Functio

  • JavaScript中实现继承的三种方式和实例 2014-01-08

    这篇文章主要介绍了JavaScript中实现继承的三种方式和实例,本文讲解了类式继承.原型式继承.使用扩充方法实现多重继承三种方式,需要的朋友可以参考下 javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是"类",代码如下: 首先定义一个父类(或超类): funct

  • JavaScript类和继承 this属性使用说明 2014-02-22

    本文介绍了JavaScript里面的this属性.这个属性是理解JavaScript类和继承的重要基础. this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: <script type="text/javascript"> co

  • JavaScript类和继承 prototype属性 2014-06-14

    本文介绍了JavaScript里面的prototype属性.这个属性是理解JavaScript类和继承的重要基础. 我们已经在第一章中使用prototype属性模拟类和继承的实现. prototype属性本质上还是一个JavaScript对象. 并且每个函数都有一个默认的prototype属性. 如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数. 比如下面一个简单的场景: // 构造函数 function Person(name) { this.name = name; } /

  • Javascript玩转继承(三) 2015-03-24

    在前两篇文章中,介绍了构造继承和原型继承.今天把剩下的两种写完,这两种的应用相对于前两种来说应用很少,因此我把他们称为是非主流继承方式 首先,我们来看非主流继承一:实例继承法. 我也不说那么多废话了,既然是非主流继承,就一定不常用,既然不常用还存在,那就只有一个因素,他用于特定的场合.实例继承法,就主要用于核心对象的继承,也是目前为止唯一能够解决核心对象继承的方式. 核心对象的继承拥有一定的价值,比如说Error对象,我们公司可能要自己实现一个Error 类来简化今后的开发,那么这个时候我就要使

  • JavaScript的原型继承详解 2015-03-24

    这篇文章主要详细介绍了JavaScript的原型继承的相关资料,十分详细,需要的朋友可以参考下 JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他两个容后再讲. JavaScript的继承和C++的继承不大一样,C++的继承是基于类的,而JavaScript的继承是基于原型的. 现在问题来了. 原型是什么?原型我们可以参照C++里的类,同样的保存了

  • 回顾JavaScript基础知识小结1 2013-08-10

    Javascript是一门极富表现力的语言,在当今大行其道的Web浪潮中扮演着非常关键的作用.合理.高效地利用这门技术,可以让我们的Web世界多姿多彩.首先,我们认识一下这门技术的几个独特的特性. 1. Javascript最大的特性在于其灵活性.作为一名前端开发人员,既可以采用函数式的编程风格,也可以采用更复杂一点的面向对象的编程风格.不管你采用哪种风格,都可以完成一些非常有用的任务.因而,Javascript是一门面向过程的语言,同时也是一门面向对象的语言,进而可以模仿面向对象语言的编程模式

  • JavaScript中的继承方式详解 2013-10-17

    这篇文章主要介绍了JavaScript中的继承方式详解,本文讲解了js继承的概念.原型式继承与类式继承.原型链继承.类式继承.组合继承.原型式继承等内容,需要的朋友可以参考下 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来创建一个自

  • Javascript基础教程之if条件语句 2013-10-22

    这篇文章主要介绍了Javascript基础教程之if条件语句,需要的朋友可以参考下 if 是常用语法之一,其格式如下 if(coditon) statement1 (else statement2) 其中,coditon可以是任何表达式,甚至不比是真正的布尔值,因为JavaScript会将其自动转化为布尔值. 如果条件执行结果为true,则执行statement1,如果条件为false,则执行结果statment2,(如果statement2存在,则else不是必须的) 每个条件语句可以是单行代

  • Javascript基础教程之JavaScript语法 2013-11-19

    本文是javascript基础教程的第一篇,给大家带来的是javascript的最基础的东西--javascript的语法的注意事项,希望大家能够喜欢 1.区分大小写 javascript中,变量.函数.运算符都区分大小写. 2.弱类型变量 定义变量只用 "var"关键字 var age = 25; var myscholl = "sanxiao"; var mal = true; 3.每行结尾的分号可有可无. 4.括号用于代码块. 代码示例 复制代码 代码如下:

  • Javascript基础教程之while语句 2014-01-29

    这篇文章主要介绍了Javascript基础教程之while语句的相关资料,需要的朋友可以参考下 循环语句的作用是反复的执行同一段代码,尽管分几种不同的类型,但其原理几乎相同:只要给定的条件满足,包含在循环体内的语句会不断执行,一旦条件不再满足则终止. while循环是前测试循环,这意味着是否终止的条件判断是在执行代码之前,因此,循环的主体可能根本不执行.其语法如下: while(expression) statement 当expression为ture时,程序会不断执行statement语句,

  • Javascript基础教程之for循环 2014-02-22

    这篇文章主要介绍了Javascript基础教程之for循环的相关资料以及示例分享,需要的朋友可以参考下 如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的. document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); document.wr

  • Javascript基础教程之关键字和保留字汇总 2014-02-27

    这篇文章主要介绍了Javascript基础教程之关键字和保留字汇总,需要的朋友可以参考下 关键字不可以作为变量名或者函数名 break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 保留字是为以后关键字而准备的 也不可以用来变量或者函数名. 复制代码 代码如下:

  • Javascript基础教程之函数对象和属性 2014-04-17

    这篇文章主要介绍了Javascript基础教程之函数对象和属性,需要的朋友可以参考下 包含在对象里的数据可以通过两种方式来访问 既属性的对象(property)和方法(method) 属性是隶属于某个特定对象的变量,方法则是某个特定对象才能调运的函数. 对象是由一些彼此相关的属性和方法集合在一起的一个数据实体.javacript中,属性和方法对使用"点"的语法来访问. Object.proprty Object.method() 假设一个汽车Car有品牌band,颜色color属性,可

  • javascript基础知识大全 便于大家学习,也便于我自己查看 2014-04-20

    发些javascript基础知识,便于大家学习,也便于我自己查看 1.javascript的数组API //定义数组 var pageIds = new Array(); pageIds.push('A'); 数组长度 pageIds.length; //shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 //unshift:将参数添加到原数组开

  • JavaScript模拟实现继承的方法 2014-05-15

    这篇文章主要介绍了JavaScript模拟实现继承的方法,实例分析了javascript类的操作与模拟实现继承的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JavaScript模拟实现继承的方法.分享给大家供大家参考.具体分析如下: 我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承.我们也只能通过在原对象里添加或改写属性来模拟实现. 先定义一个父类, //父类 function ParentClass(

  • Javascript基础教程之switch语句 2014-07-06

    这篇文章主要介绍了Javascript基础教程之switch语句的相关资料,需要的朋友可以参考下 stwith语句的格式一般如下: switch (expression){ case value :statement1 break; case value2 :statement2 break; .... case value: statement break; default :statement; 每个情况表示如果expression的值等于case ,则执行statament. 关键词 br

  • JavaScript基础函数整理汇总 2014-07-18

    这篇文章主要介绍了JavaScript基础函数整理汇总,需要的朋友可以参考下 这里给大家整理汇总了一些javascript的基础函数,都是比较常用和实用的.整理出来也有助于大家更好的理解javascript. <script type="text/javascript"> /*创建函数和字面量函数*/ /* function add(){ alert("函数创建成功") }; var testfunction=function(){ alert(&quo