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的继承特性
|
根据上图,和带下划线的代码段,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