javascript必知必会:面象对象编程-阿里云开发者社区

开发者社区> 行者武松> 正文

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();


作者:梦在旅途

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10014 0
《JavaScript面向对象编程指南(第2版)》——导读
本书是《JavaScript面向对象编程指南》的第二版。前一版由Stoyan Stefanov著(Packet出版社发行),在业界广受好评。然而,自第一版发行至今已过了五个年头。期间,JavaScript由一项主要适用于浏览器客户端的计算机技术,逐渐发展成为一种多功能的程序设计语言,甚至连服务端也能由它来编写。
1199 0
《JavaScript面向对象编程指南》——导读
JavaScript面向对象编程指南 这本书旨在介绍JavaScript语言,这是一种具有高度表达能力的、基于原型特性的、非常灵活的面向对象程序设计语言。只要我们摒弃之前设计师所做的那种类似翻滚按钮的玩具思路,这种有趣的、独特的语言就会重新焕发活力,并且远胜往昔,今天的Web 2.0世界中的AJAX、胖客户端程序设计、丰富的仿桌面型网络应用程序、缩放式地图以及基于Web的邮件客户端基本上都依赖于JavaScript所带来的高交互性用户体验。
2145 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13814 0
《JavaScript面向对象编程指南(第2版)》——1.8 训练环境设置
通常情况下,控制台只提供单行输入,但我们可以用分号做分割符来执行多个JavaScript语句。而如果您需要更多行代码的话,也可以通过组合键shift+Enter来实现换行,在这种情况下代码不会被立即执行。
1606 0
JavaScript 面向对象编程之一
一:Class and private And public JS 中的类以 function 进行声明,同时 JS 也支持声明私有 private 和公有 public 成员,只不过跟 C# 不一样,它们不是使用这两个关键字实现的。
672 0
《JavaScript设计模式》——第2章 写的都是看到的——面向对象编程 2.1两种编程风格——面向过程与面向对象
面向对象编程就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)。这个对象我们称之为类。面向对象编程思想其中有一个特点就是封装,就是说把你需要的功能放在一个对象里。比如你大学毕业你来公司携带的行李物品没有一件一件拿过来,而是要将他们放在一个旅行箱里,这样不论携带还是管理都会更方便一些。
1265 0
+关注
行者武松
杀人者,打虎武松也。
17142
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载