日期:2014-05-16  浏览次数:20445 次

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

3.?构造函数、类和原型
总述:
对象是我们很熟悉的,常在程序中用它。那么,如何来区分一个对象与另一个对象的区别呢?类就做到了这点,对象是类的一个实例。
Js中的类与java的类不太一样,但是它构造函数和原型来来支持类。
3.1构造函数
我们在程序里使用对象时常常先new一个object,然后再给这个object赋属性,然后再使用这个object来实现我们想要的功能。很经常的,new一个无参数的object,我们这样写:

var o = {};

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

var o = new object();

?
在后面的写法中,new 后面的object()就是一个构造函数,就像在程序里我们常常自定义构造函数,设置它的prototype,再new一样。那么什么是构造函数呢?
构造函数是设计来和new一起使用的函数。new后,就把新的对象作为this关键字的值来传递了。
构造函数的作用是什么呢?它是初始化一个新创建的对象,设置在使用这个对象之前的所有属性。
可以定义自己的构造函数(常用),只需要编写一个为this添加属性的函数就可以了。如下的例子:

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这个对象的面积,需要这样做:

rec1.area = function(){
 return this.w * this.h
}
var a = rec1.area();

?

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

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、增加给原型的任何属性,都会成为被构造函数初始化的对象的属性。
如上面的例子中,我们可以这样写:

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。例子如下:

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()