标签：
对象 是什么？
对象就是一个整体，对外提供一些操作，比如：电视机（不用知道内部的构造，只知道怎么用）
面向对象 是什么？
使用对象时，只关注对象提供的功能，不关心内部细节，比如：操作电视机（只知道用遥控器控制）
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
构造函数加属性，原型加方法，这样就解决了资源浪费。
以上就是一个面向对象的写法。
更新待续.......
标签：
原文地址：http://www.cnblogs.com/QRL909109/p/5396110.html
