js面向对象1

1.在空白的Object上加属性和方法：

<script type="text/javascript">
function createPerson(name, qq){            //构造函数
    var obj = new Object();
    obj.name = name;
    obj.qq = qq;
    obj.showName = function(){
        alert("我的名字叫:"+this.name);
    }
    obj.showQQ=function(){
        alert("我的qq号："+this.qq);
    }
    return obj;
}

var obj1 = createPerson("blue","2312371239");
obj1.showName();
obj1.showQQ();

var obj2 = createPerson("shangsan","97979797872");
obj2.showName();
obj2.showQQ();

/*
*   上述工厂方式创建对象的缺点：每次创建一个对象，都是自己的函数showName，showQQ，如果有很多的createPerson的话，那么就多出了很多的对象；
*   会占用很多的系统内存；
*/

</script>

上述的createPerson叫构造函数，只是因为它的作用就是构造一个对象，和普通函数并没有什么不同；

但是这个createPerson创建对象，有两个缺点：

1.没有new关键字；

2.每次创建一个对象，每个对象上都有自己的函数，如果调用了成百上千个createPerson的话，函数大量重复，占用系统资源大，浪费。

2.先解决没有new关键字：

<script type="text/javascript">
function createPerson(name, qq){            //构造函数
    //系统偷偷替咱们做：
    //var this = new Object();

    this.name = name;
    this.qq = qq;
    this.showName = function(){
        alert("我的名字叫:"+this.name);
    }
    this.showQQ=function(){
        alert("我的qq号："+this.qq);
    }

    //系统也会偷偷做一些：
    //return this;
}

var obj1 = new createPerson("blue","2312371239");
obj1.showName();
obj1.showQQ();

var obj2 = new createPerson("shangsan","97979797872");
obj2.showName();
obj2.showQQ();

</script>

3.解决资源浪费的问题；

在解决资源浪费问题之前，介绍prototype原型的概念：

原型：
CSS                                                            JS                    
class                  一次给一组元素加样式                        原型
行间样式                一次给一个元素加样式                        给对象加东西

.box{background:red;}
<div class="box" style="background:green;"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

举个例子：数组是没有求和方法的，这里写一个求和方法：

<script type="text/javascript">
var arr1 = new Array(1,2,45,34);
var arr2 = new Array(1,2,33);

arr1.sum=function(){
    var result = 0;
    for(var i=0; i<this.length; i++){
        result+= this[i];
    }
    return result;
}

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

</script>

但是只能弹出arr1的和，因为这里只是给了arr1加了sum方法，相当于行间样式一样，只是给了某一个对象单独添加了sum方法；

因此，如果要arr2也具有sum方法，这么做：

<script type="text/javascript">
var arr1 = new Array(1,2,45,34);
var arr2 = new Array(1,2,33);

Array.prototype.sum=function(){
    var result = 0;
    for(var i=0; i<this.length; i++){
        result+= this[i];
    }
    return result;
}

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

</script>

把原型用到面向对象里面：这里把createPerson改成了Person类：

<script type="text/javascript">
function Person(name, qq){            //构造函数
    this.name = name;
    this.qq = qq;
}
Person.prototype.showName= function(){
    alert("我的名字叫:"+this.name);
}
Person.prototype.showQQ = function(){
    alert("我的qq号："+this.qq);
}

var obj1 = new Person("blue","2312371239");
obj1.showName();
obj1.showQQ();

var obj2 = new Person("shangsan","97979797872");
obj2.showName();
obj2.showQQ();

alert(obj1.showName == obj2.showName);      //true，都有showName方法并且是同一个，因为都是来自于原型上的

</script>

用构造函数加属性；

用原型加方法；

类似于Array、Date这种，说明它不是普通的函数，是构造函数，类名首字母一般大写；所以这里改成了Person；

猜你喜欢