javascript 学习笔记3-构造函数、类和原型

3. 构造函数、类和原型

  总述:

  对象是我们很熟悉的,常在程序中用它。那么,如何来区分一个对象与另一个对象的区别呢?类就做到了这点,对象是类的一个实例。

  Js中的类与java的类不太一样,但是它构造函数和原型来来支持类。

  3.1构造函数

  我们在程序里使用对象时常常先new一个object,然后再给这个object赋属性,然后再使用这个object来实现我们想要的功能。很经常的,new一个无参数的object,我们这样写:

  Js代码

双击代码全选
1
var o = {};

  其实它的实现与下面的代码是一样的:

  Js代码  

双击代码全选
1
var o = new object(); 

  在后面的写法中,new 后面的object()就是一个构造函数,就像在程序里我们常常自定义构造函数,设置它的prototype,再new一样。那么什么是构造函数呢?

  构造函数是设计来和new一起使用的函数。new后,就把新的对象作为this关键字的值来传递了。

  构造函数的作用是什么呢?它是初始化一个新创建的对象,设置在使用这个对象之前的所有属性。

  可以定义自己的构造函数(常用),只需要编写一个为this添加属性的函数就可以了。如下的例子:

  Js代码

双击代码全选
1
2
3
4
5
6
function Rectangle(w,h){ 
 this.w = w; 
 this.h = h; 
} 
var rec1 = new Rectangle(1,1);//var rec1 = {w:1,h:1} 
var rec1 = new Rectangle(2,2);//var rec2 = {w:2,h:2} 

  以上代码注意:

  1、 注释里的效果也是一样的。那么我们为什么还要定义构造函数呢?构造函数方便你new多个对象,而注释里的写法是只需要使用一次这样的对象。

  2、 从上面的代码可以看出:通过定义一个函数(构造函数),其实就定义了对象的一个类。

  3、 上述类new的对象,都保证了初始化了w和h的值。根据传入构造函数的w和h的数值的不同,可以得到不同w和h值的对象,但这些对象都有相同的属性(如计算面积的方法都相同等)。

  3.2原型与继承

  在上面代码的例子中,我们如果要计算rec1这个对象的面积,需要这样做:

  Js代码

双击代码全选
1
2
3
4
rec1.area = function(){ 
 return this.w * this.h 
} 
var a = rec1.area(); 

  在上面这种情况下,如果rec2也要得到它的面积,也要定义一个它自己的area函数值。其实,所有的rectangle对象的计算面积的方法是一样的,我们可以把这个方法写在构造函数里。如下:

  Js代码   

双击代码全选
1
2
3
4
5
function Rectangle(w,h){ 
 this.w = w; 
 this.h = h; 
 this.area = function(){this.w*this.h} 
}

  这时候用这个新的构造函数后new的对象就可以直接用rec1.area()来得到它的面积了。

  但是这里引出了一个问题,什么问题呢?

  如果用上面的构造函数的放,每new一个矩行对象,都会初始化三个属性,这三个属性中除了w和h是每个对象不同的,area属性却是每个对象都指向同一个函数functiion。

  这就引出了原型。可以把area方法放在这个类的原型对象里。

  1、原型对象的任何属性,都表现为以它为原型的对象的属性。这句话比较难理解,好好理解一下,其实它说的是js中的对象都从它的原型里继承属性。

  2、当我们new一个对象时,其实在内部也设置了这个对象的原型,这个对象的原型就是它的构造函数的prototype的值。

  3、所有的函数都有一个prototype属性。也就是你定义一个函数后,prototype就被自动创建和初始化了。

  4、增加给原型的任何属性,都会成为被构造函数初始化的对象的属性。

  如上面的例子中,我们可以这样写:

  Js代码  

双击代码全选
1
2
3
4
5
6
7
8
9
function Rectangle(w,h){ 
 this.w = w; 
 this.h = h; 
} 
Rectangle.prototype={ 
 area:function(){ 
 return this.w * this.h 
 } 
}

  上面的代码中,w和h在每个对象实例中都不同;把area属性放在原型里说明了:原型对象与构造函数相关,并且用构造函数new出来的每个实例对象都从原型那里继承了一份相同的一组属性。

这也说明了,原型对象是放置方法和其它不变属性的理想的地方。

  原型的概念也就引出了继承这个概念。

  使用原型有两个好处:

  1、 使用原型可以减少每new一个对象所占有的内存,因为new的不同的对象可以同时继承原型的不同的属性。

  2、 即使是对象创建之后才增加到原型中的方法,对象也继承它。这就说明:可以为已有的类添加新的方法。

  第二点常用,比如某个类是别人写好的,或是内建的,你需要扩展它,就可以增加一个这个类的prototype的属性。(但是对于内建类,最好不要这么做,因为你扩展了,所有的这个类的实例都会因此而多个属性)

  3.3 继承的属性的读和写

  我们知道:每个类都有原型对象,原型对象带有一组属性,这组属性可以被这个类的所有多个实例所继承。所以,在读一个类的属性和写一个类的属性时,需要执行一种不对称。也就是当读一个o的p属性时,会先到o中看是否有p的属性,如果没有,则到原型中去看。但当写一个o的p属性值时,并不用原型。为什么呢?因为如果用原型的话,会改变整个类对象的p的值。

  因此,属性继承只在读取属性值时发生,而在写入属性值时不发生。因此,如果我们设置了o的p的值,而当这个p是从原型那里继承来的时,其实o会直接在自身创建出一个p属性。这样,当读取p属性值时,就不需要到原型中去找,只需要读取出自身的p属性的值就好了。这就好像o的属性p“遮盖”或“隐藏”了原型对象中的属性p。例子如下:

  Js代码   

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Circle(x,y,r){ 
 this.x = x; 
 this.y = y; 
 this.r = r; 
} 
Circle.prototype={ 
 pi :3.1415926, 
 area:funciton(){ 
 return this.pi*this.r*this.r 
 } 
} 
var c1 = new Circle(1,1,1); 
var c2 = new Circle(2,2,2); 
// 
c1.area();//area并不在c1中,从原型中去找,就好像这是c1自身的属性一样。这种写法我们在程序中很常用。 
c1.pi = 4;//设置pi的值,pi在原型中,并不在c1自身的属性中,它把作为c1的一个自身的新属性来创建。改变原型的属性值,这种情况比较少,我们一般去读取它。 
var a= c1.pi*c1.r*c1.r//这时候,pi和r都在c1自身内有。 
var a= c2.pi*c2.r*c2.r//这时候,pi在c2的原型里去读,r都在c2自身读取。 
因为原形属性是一个类的所有对象共享的属性,所以原型成为定义方法的理想场所。

  3.4 Js中模拟类:

  我们知道,对象是包含各种具有名字的数据片断的数据结构,也可以包含对这些数据片断进行操作的方法。对象把相关的值和方法组织到一起,这样增强了代码了模块性和可复用性,使得编程更加容易。

  Js中的对象可以有任意多的属性,且属性可以动态地添加,但java的对象就不是这样,java中的每一个对象都有组预定义的属性,这些属性并不能动态地添加的。

  在java的类中,确切地指定了字段,及方法的同时,会有一个类方法名,但是js不会有一个正式的类名,它只是通过构造函数和原型来模拟类。

  Js和java的类都可以有多个对象,一个对象就是类的一个实例。

  一个java类的类成员有实例属性、实例方法、类属性、类方法。下面分别来说明:

  实例属性:

  每个对象都拥有它的实例属性的一份拷贝,实例属性都是通过对象来访问。如:

  r1.w

  在Retangle类中,每个Retangle对象都有一个w属性指定了它的宽度。

  默认情况下,js的任何对象属性都是一个实例属性。然而为了真实地模拟面象对象的类,我们说实例属性是由构造函数创建和初始化的属性。

  实例方法:

  实例方法在特定的对象上被调用。如:

  r1.eara()

  实例方法里通过this来引用调用它的对象。我们千万不要理解成实例方法是每个对象都有一份自己的私有拷贝,实例属性是每个对象都有有一份自己的私有拷贝,但实例方法却相反,这是每个对象所共享的。我们一般把实例方法放在构造函数的原型上来定义,通过这种方式,这样,通过这个构造函数实例化的对象都共享和继承了这个方法。

  类属性:

  类属性是与一个类自身相关的属性,而不是和这个类的每个实例相关的属性。类属性通过自身来调用。

  不管创建了多少份这个类的实例,类属性只有一份。类属性本质上是全局的。

  在js里,我们通过定义构造函数的自身的一个属性来定义类属性。

  类方法:

  类方法是与一个类自身相关,而不是与类的实例相关的方法。类方法通过自身来调用。

  要定义一个类方法,只需要把这个相应的函数定义成为构造函数的一个属性就可以了。

  类方法的this并不指向类的任何具体的实例,而是引用构造函数自身。

  代码例子如下:

  Js代码   

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
functinn Circle(x,y,r){ 
 //这里的x,y,r都是实例属性 
 this.x = x; 
 this.y = y; 
 this.r = r; 
} 
//这里的pi是类属性 
Circle.pi = 3.1415 
 
Circle.prototype={ 
 //area()方法是实例方法 
 area:function(){ 
 return Circle.pi * this.r*this.r 
 } 
} 
//max()方法是个类方法,传入a和b两个类实例进行比较,并征对某个具体的实例 
Circle.max = function(a,b){ 
 if(a.r>b.r) return a; 
 else return b; 
} 
 

参考资料:http://tech.ddvip.com/2009-09/1252246981131153_2.html


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值