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()
实例方法里通过this来引用调用它的对象。我们千万不要理解成实例方法是每个对象都有一份自己的私有拷贝，实例属性是每个对象都有有一份自己的私有拷贝，但实例方法却相反，这是每个对象所共享的。我们一般把实例方法放在构造函数的原型上来定义，通过这种方式，这样，通过这个构造函数实例化的对象都共享和继承了这个方法。
类属性：
类属性是与一个类自身相关的属性，而不是和这个类的每个实例相关的属性。类属性通过自身来调用。
不管创建了多少份这个类的实例，类属性只有一份。类属性本质上是全局的。
在js里，我们通过定义构造函数的自身的一个属性来定义类属性。
类方法：
类方法是与一个类自身相关，而不是与类的实例相关的方法。类方法通过自身来调用。
要定义一个类方法，只需要把这个相应的函数定义成为构造函数的一个属性就可以了。
类方法的this并不指向类的任何具体的实例，而是引用构造函数自身。
代码例子如下：

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;
}