JavaScript经验整理
接触Web开发也已经有一段时间了，对javascript的认识也比以前有了更加深入的认识了，所以觉得应该整理一下。
一、JavaScript不支持函数(方法)的重载，用一个例子证明如下：
function add(number)
{
alert('hello');
}
function add(number1, number2)
{
alert('world');
}
此时调用add(1)，会弹出'world'，而不是'hello'，由此现象说明写在文档后面的方法会覆盖掉前面的方法，所以有一个我认为暂时是正确的原则，就是如果方法名相同，则以后面对方法为主。
二、JavaScript中函数(方法)就是一个对象，这里就不解释了，看一个例子比较直观
function add(number)
{
alert('hello');
}
是等价于下面这种写法的
var add = new Function("number","alert('hello')");
以此类推
function add(number1, number2)
{
alert('world');
}
等价于
var add = new Function("number1","number2","alert('world')");
这里一和二都是一样的，只是写法不同，底层是一样的，所以可以把JavaScript的不支持重载的现象按照面向对象的概念来理解：首先add对象指向第一个Function对象，而后引用的对象改变了，指向了第二个新的Function对象了。示意图如下
所以可以得出一个这样的结论：JavaScript中的每个函数function都是new出来的Function对象。
三、如果在调用某个JavaScript函数的时候，没有给函数中的参数传值，则参数为undefined，例子如下：
function add(number)
{
alert(number);
alert(number + 30);
}
当在触发处调用add()的时候，显然没有传入参数值，此时先弹出undefined(未定义)，
然后弹出NaN(不是一个数Not A Number)
四、arguments是每个函数的内置对象，应用这个内置对象可以模拟面向对象的重载功能，例如
function sum()
{
if(1 == arguments.length)
{
alert(arguments[0]);
}
else if(2 == arguments.length)
{
alert(arguments[0] + arguments[1]);
}
else if(3 == arguments.length)
{
alert(arguments[0] + arguments[1] + arguments[2]);
}
}
调用如下：
sum(1); => 1
sum(1, 2); => 3
sum(1, 2, 3); => 6
五、由上面的例子又可以得到，JavaScript的函数就是Function的对象，函数都有一个length属性，表示函数接收参数的个数。证明如下：
function add() {.....}
function minus(num) {....}
function multiply(num1, num2) {.....}
调用如下：
alert(add.length) => 0
alert(minus.length) => 1
alert(multiply.length) => 2
六、JavaScript中有五种原始值，可以理解为原生数据类型(这里仅仅是值JavaScript的，不同于3GL语言)，它们分别是：Undifined，Null，Boolean，Number，String
(1)Undefined数据类型的值只有一个：undefined，这里要注意一点就是，对于JavaScript中的变量，如果只声明，而没有赋值，则该变量的值为undefined。
例如：var s; alert(s); 此时弹出的是undefined
(2)Null数据类型的值只有一个：null
(3)Boolean数据类型的值有两个：true和false
(4)任何整数或者浮点数都是Number数据类型中的值，另外typeof(..)函数会返回参数的类型名称，例如：
var s; alert(typeof(s)); 弹出undefined
var a = 1; alert(typeof(a)); 弹出number
var b = 'hello'; alert(typeof(b)); 弹出string 双引号表示原始类型在栈里
而var c = new String("hello"); alert(typeof(c)); 弹出object，是在堆中的对象了
(5)一个函数如果不返回值，则返回'undefined'，typeof(..)返回的值是字符串类型的，证明如下：
function aa() {..//里面没有return出值..} alert(aa()); 会弹出undefined
function bb() {....; return; } alert(bb);会弹出bb函数体{}中的所有源代码内容
(6)使用没有声明，并且没有赋值的变量会报错，例如，
var s; alert(s2); 因为s2没有声明也没有赋值，所以会报错
alert(typeof(s)); 弹出undefined
alert(typeof(s2)); 尽管s2没有声明也没有赋值，但会弹出undefined
由此可以归纳出，typeof(..)的返回值有五个：undefined，boolean，number，string，object;
(7)null与undefined的关系：undefined实际上是从null派生而来的，证明如下，
alert(undefined == null); 会弹出true
(8)在函数体内加不加var的区别：如果在函数体的内部，变量不加var，则默认该变量为全局变量，证明如下：
function test()
{
var s = 'hello';
}
test();
alert(typeof(s));此时会返回undefined
然而
function test()
{
s = 'hello';
}
test();
alert(typeof(s));会弹出string
alert(s);会弹出hello
由此可知，对于函数定义中的变量来说，加var表示局部变量，不加var表示全局变量。
(9)强制类型转换有三种：Boolean(value)，Number(value)，String(value) [这里可以看作函数]
例如，
var s = Boolean(null); alert(s); 会弹出false
var s = Boolean(""); alert(s);会弹出false
var s = Boolean("a"); alert(s);会弹出true
new Boolean()，new String("...")，new Number("...")都是object类型的
(10)在JavaScript中，Object是所有类的父类，类似于高级语言java
var s = new Object();
alert(s); 弹出[object Object]
alert(typeof(s)); 弹出object
alert(s.propertyIsEnumerable("prototype"));弹出false，这里是判断s中的属性是否可以枚举出来
遍历window对象中的所有属性
for(var temp in window)
{
alert(temp);
}
delete操作和JavaScript中的晚绑定：
var o = new Object();
o.name = "scott";
alert(o.name); //会弹出scott
delete(o.name); //删除晚绑定的name属性
alert(o.name); //会弹出undefined
七、JavaScript的面向对象的特性：
(1)JavaScript是基于ECMAScript的，构造对象时可以直接用名字，例如
var object = new Object; <=> var object = new Object();
var s = new String; <=> var s = new String();
var date = new Date; <=> var date = new Date();
尽管如此，还是建议加上括号，增加可读性！！！！
(2)JavaScript中的数组，长度可以动态的增加，类似于java中的ArrayList，例如
var array = new Array(); <=> var array = [ ];
array.push(1);
array.push(2);
array.push(3);
alert(array.length); //弹出3
这里也可以用var array = [1,2,3]; alert(array.length); //弹出3
(3)数组对象有一个方法sort()，可以对数组进行升序排序，例如
var array = [3,2,1];
array.sort();
alert(array); //弹出[1,2,3]
咋一看，很爽，但是
var array = [1,3,21];
array.sort();
alert(array); //弹出[1,21,3]
原因就在于：sort()方法对数组进行排序的时候，首先将数组中的每一个元素都转化为字符串，即调用每个元素的toString()方法，然后用字符串的ASCII码进行比较！ 所以'21' < '3'很正常!
另外，sort()可以接受一个排序的函数作为参数，根据参数排序，类似于java中的compare()方法
例如，
function compare(num1, num2)
{
var temp1 = parseInt(num1);
var temp2 = parseInt(num2);
return temp1 - temp2;
}
var array = [3,1,21];
array.sort(compare);
alert(array); //弹出[1,3,21]
这里还可以用匿名函数的方法，类似于java中的匿名类
array.sort(function(num1, num2) {
var temp1 = parseInt(num1);
var temp2 = parseInt(num2);
return temp1 - temp2;
});
(4)对象的属性方式：[1]早绑定 [2]玩绑定
所谓早绑定，就是在对象生成之前绑定好的属性，例如，
var object = new Object();
object.name = "scott";
alert(object.name);
所谓晚绑定，就是对生成好的对象增加或减少它的属性，例如，
object.hello = function() { alert('welcome'); }
object.hello(); //此时会调用object的hello方法，弹出welcome
delete object.hello(); //删除方法
object.sayName = function() { alert(this.name); } //这里this指的是object对象，类似于java一样
object.sayName(); //此时会弹出scott
object.sayName = function(name) { //绑定一个传参数的方法
this.name = name;
alert(this.name);
}
object.sayHello('tiger'); //此时弹出tiger
=================================================================
一、用工厂方式定义对象(类),这里是参照java的设计模式的工厂模式写的，例子如下
function createObject()
{
var object = new Object(); //这里请加上var，因为是方法体内部的局部变量
object.username = "scott";
object.password = "tiger";
object.get = function()
{
alert("username: " + this.username + "\npassword: " + password);
}
return object;
}
调用如下，
var o = createObject();
o.get(); //此时会弹出username: scott
// password: tiger
该方法的好处是凡是学要对象了，不需要自己new一个出来，直接可以通过createObject生成对象，具体的细节都被封装起来了～
上面的工厂方式固然有优点，但是生成的对象属性都被默认写死成scott和tiger了，所以可以改良成如下带参数的工厂方法，例子如下，
function createObject(username, password)
{
var object = new Object();
object.username = username;
object.password = password;
object.get = function()
{
alert("username: " + this.username + "\npassword: " + password);
}
return object;
}
调用如下，
var o = createObject("scott","tiger");
o.get();
该方法的好处比起一楼的方式，就是更灵活的控制了要生成的对象。
然而对于以上两种工厂方式，方法get()定义在createObject()函数的内部，从性能上考虑，没创建一个对象，就要生成一个get的function对象，但是在高级语言java中所有的对象都共同的用同一个方法，需要注意到是在JavaScript中get方法不是如此，工厂每次生成对象的时候，都会为get再生成一次相同的对象，比较消耗内存，因此，可以将get方法的定义放在createObject之外。例如，
function get()
{
alert("username: " + this.username + "\npassword: " + this.password);
}
function createObject()
{
var object = new Object();
object.username = "scott";
object.password = "tiger";
object.get = get;
return object;
}
调用方法一样的，有点就是优化了性能，功能还是一样～
二、构造函数的方式
function Person()
{
this.username = "scott";
this.password = "tiger";
this.get = function()
{
alert("username: " + this.username + "\npassword: " + this.password);
}
}
用这种方法定义比较直观，与Java中生成对象很类似了，调用如下，
var person = new Person();
person.get();
注解：当调用new Person()的时候，执行流程跳到了函数中去了，在执行第一行代码之前，会生成一个对象，而this则会指向该对象，虽然没有return该对象，但是此构造函数隐式地将对象return出去了；
另外，传递参数也是类似的，内部函数的定义也可以改良从而降低对内存的消耗，将它拿到构造函数外面单独定义，所以可以改写成如下，
function get()
{
alert("username: " + this.username + "\npassword: " + this.password);
}
function Person(username, password)
{
this.username = username;
this.password = password;
this.get = get;
}
以上这种方式还是不够直观，有另一种解决方案如下，
原型方式创建类：prototype
function Person(){ }
Person.prototype.username = "scott";
Person.prototype.password = "tiger";
Person.prototype.get = function()
{ alert("username: " + this.username + "\npassword: " + this.password); }
调用方法：
var p = new Person();
p.get();
但是这里使用prototype方法生成对象，不能创建的时候初始化值，必须等对象创建出来以后，对属性修改。
var person1 = new Person();
var person2 = new Person();
person1.username = 'hello';
person1.get(); //hello tiger
person2.get(); //scott tiger
JavaScript中的字符串也是不可变的，与java机制中一样，属于final类型的，字符串的拼接一会生成新对象
如果Person.prototype.username = new Array(); //如下面一楼贴出的图片person1和person2会共享scott
person1.username.push("scott");
person1.get(); //scott
person2.get(); //scott
混合的构造函数与原型方式，属性采用构造函数的方式定义，方法采用原型方式定义（这里比较推荐这种方式）
可以避免上面的共享属性的弊端，例如，
function Person(username,password)
{
this.username = username; //这里如果this.username = new Array(); 则新对象不会共享username
this.password = password;
}
Person.prototype.get = function()
{
alert("username: " + this.username + "\npassword: " + this.password);
}
调用方法：
var p = new Person("scott","tiger");
p.get();
另外还有一种方式：动态的原型方式
function Person()
{
this.username = "scott";
this.password = "tiger";
if(typeof Person.flag == "undefined") //或者Person.flag == undefined
{
Person.prototype.get = function()
{
alert("username: " + this.username + "\npassword: " + this.password);
}
Person.flag = true;
}
}
下面来看看用JavaScript模拟java的继承特性
（1）继承的第一种方式：对象冒充
function Parent(username)
{
this.username = username;
this.hello = function()
{ alert("username: " + this.username); }
}
function Child(username,password)
{
this.method = Parent;
this.method(username);
delete this.method;
this.password = password;
this.world = function()
{ alert("password: " + this.password); }
}
根据上图，和带下划线的代码段，method属性作为桥梁引用Parent对象，调用Parent的构造函数后，删除了该属性！！
注意如果吧带下划线的代码段替换为Parent(username);是不行的，因为这样的话Parent中的hello()方法不能继承下来～
调用上面的继承
var parent = new Parent('father');
var child = new Child('son','scott');
parent.hello(); //father
child.hello(); //son
child.world(); //scott
由此可见继承机制确实实现了！！！！
(2)继承的第二种方式：call()方法
这里先介绍call()方法：每个function，即Function对象都有call()这个方法，call(param1,param2,...)，
param1表示调用call()方法的函数内部的this,param2，...对应调用call()方法的函数中的参数列表，例如，
function test(str)
{
alert(this.name + " " + str);
}
var obj = new Object();
obj.name = 'scott';
test.call(obj,'tiger'); //这里将obj对象赋给test中的this，弹出scott tiger
了解了call()的功能以后，我们来用call()实现继承机制，例子如下：
function Parent(username)
{
this.username = username;
this.hello = function()
{
alert(this.username);
}
}
function Child(username, password)
{
Parent.call(this,username);
this.password = password;
this.world = function()
{ alert(this.password); }
}
调用方法类似，这里就省略了。。。
(3)继承的第三种方式：apply()方式
这里对比一下apply()和call()
call(parm1,parm2,...,parmN) 多个参数
apply(parm1,new Array()) <=> apply(parm1,[parm2,...,parmN]) 两个参数
归纳一下，apply方法的第一个参数和call一样，第二个参数是call后面参数组成的一个数组
下面用apply()来实现继承的机制，如下：
function Parent(username)
{
this.username = username;
this.hello = function()
{ alert(this.username); }
}
function Child(username,password)
{
Parent.apply(this,new Array(username)); //等价于Parent.apply(this,[username]);
this.password = password;
this.world = function()
{ alert(this.password); }
}
(4)继承的第四种方式：原型链方式
function Parent() { }
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function()
{ alert(this.hello); }
function Child() { }
Child.prototype = new Parent();
Child.prototype = "world";
child.prototype.sayWorld = function()
{
alert(this.world);
}
调用一下：
var child = new Child();
child.sayHello(); //hello
child.sayWorld(); //world
(5)继承的第五种方式：混合方式（最佳实践，推荐使用）
function Parent(hello)
{
this.hello = hello;
}
Parent.prototype.sayHello = function()
{ alert(this.hello); }
function Child(hello,world)
{
Parent.call(this,hello);
this.world = world;
}
Child.prototype = new Parent();
Child.prototype.sayWorld = function()
{ alert(this.world); }
调用一下：
var child = new Child('hello','world');
child.sayHello(); //hello
child.sayWorld(); //world
最后举个例子来应用JavaScript的继承机制的应用
function Shape(edge) //一个抽象的形状
{
this.edge = edge;
}
Shape.prototype.getArea = function() //获取形状的面积，类似于接口中的方法，这里先返回-1
{ return -1; }
Shape.prototype.getEdge = function() //返回形状的边有多少条
{ return this.edge; }
下面定义子类，三角形
function Triangle(bottom,height) //三角形，出入参数为底边和高
{
Shape.call(this,3);
this.bottom = bottom;
this.height = height;
}
Triangle.prototype = new Shape();
Triangle.prototype.getArea = function() //返回三角形的面积，覆盖父类的方法
{ return 0.5 * this.bottom * this.height; }
调用三角形的对象和方法：
var triangle = new Triangle(10,4);
alert(triangle.getEdge()); //3
alert(triangle.getArea()); //20
下面再定义一个四边形
function Rectangle(bottom, height)
{
Shape.call(this,4);
this.bottom = bottom;
this.height = height;
}
Rectangle.prototype = new Shape();
Rectangle.prototype.getArea = function()
{ return this.bottom * this.height; }
调用四边形的对象和方法
var rectangle = new Rectangle(10,20);
alert(rectangle.getEdge()); //4
alert(rectangle.getArea()); //200
