js面向对象编程

最新推荐文章于 2024-02-28 23:59:43 发布

fly_1c

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量114

点赞数

转载至：js面向对象编程

什么是面向对象编程（OOP）？用对象的思想去写代码，就是面向对象编程。

面向对象编程的特点

抽象：抓住核心问题
封装：只能通过对象来访问方法
继承：从已有对象上继承出新的对象
多态：多对象的不同形态

对象的组成

属性：对象下面的变量叫做对象的属性
方法：对象下面的函数叫做对象的方法

var arr = [];
arr.number = 10;  //对象下面的变量：叫做对象的属性

//alert( arr.number );
//alert( arr.length );

arr.test = function(){  //对象下面的函数 : 叫做对象的方法
    alert(123);
};

arr.test();//方法

arr.push();//方法
arr.sort();

创建一个对象

var obj=new Object();//创建一个空的对象
        obj.name='小明';  //属性
        obj.showName=function(){   //方法
        alert(this.name);//this指向obj
 }
 obj.showName();//小明

如果需要创建两个或多个对象

var obj1=new Object();//创建一个空的对象
        obj1.name='小明';  //属性
        obj1.showName=function(){   //方法
        alert(this.name);//this指向obj
 }
 obj1.showName();//小明

var obj2=new Object();//创建一个空的对象
        obj2.name='小灰';  //属性
        obj2.showName=function(){   //方法
        alert(this.name);//this指向obj
 }
 obj2.showName();//小灰

使用Object函数或对象字面量都可以创建面向对象，但需要创建多个对象时，会产生大量的重复代码，可通过工厂方式来解决这个问题

工厂方式 -------------------- 面向对象中的封装函数

//工厂方式 : 封装函数

function createPerson(name){
    var obj = new Object();
    obj.name = name;
    obj.showName = function(){
        alert( this.name );
    };

    return obj;    
}

var p1 = createPerson('小明');
p1.showName();
var p2 = createPerson('小强');
p2.showName();

创建对象用工厂方式来实现，可以传递参数，由于创建对象都是使用Object的原生构造函数来实现的，因此无法识别对象类型

构造函数模式 -------------------- 给一个对象添加方法

//new 后面调用的函数叫构造函数
        function CreatePerson(name){
            this.name=name;
            this.showName=function(){
                alert(this.name);
            }
        }
        var p1=new CreatePerson('小明');//当new去调用一个函数时，函数中的this就是创建出来的对象而函数中的返回值就是this
        p1.showName();
        var p2=new CreatePerson('小强');
        p2.showName();

使用自定义的构造函数，定义对象类型的属性和方法，与工厂方式的区别：

没有显式的创建对象
直接将属性和方法赋给this对象
没有return语句

上面例子中：CreatePerson构造函数生成的两个对象p1与p2都是CreatePerson的实例

虽然构造函数解决了上面工厂方式的问题，但是它一样存在缺点，就是在创建对象时，每个对象都有一套自己的方法，每定义一个函数都实例化了一个对象

例如：

function CreatePerson(name){
    
    this.name = name;
    this.showName = function(){
        alert( this.name );
    };
    
}

var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();

alert( p1.showName == p2.showName );  //false  它们的值相同，地址不同

测试例子中的p1.showName与p2.showName是否会相等，弹出的结果是false，说明p1和p2实例都包含一个不同的showName实例

再来举几个例子

var a = [1,2,3];
var b = [1,2,3];

alert( a == b );  //false  值相同，地址不同

var a = 5;
var b = a;
b += 3
alert(b); //8
alert(a); //5   基本类型 : 赋值的时候只是值的复制

var a = [1,2,3];
var b = a;
b.push(4);
alert(b);  //[1,2,3,4]
alert(a);  //[1,2,3,4]   对象类型 : 赋值不仅是值的复制，而且也是引用的传递

var a = [1,2,3];
var b = a;
b = [1,2,3,4];
alert(b); //[1,2,3,4]
alert(a); //[1,2,3]

对比上面的几个例子，不难看出基本类型和对象类型的区别了，对象类型的赋值不仅是值的复制，也是引用的传递；提到了对象的引用应该很清楚上述p1.showName==p2.showName为何会返回结果是false

原型模式（prototype） -------------------- 给一类对象添加方法

原型（prototype）：重写对象下面公用的属性或方法，让公用的属性或方法在内存中只存在一份（提高性能），也就是说所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

原型：类比css中的class
普通方法：类比css中的style

var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];

Array.prototype.sum = function(){//原型prototype : 要写在构造函数的下面
    var result = 0;
    for(var i=0;i<this.length;i++){
        result += this[i];
    }
    return result;
};

alert( arr.sum() );  //15
alert( arr2.sum() );  //10

更多请看： js面向对象编程