1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECMAScript</title>
</head>
<body>
<!-- ECMAScript语法 -->
1.变量是弱类型的
2.每行结尾的分号可有可无
3.注释与 Java、C 和 PHP 语言的注释相同
4.括号表示代码块
<!-- ECMAScript 变量 -->
1.声明变量
2.命名变量
* 第一个字符必须是字母、下划线（_）或美元符号（$）
* 余下的字符可以是下划线、美元符号或任何字母或数字字符
3.著名的变量命名规则
* Camel 标记法：首字母是小写的，接下来的字母都以大写字符开头。
* Pascal 标记法：首字母是大写的，接下来的字母都以大写字符开头。
* 匈牙利类型标记法：在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。
4.变量声明不是必须的
<!-- 关键字 -->
1.ECMAScript 关键字：关键字是保留的，不能用作变量名或函数名。
<!-- 保留字 -->
1.ECMAScript 保留字：保留字在某种意思上是为将来的关键字而保留的单词。因此保留字不能被用作变量名或函数名。
<!-- ECMAScript 原始值和引用值 -->
1.变量可以存在两种类型的值，即原始值和引用值。
* 原始值：存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
* 引用值：存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。
2.原始类型
* ECMAScript有5种原始类型（primitive type），即Undefined、Null、Boolean、Number和String。
<!-- ECMAScript 原始类型 -->
1.typeof运算符，返回值：
* undefined - 如果变量是Undefined类型的
* boolean - 如果变量是Boolean类型的
* number - 如果变量是Number类型的
* string - 如果变量是String类型的
* object - 如果变量是一种引用类型或Null类型的
<!-- ECMAScript 引用类型 -->
1.引用类型
* 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
2.Object 对象
* Object 对象具有下列属性：
- constructor，对创建对象的函数的引用（指针）。对于Object对象，该指针指向原始的Object()函数。
- Prototype，对该对象的对象原型的引用。对于所有的对象，它默认返回Object对象的一个实例。
* Object 对象还具有几个方法：
- hasOwnProperty(property)，判断对象是否有某个特定的属性。必须用字符串指定该属性。
- IsPrototypeOf(object)，判断该对象是否为另一个对象的原型。
- PropertyIsEnumerable，判断给定的属性是否可以用for...in语句进行枚举。
- ToString()，返回对象的原始字符串表示。
- ValueOf()，返回最适合该对象的原始值。对于许多对象，该方法返回的值都与ToString()的返回值相同。
3.Boolean 对象
* Boolean对象是Boolean原始类型的引用类型。
4.Number 对象
* Number对象是Number原始类型的引用类型。
- toFixed() 方法，返回的是具有指定位数小数的数字的字符串表示。例如：alert(oNumberObject.toFixed(2)); //输出 "68.00"
- toExponential() 方法，返回的是用科学计数法表示的数字的字符串形式。例如：alert(oNumberObject.toExponential(1)); //输出 "6.8e+1"
- toPrecision() 方法，根据最有意义的形式来返回数字的预定形式或指数形式。它有一个参数，即用于表示数的数字总数（不包括指数）。例如：alert(oNumberObject.toPrecision(1)); //输出 "7e+1"
5.String 对象
* String对象是String原始类型的对象表示法
- valueOf()方法，返回String类型的原始值。
- toString()方法，返回String类型的原始值。例如：alert(oStringObject.valueOf() == oStringObject.toString()); //输出 "true"
- charAt()方法，返回字符串中的单个字符。例如：alert(oStringObject.charAt(1)); //输出 "e"
- charCodeAt()方法，返回字符串中的字符代码。例如：alert(oStringObject.charCodeAt(1)); //输出 "101"
- concat() 方法，用于把一个或多个字符串连接到String对象的原始值上。该方法返回的是String原始值。例如：var sResult = oStringObject.concat("world"); alert(sResult); //输出 "hello world"
- indexOf()方法，从字符串的开头（位置0）开始检索字符串。例如：alert(oStringObject.indexOf("o")); 输出 "4"
- lastIndexOf()方法，从字符串的结尾开始检索子串。例如：alert(oStringObject.lastIndexOf("o")); 输出 "7"
- localeCompare()方法，对字符串进行排序。该方法有一个参数 - 要进行比较的字符串，返回的是下列三个值之一：
1). 如果String对象按照字母顺序排在参数中的字符串之前，返回负数。例如：alert(oStringObject.localeCompare("zoo")); //输出 "-1"
2). 如果String对象等于参数中的字符串，返回0。例如：alert(oStringObject.localeCompare("yellow")); //输出 "0"
3). 如果String对象按照字母顺序排在参数中的字符串之后，返回正数。例如：alert(oStringObject.localeCompare("brick")); //输出 "1"
- slice()、substring()方法，返回要处理的字符串的子串，接受一个或两个参数。
- toLowerCase()、toLocaleLowerCase()、toUpperCase() 和 toLocaleUpperCase()方法，涉及大小写转换。
例如：
var oStringObject = new String("Hello World");
alert(oStringObject.toLocaleUpperCase()); //输出 "HELLO WORLD"
alert(oStringObject.toUpperCase()); //输出 "HELLO WORLD"
alert(oStringObject.toLocaleLowerCase()); //输出 "hello world"
alert(oStringObject.toLowerCase()); //输出 "hello world"
* String对象属性：
- length 属性，返回字符串中的字符个数。例如：alert(oStringObject.length); //输出 "11"
* instanceof 运算符，instanceof方法要求开发者明确地确认对象为某特定类型。例如：alert(oStringObject instanceof String); //输出 "true"
<!-- ECMAScript 位运算符 -->
* ECMAScript整数有两种类型，即有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。
* 位运算 NOT：位运算NOT由否定号（~）表示，它是ECMAScript中为数不多的与二进制算术有关的运算符之一。
* 位运算 AND：位运算AND由和号（&）表示，直接对数字的二进制形式进行运算。它把每个数字中的数位对齐，然后用下面的规则对同一位置上的两个数位进行AND运算。
* 位运算 OR：位运算OR由符号（|）表示，也是直接对数字的二进制形式进行运算。
* 位运算 XOR：位运算XOR由符号（^）表示，当然，也是直接对二进制形式进行运算。
* 左移运算：左移运算由两个小于号表示（<<）。它把数字中的所有数位向左移动指定的数量。
* 有符号右移运算：有符号右移运算符由两个大于号表示（>>）。它把32位数字中的所有数位整体右移，同时保留该数的符号（正号或负号）。
* 无符号右移运算：无符号右移运算符由三个大于号（>>>）表示，它将无符号32位数的所有数位整体右移。对于正数，无符号右移运算的结果与有符号右移运算一样。
<!-- ECMAScript Boolean 运算符 -->
* 逻辑 NOT 运算符：由感叹号（!）表示。与逻辑OR和逻辑AND运算符不同的是，逻辑NOT运算符返回的一定是Boolean值。
* 逻辑 AND 运算符：在ECMAScript中，逻辑AND运算符用双和号（&&）表示。
* 逻辑 OR 运算符：ECMAScript中的逻辑OR运算符与Java中的相同，都由双竖线（||）表示。
<!-- ECMAScript 乘性运算符 -->
* 乘法运算符，乘法运算符由星号（*）表示，用于两数相乘。
* 除法运算符，除法运算符由斜杠（/）表示，用第二个运算数除第一个运算数。
* 取模运算符，除法（余数）运算符由百分号（%）表示。
<!-- ECMAScript 加性运算符 -->
* 加法运算符，加法运算符由加号（+）表示。
* 减法运算符，减法运算符（-），也是一个常用的运算符。
<!-- ECMAScript 关系运算符 -->
* 关系运算符小于、大于、小于等于和大于等于执行的是两个数的比较运算，比较方式与算术比较运算相同。
<!-- ECMAScript 等性运算符 -->
* ECMAScript 提供了两套等性运算符：等号和非等号用于处理原始值，全等号和非全等号用于处理对象。
1.等号和非等号
* 等号由双等号（==）表示，当且仅当两个运算数相等时，它返回 true。非等号由感叹号加等号（!=）表示，当且仅当两个运算数不相等时，它返回 true。
2.全等号和非全等号
* 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。
- 全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回 true。
- 非全等号由感叹号加两个等号（!==）表示，只有在无需类型转换运算数不相等的情况下，才返回 true。
<!-- ECMAScript 条件运算符 -->
* 条件运算符，例如：variable = boolean_expression ? true_value : false_value。
<!-- ECMAScript 赋值运算符 -->
* 赋值运算符：简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量。
<!-- ECMAScript 逗号运算符 -->
* 逗号运算符：用逗号运算符可以在一条语句中执行多个运算。
<!-- ECMAScript if 语句 -->
* if 语句是 ECMAScript 中最常用的语句之一。
<!-- ECMAScript 迭代语句 -->
* 迭代语句又叫循环语句，声明一组要反复执行的命令，直到满足某些条件为止。循环通常用于迭代数组的值（因此而得名），或者执行重复的算术任务。
1.do-while 语句：do-while 语句是后测试循环，即退出条件在执行循环内部的代码之后计算。
2.while 语句：while 语句是前测试循环。这意味着退出条件是在执行循环内部的代码之前计算的。
3.for 语句：for 语句是前测试循环，而且在进入循环之前，能够初始化变量，并定义循环后要执行的代码。
4.for-in 语句：for-in 语句是严格的迭代语句，用于枚举对象的属性。
<!-- ECMAScript 标签语句 -->
* 有标签的语句
<!-- ECMAScript break 和 continue 语句 -->
* break 和 continue 语句对循环中的代码执行提供了更严格的控制。
* break 和 continue 语句的不同之处
- break 语句可以立即退出循环，阻止再次反复执行任何代码。
- continue 语句只是退出当前循环，根据控制表达式还允许继续进行下一次循环。
* 与有标签的语句一起使用
- break 语句和 continue 语句都可以与有标签的语句联合使用，返回代码中的特定位置。
- 例如：
var iNum = 0;
outermost:
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
iNum++;
}
}
alert(iNum); //输出 "55"
<!-- ECMAScript with 语句 -->
* 有标签的语句：with 语句用于设置代码在特定对象中的作用域。
<!-- ECMAScript switch 语句 -->
* switch 语句：switch 语句是 if 语句的兄弟语句。
* 语法：
switch (expression)
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
case value: statement;
break;
...
case value: statement;
break;
default: statement;
* 每个情况（case）都是表示“如果 expression 等于 value，就执行 statement”。
<!-- ECMAScript 函数概述 -->
* 什么是函数？函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。
* 如何调用函数？函数可以通过其名字加上括号中的参数进行调用，如果有多个参数。
* 函数如何返回值？即使函数确实有值，也不必明确地声明它。该函数只需要使用 return 运算符后跟要返回的值即可。
<!-- ECMAScript arguments 对象 -->
* 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
* 检测参数个数，还可以用 arguments 对象检测函数的参数个数，引用属性 arguments.length 即可。
* 模拟函数重载，用 arguments 对象判断传递给函数的参数个数，即可模拟函数重载。
<!-- ECMAScript Function 对象（类） -->
* ECMAScript 的函数实际上是功能完整的对象。
* Function 对象（类）
- Function 对象的 length 属性
- Function 对象的方法，与所有对象共享的 valueOf() 方法和 toString() 方法。
<!-- ECMAScript 闭包（closure） -->
* 在ECMAScript中 最容易让人误解的一点是——它支持闭包（closure）。闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。
<!-- ECMAScript 面向对象技术 -->
* 一种面向对象语言需要向开发者提供四种基本能力：
封装 - 把相关的信息（无论数据或方法）存储在对象中的能力
聚集 - 把一个对象存储在另一个对象内的能力
继承 - 由另一个类（或多个类）得来类的属性和方法的能力
多态 - 编写能以多种方法运行的函数或方法的能力
<!-- ECMAScript 对象应用 -->
* 对象的创建和销毁都在 JavaScript 执行过程中发生，理解这种范式的含义对理解整个语言至关重要。
1.声明和实例化
2.对象引用
3.对象废除
4.早绑定和晚绑定
- 早绑定（early binding）是指在实例化对象之前定义它的属性和方法，这样编译器或解释程序就能够提前转换机器代码。在 Java 和 Visual Basic 这样的语言中，有了早绑定，就可以在开发环境中使用 IntelliSense（即给开发者提供对象中属性和方法列表的功能）。ECMAScript 不是强类型语言，所以不支持早绑定。
- 晚绑定（late binding）指的是编译器或解释程序在运行前，不知道对象的类型。使用晚绑定，无需检查对象的类型，只需检查对象是否支持属性和方法即可。ECMAScript 中的所有变量都采用晚绑定方法。这样就允许执行大量的对象操作，而无任何惩罚。
<!-- ECMAScript 对象类型 -->
* 在 ECMAScript 中，所有对象并非同等创建的。一般来说，可以创建并使用的对象有三种：本地对象、内置对象和宿主对象。
<!-- ECMAScript 对象作用域 -->
* 作用域指的是变量的适用范围。
1.公用、私有和受保护作用域：ECMAScript 只有公用作用域。
2.静态作用域：ECMAScript 没有静态作用域
3.关键字 this：关键字 this 总是指向调用该方法的对象。
<!-- ECMAScript 定义类或对象 -->
* 使用预定义对象只是面向对象语言的能力的一部分，它真正强大之处在于能够创建自己专用的类和对象。
1.工厂方式：
function createCar() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();
2.构造函数方式：
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(this.color);
};
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
3.原型方式：
function Car() {
}
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
alert(this.color);
};
var oCar1 = new Car();
var oCar2 = new Car();
4.混合的构造函数/原型方式：
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
}
Car.prototype.showColor = function() {
alert(this.color);
};
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
oCar1.drivers.push("Bill");
alert(oCar1.drivers); //输出 "Mike,John,Bill"
alert(oCar2.drivers); //输出 "Mike,John"
5.动态原型方法：
class Car {
public String color = "blue";
public int doors = 4;
public int mpg = 25;
public Car(String color, int doors, int mpg) {
this.color = color;
this.doors = doors;
this.mpg = mpg;
}
public void showColor() {
System.out.println(color);
}
}
6.混合工厂方式：
function Car() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
<!-- ECMAScript 修改对象 -->
* prototype 属性不仅可以定义构造函数的属性和方法，还可以为本地对象添加属性和方法。
1.通过已有的方法创建新方法
2.重命名已有方法
3.添加与已有方法无关的方法
4.为本地对象添加新方法
5.重定义已有方法
6.极晚绑定（Very Late Binding）
<!-- ECMAScript 继承机制实例 -->
* 继承机制的实现：要用 ECMAScript 实现继承机制，您可以从要继承的基类入手。所有开发者定义的类都可作为基类。
* 继承的方式，所有的继承细节并非完全由解释程序处理。作为开发者，你有权决定最适用的继承方式：
- 对象冒充，构造函数使用 this 关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。例如：
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
function ClassB(sColor) {
}
- 对象冒充可以实现多重继承，也就是说，一个类可以继承多个超类。例如：
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
* call() 方法：call() 方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作 this 的对象。其他参数都直接传递给函数自身。
- 例如：
function sayColor(sPrefix,sSuffix) {
alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.call(obj, "The color is ", "a very nice color indeed.");
* apply() 方法：apply() 方法有两个参数，用作 this 的对象和要传递给函数的参数的数组。
- 例如：
function sayColor(sPrefix,sSuffix) {
alert(sPrefix + this.color + sSuffix);
};
var obj = new Object();
obj.color = "blue";
sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));
* 原型链（prototype chaining）：继承这种形式在 ECMAScript 中原本是用于原型链的。
- 例如：
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
* 混合方式：这种继承方式使用构造函数定义类，并非使用任何原型。
- 例如：
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
};
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.name);
};
</body>
</html>
|
