网站首页 > 基础教程 正文
面象对象编程技术的核心理念:封装、继承、多态;在一些主流的高级编程语言中,比 如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接和容易了,因为 javascript并不是面向对象的语言,所以我们只能通过javascript的一些特性,比如:闭包、原型链等来模拟出面向对象编程,我认为这些是 作为熟练掌握与灵活运用javascript的基础,园子里已有很多的javascript高手对于这方面都有介绍与分析,而我仅以作为一个项目负责人 (独立设计与开发WEB前端与后端)的视角来重新理解javascript面向对象要点。
既然是面向对象,首先我们要知道如何创建一个对象,以下列出了创建对象的几种常见方法:
A.直接创建一个对象实例:
12345678910111213141516 | //直接实例化一个对象 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.先定义后实例化对象:
12345678910 | //先定义类,再实例化成对象 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方法来创建对象。
实现封装,即只暴露公共方法与公共属性,隐藏实现细节(私有方法、属性)
123456789101112131415161718192021222324252627282930 | 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); |
利用原型链实现继承,即一个对象包含另一个对象的所有公共属性与方法,实现继承的方法有很多,我觉得采用如下形式来模拟继承更符合面向对象的思维:
123456789101112131415 | 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(); |
利用原型链实现多态,即基于同一个方法签名在不同的子类中表现的形式不同:
123456789101112131415161718192021222324 | 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(); |
猜你喜欢
- 2024-12-10 前端面试题《webpack》
- 2024-12-10 TypeScript 中 'Object'、'{}' 和 'object' 之间的区别
- 2024-12-10 一文搞懂JavaScript原型及原型链(附代码)
- 2024-12-10 React 18发布,仅用400行代码就能实现一个Mini-React
- 2024-12-10 JavaScript_基础简介8
- 2024-12-10 JavaScript 基础入门
- 2024-12-10 HTML DOM Object 对象
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)