专业编程基础技术教程

网站首页 > 基础教程 正文

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

ccvgpt 2024-12-10 12:43:02 基础教程 1 ℃

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

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方法来创建对象。

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

123456789101112131415161718192021222324252627282930function?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);

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

123456789101112131415function?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();

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

123456789101112131415161718192021222324function?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();


Tags:

最近发表
标签列表