首页 > 编程语言 > 详细

javascript面向对象编程

时间:2014-11-22 02:38:08      阅读:260      评论:0      收藏:0      [点我收藏+]

什么是面向对象编程

? ? ?用对象的思想去写代码,就是面向对象编程

? ? ? ? ?过程式写法

? ? ? ? ?面向对象写法

? 我们一直都在使用对象

? ? ? ? ? 数组 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>

?

javascript面向对象编程

原文:http://xiaomiya.iteye.com/blog/2158964

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!