返回首页
当前位置: 主页 > 编程语言 > Javascript教程 >

Javascript中function对象详解

时间:2017-02-10 22:57来源:电脑教程学习网 www.etwiki.cn 编辑:admin

以前学习javascript的时候,是因为被js漂亮的界面控制所吸引,所以找点空闲的时间系统的学习了javascript,今天把学习的总结写下来给新手一些参考。如果有什么写错的地方,希望高手们不要见笑。

不管是绚丽多彩的js界面控制,还是编写复杂多样的ajax应用。相信function的高级应用是必不可少的。那么js中的function到底有什么不同呢?

1.Javascript函数
在Javascript定义一个函数一般有如下4种方式:
 

function huchen(){}
var fun=function(){};
var fun=functionfun(){};
var fun=new Function();


第1种就是最常用的方法,
用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。即用function关键字定义一个函数对象。
后面3种是把函数对象(Function Object)赋给变量,而这个函数对象本身是没有名字的,即匿名函数。

2.函数对象(Function Object)
在js中,有很多内部对象,比如:Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型,可以通过new操作符返回一个对象。然而Function对象和其他对象不同,当用typeof得到一个Function对象的类型时,它仍然会返回字符串“function”,而typeof一个数组对象或其他的对象时,它会返回字符串“object”。下面的代码示例了typeof不同类型的情况:
以下是引用片段:
 

alert(typeof(Function));
alert(typeof(new Function()));
alert(typeof(Array));
alert(typeof(Object));
alert(typeof(new Array()));
alert(typeof(new Date()));
alert(typeof(new Object())); 


运行这段代码可以发现:前面4条语句都会显示“function”,而后面3条语句则显示“object”,可见new一个Function实际上是返回一个函数。这与其他的对象有很大的不同。其他的类型Array、Object等都会通过new操作符返回一个普通对象。尽管函数本身也是一个对象,但它与普通的对象还是有区别的,因为它同时也是对象构造器,也就是说,可以new一个函数来返回一个对象。所有typeof返回“function”的对象都是函数对象。也称这样的对象为构造器(constructor),因而,所有的构造器都是对象,但不是所有的对象都是构造器。

可以通过object.constructor属性来获得构造函数。
如:
 

var o = new Object();
alert(typeof(o));
alert(o.constructor);



typeof(o)返回的是object,而o.constructor返回的是
function Ojbect(){      
[native code]
}

这说明Object本身就是通过function定义的一个函数对象,而函数对象可以构造对象,即new了一个函数对象Object,构造了对象o。Array、Date等都是同样的。而Function对象却不一样

var f = new Function();
alert(typeof(f));
alert(f.constructor);
我们看到typeof(f)返回的是function,而不是object
而f.constructor返回的是
function Function(){
[native code]
}

从上面可以看出new一个Function实际上是返回一个函数对象,而函数对象可以构造对象。我们再来看下面这个例子。
 

var f = new Function("x", "y", "this.X=x; this.Y=y;");
var point = new f(5,6);
alert(typeof(point));
alert(point.constructor);
alert(point.X);



我们看到typeof(point)弹出的是object,而point.constructor弹出的是:
function anonymous(x, y){
this.X=x;
this.Y=y;
}
这种写法看起来有点变扭,但是细细梳理,其实并不难理解。
首先var f = new Function("x", "y", "this.X=x; this.Y=y;");
定义了一个函数对象f。这是匿名的函数对象,只是赋予了f,上面已经提到过。
而函数对象可以构造对象,var point = new f(5,6);
这里用函数对象f构造了一个新对象point,所以typeof(point)是object,point.constructor返回的是构造器,我们可以叫它为point对象的构造函数,它是匿名的所以返回的函数名是anonymous,如果把上面var f = new Function("x", "y", "this.X=x; this.Y=y;");
这句改成:
function f(x, y){this.X=x; this.Y=y;}这句,那么point.constructor返回的将是function f(x,y){this.X=x; this.Y=y;}。这里就不是匿名函数了。

在上一篇中我们了解了function对象,下面我们来看看如何运用function对象实现面向对象。

1.什么是对象?
在js中,对象是一种复合数据类型,他们将多个数据值集中在一个单元中,而且允许使用名字来存取这些值。

怎么创建对象?
对象是由运算符new创建的。
在这个运算符之后必须有用于初始化对象的构造函数名。例如:
var o = new Object(); //创建一个空对象,即没有属性的对象。
js还支持内部构造函数,例如:
var now = new Date(); //当前日期和时间
通过对象直接量创建对象。
对象直接量提供了另一种创建并初始化新对象的方式。对象直接量由属性说明列表构成,列表包含在大括号中,其中属性说明由逗号隔开,对象直接量中的每个属性都是由属性名加上冒号和属性值构成。例如:
 

var circle = {x:0, y:0, radius:2};
var coder = {
name:”huchen”,
age:22,
sex:”mail”,
email:”
vs2010.net@gmail.com”
};


变量的读取
这个相信就不用在啰嗦了吧,如:coder.name;
如果要读取一个不存在的属性(即还没有被赋值的属性)的值,那么得到的结果将是undefined。
删除属性:
delete coder.sex;
删除一个属性不仅仅是把该属性设置为undefined,而是真正从对象中移除该属性。

2.构造函数
从上一篇中我们知道,在javascript中,使用new运算符以及预定义的构造函数(如Object(),Date()等)可以创建并初始化一个新对象。在许多实例中,这些预定义的构造函数和他们创建的内部对象类型都很有用。但是,在面向对象的程序设计中,使用由程序定义的自定义对象类型也是很普遍的。例如如果你想编写一个操作矩形的程序,那么可以用一个特殊类型或者对象类来表示矩形。这个矩形类的每个对象都有一个width属性和一个height属性,因为他们定义矩形的本质特征。

要创建已经定义了的带有属性的对象,需要编写一个构造
函数在新的对象中创建并初始化这些属性。构造函数是具有两个特性的javascript函数:
1,它由new运算符调用。
2,传递给他的是一个对新创建的空对象的引用,将该引用作为关键字this的值,而且它还要对新创建的对象进行适当的初始化。
例:
 

function Rectangle(w, h)
{      
this.width = w;      
this.height = h;
}
var rect1 = new Rectangle(2,5);
var rect2 = new Rectangle(3,7);


学过面向对象编程的都知道面向对象通过属性和方法描述现实世界中的类型。
那个有了属性,自然就应该有方法。

3.方法
在javascript中,可以借助可以讲函数赋给任何变量这个特性。我们可以把函数赋给一个对象属性。如果有一个函数f和一个对象o,就可以适应如下代码定义一个名为m方法:
o.m = f;
定义了之后可以采用下面方式调用:
o.m();

方法有一个非常重要的属性,就是在方法主体内部,关键字this可以引用当前调用该方法的对象。那么有了这些概念我们来看个例子:
 

function compute_area()
{      
return this.width * this.height;
}
var page = new Rectangle(4, 5);
//通过函数赋予对象的属性,来定义一个方法。
page.area = compute_area;
//调用方法
var a = page.area();



在这个例子中有一个明显的缺点,就是在调用对象rect的方法area()之前,必须先将该方法赋给rect对象的一个属性,虽然可以调用名为page的特定对象的area()方法,但是在没有将该方法赋给其他的Rectangle对象之前,我们就不能调用任何Rectangle对象的area()方法。这很就会使你感到繁琐。
对此我们可以用这种方法解决:
例:
 

//首先定义一函数,它们将被用作方法。
function Rectangle_area(){return this.width * this.height;}
function Rectangle_perimeter(){return 2*this.width + 2*this.height;}
function Rectangle_set_size(w,h){this.width = w; this.height = h;}
function Rectangle_enlarge(){this.widht *= 2; this.height *= 2;}
function Rectangle_shrink(){this.width /= 2; this.height /= 2;}
function Rectangle(w, h)
{      
this.width = w;      
this.height = h;
      
//在构造函数中定义对象方法      
this.area = Rectangle_area;      
this.perimeter = Rectangle_perimeter;      
this.set_size = Rectangle_set_size;      
this.enlarge = Rectangle_enlarge;      
this.shrink = Rectangle_shrink;
}
var r = new Rectangle(2, 3);
//现在,一但创建了一个Rectangle对象,就可以直接调用它的方法了。
var a = r.area();
r.enlarge();
var p = r.perimeter();



虽然这种方法不用对每个实例化的对象属性赋予方法。但是还是有缺点,在这个例子中,构造函数Rectangle()对它所要初始化的Rectangle对象的7个属性都进行了设置,即使其中5项属性的值都是常量,每个矩形对象的这5项都是相同的。由于每个属性都占用了一定的内存空间,所以给Rectangle类添加方法,就会使每个Rectangle对象占用的内存为原来的3倍。幸运的是javascript引入了一种解决该问题的方法,即它允许一个对象继承原型对象的属性。

------分隔线----------------------------
标签(Tag):Javascript function对象
------分隔线----------------------------
推荐内容
猜你感兴趣