面向对象基础

什么是面向对象

用对象的思想去写程序，就是面向对象编程

-过程式写法

-面向对象写法

例如：数组Array时间Date

var arr=new Array(); //系统自带的对象，叫做系统对象
var date=new Date();

arr.length
arr.push();
arr.sort();

date.getDate();
var t1=new Tab();
t1.over();
t1.autoPlay();

面向对象编程（OOP）的特点


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

面向对象的基本写法何组成

对象的组成

方法（行为、操作）–函数：过程、动态的

属性-变量：状态、静态的

创建第一个面向对象程序

对象下面的变量：叫做对象的属性

对象下面的函数：叫做对象的方法

为对象添加属性和方法
object对象
this指向
创建两个对象：重复代码过多

var arr=[];
arr.number=10;

arr.test=function(){
    alert(123);
};

arr.test();
arr.push();
arr.sort();

var obj=new object();//创建了一个空的对象
obj.name='小明';
obj.showName=function(){
    alert(obj.name);
};

工厂方式与构造函数


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();

当new去调用一个函数：这个时候函数中的this就是创建出来的对象，而且函数的返回值直接就是this （隐式返回）


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

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

对象引用是什么和它的问题

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

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

alert(p1.showName==p2.showName);   //false    这里为什么会出现false?

原因：因为基本类型的比较，只要值相同就可以了；而对象类型的比较，值和引用都要相同才可以。p1.showName和p2.showName分别在不同的地址创建了对象，所以这里返回的是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]

var a = 5;
var b = 5;
alert(a == b);  //  true  基本类型 : 值相同就可以


var a = [1,2,3];
var b = [1,2,3];
alert( a == b );  //false  //对象类型 : 值和引用都相同才行

面向对象之原型学习

原型：去改写对象下面公用的方法或者属性，让同样的公用的东西在内存当中只存在一份（目的是为了提高性能）

类比：原型就像css中的class一样，而普通方法就像CSS中的style一样

注意：原型prototype : 要写在构造函数的下面

普通方法的例子

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

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

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

原型的例子

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

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

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

类比css中style的优先级大于class,所以这里的优先级也是

var arr = [];
arr.number = 10;
Array.prototype.number = 20;

alert(arr.number);   //10

var arr = [];
Array.prototype.number = 20;

alert(arr.number);   //20

工厂方式之原型


    function CreatePerson(name) {

        this.name = name;

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

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

    alert(p1.showName == p2.showName); //true   不仅值相同，而且地址相同，在内存中只存在一份

    var arr = new Array();
    var date = new Date();
    </script>
</head>

<body>
</body>

</html>

小结：面向对象的写法

function 构造函数(){

    this.属性

}

构造函数.原型.方法 = function(){};

var 对象1 = new 构造函数();

对象1.方法();

传统的过程式编写选项卡

1
2

用面向对象封装通用选项卡

1
2