js 之面向对象

对象 是什么？

　　对象就是一个整体，对外提供一些操作，比如：电视机（不用知道内部的构造，只知道怎么用）

面向对象 是什么？

　　使用对象时，只关注对象提供的功能，不关心内部细节，比如：操作电视机（只知道用遥控器控制）

JS的面向对象

　　特点：

　　　　1.抽象：抓住问题的核心

　　　　2.封装：不考虑内部细节，只考虑外部使用

　　　　3.继承：从已有的对象上，继承新的对象

　　　　　　·多重继承

　　　　　　·多态（少用）

对象的组成：                          |　　var cat = { 

　　1.属性（变量）　　　　　　 |　　　　cat.name = '小妮';      //属性

　　2.方法（函数）　　　　　　 |　　　　cat.show= function(){  //方法

　　　　　　　　　　　　　　　 |            　　alert('喵喵');

　　　　　　　　　　　　　　　 |　　　　　}} 

 一、原始的对象

var cat1 = new object();
    cat1.name="小妮";
    cat1.show = function(){
         alert('我的名字叫：'+this.name)  
};
var cat2 = new object();
    cat2.name="小明";
    cat2.show = function(){
         alert('我的名字叫：'+this.name)  
};

//调用
cat1.show();  //我的名字叫：小妮
cat2.show();  //我的名字叫：小明

 

 这时候如果想创建多一个对象，需要把上面的整个copy多一次，但这造成很多重复，超级乱。所以有了第二种进阶，构造函数

二、构造函数

function Cat(name){
    var cat = new object();
    cat.name=name;
    cat.show = function(){
         alert('我的名字叫：'+this.name);
    };
    rerurn cat;
}

//调用
var cat1 = Cat('小妮');   
cat1.show();    //我的名字叫：小妮
var cat2 = Cat('小明');   
cat2.show();   //我的名字叫：小明

 然而这种方式有个很大的缺点

alert(cat1.show == cat2.show); //false

 

 这就意味着，每一个新创建的对象都拥有自己的一个方法，尽管方法是一模一样的。这件造成很大的浪费，占据资源。所以有了第三种Prototype模式

 三、Prototype模式

 首先说一下什么是prototype？

.box{color:"#white";}

<div class="box" style="color:#blue"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

//相信会点CSS的人也知道，第一个颜色因为行间样式变成blue，其与三个是white,原型的对应关系如下

//    CSS                                JS 
//    class(一次给一组加样式)             原型
//    style(一次给一个加样式)             给对象单独加事件      

 再来点JS例子：

var arr1 = new Array(1,2,3,4);
var arr2 = new Array(5,6,7,8);

Array.prototype.sum = function () {       //class方法  全部都有
    //arr1.prototype.sum = function () {  //style 行间 只有一个有
       var result = 0;
       for (var i = 0; i < this.length; i++) {
               result += this[i];
          }
           return result;
      };

alert(arr1.sum());
alert(arr2.sum());

 

如果用  arr1.prototype.sum   arr2也要调用sum 将会报错，当加在Array共有的类上，才能共享。

同时要注意prototype是加在类上，方法是被对象调用  

//错误： Array.push();
//错误： new arr();
//正确： arr.push();
//正确： Array.arr()

 言归正传，上面的例子改写为：

function Cat(name){   
    this.name=name;
}
Cat.prototype.show = function(){
         alert('我的名字叫：'+this.name);
    };
//调用
var cat1 = new Cat('小妮');   
var cat2 = new Cat('小明');  

cat1.show();    //我的名字叫：小妮
cat2.show();   //我的名字叫：小明

alert(cat1.show == cat2.show );//true

 

构造函数加属性，原型加方法，这样就解决了资源浪费。

以上就是一个面向对象的写法。

更新待续.......