码迷,mamicode.com
首页 > Web开发 > 详细

js 之面向对象

时间:2016-04-15 18:10:27      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:

对象 是什么?

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

面向对象 是什么?

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

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

 

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

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

更新待续....... 

 

js 之面向对象

标签:

原文地址:http://www.cnblogs.com/QRL909109/p/5396110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!