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

时间： 2024-08-10 01:31:13

javascript必知必会：面象对象编程的相关文章

JavaScript必知必会(七)js对象继承_基础知识

对象继承inherit var o = { r: }; var c = function f() { }; c.prototype = o; c.r = ; alert(o.r);//被继承的属性值未发生改变.alert(c.r);//c中r覆盖了o中的属性. 如何调用o中的r属性呢. var o = { r: }; var c = function f() { }; c.prototype = o; alert(o.r);// 被继承的属性值未发生改变. alert(c.r);//查询r属性,

JavaScript必知必会(九）function 说起 闭包问题_javascript技巧

function 函数格式 function getPrototyNames(o,/*optional*/ a) { a = a || []; for(var p in o) { a.push(p); } return a; } caller func.caller 返回函数调用者 function callfunc() { if(callfunc.caller) { alert(callfunc.caller.toString()); }else { alert("没有函数调用");

JavaScript必知必会(十) call apply bind的用法说明_javascript技巧

call 每个func 都会继承call apply等方法. function print(mesage) { console.log(mesage); return mesage; } print.call(this, "cnblogs");//cnblogs call(thisAgr,agr1,agr2...) ,call方法第一个传递一个context上下文.后面是参数的个数. apply apply(thisAgr,[agr1,agr2]),apply方法和call的用法一样,

JavaScript必知必会(六) delete in instanceof_javascript技巧

in in 判断 左边 的字符串或者能转换成字符串的是否属于 右边 的属性. var data = { x: , y: };//定义了直接对象 alert("x" in data);//true ,x 是data 的一个属性 alert( in data);//false , 是data的属性值. var arr = [, , ];//定义了直接数组对象 alert( in arr);//true ,arr 数组的index包括,,, 是他的一个[]属性. alert( in arr)

JavaScript必知必会(三) String .的方法来自何方_javascript技巧

String 我们知道javascript 包括:number,string,boolean,null,undefined 基本类型和Object 类型. 在我的认知中,方法属性应该是对象才可以具有的. var str="hello,world"; var s=str.subString(,);//ell alert(typeof(str)+":"+typeof(s));//string:string 从上面的返回类型来看,str是string 类型的. 再看下面的

JavaScript必知必会(五) eval 的使用_javascript技巧

eval eval(parse) parse :里面跟参数字符串,我们知道执行javascript 会编译执行, 改变全局变量的值: var x = ; //定义的全局变量 alert(x);// var g = eval("x="); //eval 会根据当前上下文解析x alert(x);// 在全局作用域引用eval,改变全局作用域的值,不改变局部作用域的值 var g = eval; //全局引用eval var x = "global";//定义全局变量

经典的20道AJAX面试题(必知必会)

1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是"Asynchronous JavaScript and XML"的缩写.他是指一种创建交互式网页应用的网页开发技术. Ajax包含下列技术: 基于web标准(standards-basedpresentation)XHTML+CSS的表示: 使用 DOM(Document ObjectModel)进行动态显示及交互: 使用 XML 和 XSLT 进行数据交换及相关操作: 使用 XMLH

【web必知必会】—— DOM：四个常用的方法

终于开始复习DOM的知识了,这一阵忙乎论文,基本都没好好看技术的书. 记得去年实习的时候,才开始真正的接触前端,发现原来JS可以使用的如此灵活. 说起DOM就不得不提起javascript的组成了,javascript是由三部分组成的: 1 ECMAScript 2 BOM 3 DOM 最开始,网页是由HTML这种静态的标签语言组成的,后来为了丰富网页,引入了Script脚本语言. 但由于浏览器厂商太多,每个厂商都使用自己的语言,导致script的语言种类繁多,最终由Netscape和sun对S

Python 程序员必知必会的开发者工具

Python已经演化出了一个广泛的生态系统,该生态系统能够让Python程序员的生活变得更加简单,减少他们重复造轮的工作.同样的理念也适用于工具开发者的工作,即便他们开发出的工具并没有出现在最终的程序中.本文将介绍Python程序员必知必会的开发者工具. 对于开发者来说,最实用的帮助莫过于帮助他们编写代码文档了.pydoc模块可以根据源代码中的docstrings为任何可导入模块生成格式良好的文档.Python包含了两个测试框架来自动测试代码以及验证代码的正确性:1)doctest模块,该模块可