什么是面向对象编程
? ? ?用对象的思想去写代码,就是面向对象编程
? ? ? ? ?过程式写法
? ? ? ? ?面向对象写法
? 我们一直都在使用对象
? ? ? ? ? 数组 Array ?时间 Date
面向对象编程(OOP)的特点
? ? ? ? 抽象:抓住核心问题
? ? ? ? 封装:只能通过对象来访问方法
? ? ? ? 继承:从已有对象上继承出新的对象
? ? ? ? 多态:多对象的不同形态
对象的组成
? ? ? ?方法(行为、操作)——函数:过程、动态的
? ? ? ?属性——变量:状态、静态的
? ? ? ? ? ? ? ? ? 创建第一个面向对象程序
? ? ? ? 为对象添加属性和方法
? ? ? ? ? ? ?Object对象
? ? ? ? ? ? ?this指向
? ? ? ? ? ? ?创建两个对象 : 重复代码过多
?
<script> //var obj = {}; var obj = new Object(); //创建了一个空的对象 obj.name = ‘小明‘; //属性 obj.showName = function(){ //方法 alert(this.name); }; obj.showName(); var obj2 = new Object(); //创建了一个空的对象 obj2.name = ‘小强‘; //属性 obj2.showName = function(){ //方法 alert(this.name); }; obj2.showName(); </script>
?
?
优化面向对象,来封装函数(在面向对象中叫做工厂方式)
?
<script> //工厂方式 : 封装函数 function createPerson(name){ //1.原料 var obj = new Object(); //2.加工 obj.name = name; obj.showName = function(){ alert( this.name ); }; //3.出场 return obj; } var p1 = createPerson(‘小明‘); p1.showName(); var p2 = createPerson(‘小强‘); p2.showName(); </script>
?工厂方式
?
? ? ? ? ? ? 面向对象中的封装函数
? ? ? ? ? ?改成与系统对象类似写法
? ? ? ? ? ? ? ? ?首字母大写
? ? ? ? ? ? ? ? ?New 关键字提取
? ? ? ? ? ? ? ? ?This指向为新创建的对象
构造函数
? ? ? ? 用来创建对象的函数,叫做构造函数
存在的问题
? ? ? ? ? 对象的引用
? ? ? ? ? 浪费内存
-----------------------------------------------------------------------------------------------
//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,
而且函数的的返回值直接就是this啦(隐式返回)
?
//new后面调用的函数 : 叫做构造函数
------------------------------------------------------------------------------------------------
?
<script> //当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回) //new后面调用的函数 : 叫做构造函数 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 var arr = new Array(); var date = new Date(); </script>
?
?
对象的引用
?
/*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]
?
//var a = 5; //var b = 5; // //alert(a == b); //基本类型 : 值相同就可以
?
?
//var a = [1,2,3]; //var b = [1,2,3]; //alert( a == b ); //false //对象类型 : 值和引用都相同才行
?
var a = [1,2,3]; var b = a; alert( a==b ); //true
?
?
原型-prototype
? ? ? ?概念
? ? ? ? ? ? ?重写对象方法,让相同方法在内存中存在一份(提高性能)
? ? ? ?学习原型
? ? ? ? ? ? ?类比 ?: ?CSS中的Class
? ? ? ?通过原型改写工厂方式
? ? ? ? ? ? ?原则
? ? ? ? ? ? ? ? ? ?相同的属性和方法可以加载原型上
? ? ? ? ? ? ? ? ? ?混合的编程模式
? ? ? ? ?总结面向对象写法
? ? ? ? ? ? ? ?构造函数加属性,原型加方法
?
<script> //原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 ) //原型 : 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 </script>
?
最后面向对象的写法
?
<script> function 构造函数(){ this.属性 } 构造函数.原型.方法 = function(){}; var 对象1 = new 构造函数(); 对象1.方法(); </script>
?
原文:http://xiaomiya.iteye.com/blog/2158964