javascript必知必会:面象对象编程

简介:

面象对象编程技术的核心理念:封装、继承、多态;在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接和容易了,因为javascript并不是面向对象的语言,所以我们只能通过javascript的一些特性,比如:闭包、原型链等来模拟出面向对象编程,我认为这些是作为熟练掌握与灵活运用javascript的基础,园子里已有很多的javascript高手对于这方面都有介绍与分析,而我仅以作为一个项目负责人(独立设计与开发WEB前端与后端)的视角来重新理解javascript面向对象要点。

既然是面向对象,首先我们要知道如何创建一个对象,以下列出了创建对象的几种常见方法:

A.直接创建一个对象实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//直接实例化一个对象
var  Person1 = { Name:  "梦在旅途" , Age: 29, Sex:  "男" , Height: 178 };
 
alert(Person1.Name);
 
var  Person2 =  new  Object();
Person2.Name =  "梦在旅途" ;
Person2.Age = 29;
Person2.Sex =  "男" ;
Person2.Height = 178;
 
alert(Person2.Name);
 
//这个是上面的简写
var  Person3 =  new  Object({ Name:  "梦在旅途" , Age: 29, Sex:  "男" , Height: 178 });
alert(Person3.Name);

优点:直接创建一个对象,无需提前定义类型;

缺点:无法实现复用;

B.先定义后实例化对象:

1
2
3
4
5
6
7
8
9
10
//先定义类,再实例化成对象
function  Person4(n,a,s,h) {
     this .Name = n;
     this .Age = a;
     this .Sex = s;
     this .Height = h;
}
 
var  p4 =  new  Person4( "梦在旅途" , 29,  "男" , 178);
alert(p4.Age);

优点:类似面向对象编程语言的构造函数,容易理解,且定义后可通过new关键字实例化多个对象,实现复用。

缺点:需先定义后才能实例化;

综上所述,建议采用B方法来创建对象。

实现封装,即只暴露公共方法与公共属性,隐藏实现细节(私有方法、属性)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function  Person5(n, a, s, h) {
 
     //公共属性
     this .Name = n;
     this .Age = a;
     this .Sex = s;
     this .Height = h;
     
     //公共方法
     this .AfterYear =  function  (count) {
         updateAge(count);
         alert(_currentYear + "后,我已经:"  this .Age + "岁了!" );
     };
 
     this .Say =  function  () {
         alert( "我的个人信息--> Name: " this .Name+ ", Age: " this .Age + ", Sex: " this .Sex + ", Height:"  this .Height);
     }
 
     //私有属性与方法
     var  _self =  this ;
     var  _currentYear = 2015;
     function  updateAge(count) {
         _currentYear += count;
         _self.Age += count;
     };
}
 
var  p5 =  new  Person5( "梦在旅途" , 29,  "男" , 178);
p5.AfterYear(10);
p5.AfterYear(25);

利用原型链实现继承,即一个对象包含另一个对象的所有公共属性与方法,实现继承的方法有很多,我觉得采用如下形式来模拟继承更符合面向对象的思维:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  SoftEngineer(n, a, s, h, lang) {
     Person5.call( this , n, a, s, h); //将Person5的所有属性与方法包含到SoftEngineer中,从而实现继承
     this .Lang = lang;
     this .SayCode =  function  () {
         alert( "我是一名软件工程师,我会"  this .Lang +  "编程语言!" );
     }
 
     this .Working =  function  () { }; //空方法,类似面向对象中的虚方法
}
 
SoftEngineer.prototype =  new  Person5();  //将SoftEngineer的原型指定Person5的实例
 
var  softengr =  new  SoftEngineer( "梦在旅途" , 29,  "男" , 178,  "javascript" );
softengr.Say();
softengr.SayCode();

利用原型链实现多态,即基于同一个方法签名在不同的子类中表现的形式不同:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function  WebSoftEngineer(n, a, s, h, lang) {
     SoftEngineer.apply( this , [n, a, s, h, lang]);
     this .Working =  function  () {
         alert( "我是网页工程师,从事网页开发设计工作!" );
     };
};
 
WebSoftEngineer.prototype =  new  SoftEngineer();
 
function  AppSoftEngineer(n, a, s, h, lang) {
     SoftEngineer.apply( this , [n, a, s, h, lang]);
     this .Working =  function  () {
         alert( "我是应用工程师,从事客户端应用程序开发设计工作!" );
     };
};
AppSoftEngineer.prototype =  new  SoftEngineer();
 
var  webengr =  new  WebSoftEngineer( "梦在旅途" , 29,  "男" , 178,  "javascript" );
webengr.Say();
webengr.Working();
 
var  appengr =  new  AppSoftEngineer( "梦在旅途" , 29,  "男" , 178,  "c#" );
appengr.Say();
appengr.Working();

  

本文转自 梦在旅途 博客园博客,原文链接:http://www.cnblogs.com/zuowj/p/4734257.html  ,如需转载请自行联系原作者

相关文章
|
8天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
18天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
26 1
N..
|
25天前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
11天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
3天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
6 0
|
3天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
8天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
16天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
26天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2
|
29天前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作BOM对象
9 1