一. JavaScript的实现
- ECMAScript：描述了该语言的语法和基本对象
- DOM：描述了处理网页内容的方法和接口
- BOM：描述了与浏览器进行交互的方法和接口
二. ECMAScript语法
语法基础与Java类似，只挑一些特别的点来写。
1. var
定义变量只用var运算符，可以初始化为任意值，因此，可以随时改变变量所存储的数据类型。
2. 函数
基本语法：
function func(arg0, arg1, ... argN) {
statements
}
3. arguments对象
使用特殊对象arguments，开发者无需明确指出参数名，就能访问它们。
function sayHi() {
if (arguments[0] == "bye") {
return;
}
alert(arguments[0]);
}
也可以检测参数的个数：
function howManyArgs() {
alert(arguments.length);
}
howManyArgs("string", 45); //2
howManyArgs(); //0
howManyArgs("string"); //1
还可以模拟函数重载：
function doAdd() {
if (arguments.length == 1) {
alert(arguments[0] + 5);
} else if (arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
4. 函数闭包
在ECMAScript中，函数也是功能完整的对象，就是说，我们可以把函数当作参数来传入函数中，也可以返回一个函数。
function callAnotherFunc(fnFunction, vArgument) {
fnFunction(vArgument);
}
var doAdd = new Function("iNum", "alert(iNum + 10)");
callAnotherFunc(doAdd, 10); //20
alert(callAnotherFunc.length); //输出 "2"
闭包，即函数可以使用函数之外定义的常量。
var sMessage = "hello world";
function sayHelloWorld() {
alert(sMessage);
}
sayHelloWorld();
如果在一个函数中定义另一个会使得闭包更加复杂：
var iBaseNum = 10;
function addNum(iNum1, iNum2) {
function doAdd() {
return iNum1 + iNum2 + iBaseNum;
}
return doAdd();
}
doAdd()函数根本不接受参数，它使用的值是从执行环境中获取的。
5. 作用域
ECMAScript只存在公用作用域，其所有对象的所有属性和方法都是公用的。因此，定义自己的类和对象时，必须格外小心。开发者确定了一个规约，说明哪些属性和方法应该被看做私有的，会在前面加下划线（注意，下划线并不改变属性是公用属性的事实）：
obj._color_ = "blue";
静态作用域定义的属性和方法任何时候都能从同一位置访问，在Java中，类可具有属性和方法，无需实例化该类的对象，即可访问这些属性和方法。
ECMAScript没有静态作用域，但是他可以给构造函数提供属性和方法。
function sayHello() {
alert("Hello");
}
sayHello.alternate = function() {
alert("hi");
}
sayHello(); //"hello"
sayHello.alternate(); //"hi"
在ECMAScript中，关键字this总是指向调用该方法的对象，如：
var oCar = new Object();
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
//和alert(oCar.color)等价
}
oCar.showColor(); //"red"
5. 创建对象的方法
- 工厂方式
function showColor() {
alert(this.color);
}
function createCar(sColor, iDoors, iMpg) {
var temp = new Object();
temp.color = sColor;
temp.doors = iDoors;
temp.mpg = iMpg;
temp.showColor = showColor;
return temp;
}
var oCar = createCar("red", 4, 23);
oCar.showColor();
在createCar()内部，赋予对象一个指向已经存在的showColor()函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但从语义上讲，该函数不太像是对象的方法。
- 构造函数方式
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);
oCar.showColor();
但是以上方法的构造函数会重复生成函数，为每个对象都创建独立的函数版本。当然也可以写成工厂方式的方法构造，但是这样做也是没有语义的。
- 原型方式
该方式利用了对象的prototype属性，可以把它看成创建新对象所依赖的原型。
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();
调用new Car()时，原型的所有属性都被立即赋予要创建的对象，意味着所有Car实例存放的都是指向showColor()函数的指针。从语义上讲，所有属性看起来都属于一个对象，因此解决了前面两种方式存在的问题。
但是，如果使用数组，会产生对象共享的问题，比如car1改变了Car()里面的数组之后，car2也会受到影响。
- 混合的构造函数/原型方式
用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性。结果：所有函数只出现一次，每个对象都具有自己的对象属性实例。
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"
- 动态原型方法
和上一种方法的唯一区别是赋予对象方法的位置。
function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "John");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
6. 修改对象
重命名已有方法：
Array.prototype.enqueue = function(vItem) {
this.push(vItem);
}
Array.prototype.dequeue = function() {
return this.shift();
}
添加新方法：
Array.prototype.indexOf = function(vItem) {
for (var i=0; i<this.length; i++) {
if (vItem == this[i]) {
return i;
}
}
return -1;
}
重定义已有方法：
Function.prototype.toString = function() {
return "It is hidden.";
}
存储原方法的指针，以便以后的使用：
Function.prototype.originalToString = Function.prototype.toString;
Function.prototype.toString = function() {
if (this.originalToString().length > 100) {
return "Too long to display.";
} else {
return this.originalToString();
}
};
7. 继承
- 对象冒充
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function() {
alert(this.color);
};
}
function ClassB(sColor, sName) {
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name = sName;
this.sayName = function() {
alert(this.name);
};
}
在上面的代码中，为ClassA赋予了方法newMethod（函数名只是指向它的指针）。然后调用该方法，传递给它的是ClassB构造函数的参数sColor，最后要删除对ClassA的引用，这样以后就不能再调用它。
- 对象冒充实现多重继承
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
小弊端：如果ClassX和ClassY具有同名的属性或方法，则ClassY具有高优先级。
- call()方法
与经典的对象冒充最相似的方法。它的第一个参数用作this的对象，其他参数都直接传递给函数自身。如：
function sayColor(sPrefix, sSuffix) {
alert(sPrefix + this.color + sSuffix);
}
var obj = new Object();
obj.color = "blue";
sayColor.call(obj, "The color is ", " nice color!");
套用到对象冒充方法，则这样写：
function ClassB(sColor, sName) {
// this.newMethod = ClassA;
// this.newMethod(sColor);
// delete this.newMethod;
ClassA.call(this, sColor);
this.name = sName;
this.sayName = function() {
alert(this.name);
};
}
- apply()方法
apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组。同理可以套用到对象冒充的方法中：
function ClassB(sColor, sName) {
// this.newMethod = ClassA;
// this.newMethod(sColor);
// delete this.newMethod;
ClassA.apply(this, new Array(sColor));
this.name = sName;
this.sayName = function() {
alert(this.name);
};
}
- 原型链
function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function() {
alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "";
ClassB.prototype.sayName = function() {
alert(this.name);
};
var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();
把ClassB的prototype属性设置为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);
};
网友评论