理清一下JavaScript面向对象思路

借这篇文章理清一下自己的思路，同时也希望能给和我同样一知半解的同学理清一下思路。引发思考来自于我犯的一个错误，错误代码是这样的：

1

var o = {

2

...

3

}

4	var obj = new o();

结果不用说，当然是报错的。遗憾的是我以前一直以为var o = { }是定义了一个叫做o的类。然后自己理了一下。得出一下结论：

var o = {}; 等价于 var o = new Object(); 但不等价于 var o = function(){};

第一二种形式 o是一个对象，Object类的对象。第三种形式 o是一个function，更重要的是o是一个类。

1	var o = {};

2	o.oField = "oField";

等价于

1

var o = {

2	oField : "oField"

3

}

那问题是：对象上怎么可以直接定义属性呢？

由于o是Object类的对象，所以o.prototype是undefined 所以不能这样 o.prototype.oField = ...

另外，在思考过程中，我写了两段测试代码，一并贴上。可以算是个笔记吧。

01

//定义类

02	var Engin = function(){};

03

04

//实例属性

05	Engin.prototype.objectField = "objectField";

06

07	//类属性（静态域）

08	Engin.classField = "classField";

09

10

//实例方法

11	Engin.prototype.objectMethod = function(){

12	document.write("objectMethod is called<br/>");

13

}

14	//类方法（静态方法）

15	Engin.classMethod = function(){

16	document.write("classMethod is called<br/>");

17

}

18

19

//调用实例方法

20	new Engin().objectMethod();

21

22

//调用类方法

23	Engin.classMethod();

24

25	document.write(new Engin().objectField + "<br/>");

26	document.write(Engin.classField + "<br/>");

27

28	//只能遍历出类属性和类方法

29	//怎么遍历出实例属性和实例方法呢？

30	document.write("使用for in 遍历Engin对象===============================<br/>");

31	for(var o in Engin){

32	document.write(o+"<br/>");

33

}

34	document.write("=======================================================<br/>");

view source

 

print?

01	//定义父类Parent，并在父类里定义了一个属性pField和一个方法pMethod

02	var Parent = function(){

03	this.pField = "pField";

04	this.pMethod = function(){

05	document.write("pMethod is called<br/>");

06

}

07

};

08	//定义父类静态属性

09	Parent.staticPField = "staticPField";

10	//定义父类静态方法

11	Parent.staticPMethod = function(){

12	document.write("staticPMethod is called<br/>");

13

}

14	//定义子类Child，并在子类里定义了一个属性cField和一个方法cMethod

15	var Child = function(){

16	this.cField = "cField";//实例属性

17	this.cMethod = function(){//实例方法

18	document.write("cMethod is called<br/>");

19

}

20

};

21	//定义子类静态属性

22	Child.staticCField = "staticCField";

23	//定义子类静态方法

24	Child.staticCMethod = function(){

25	document.write("staticCMethod is called<br/>");

26

}

27	//指定Child继承自Parent

28	Child.prototype =  new Parent();

29

30

//创建子类对象

31	var childObj = new Child();

32	document.write(childObj.pField+"<br/>");//子类对象访问父类实例属性

33	//document.write(childObj.staticPField+"<br/>");//子类对象不能访问父类静态属性

34	childObj.pMethod();//子类对象调用父类实例方法

35	//childObj.staticPMethod();//子类对象不能调用父类静态方法

36	document.write(childObj.cField+"<br/>");//子类对象访问自己的实例属性

37	document.write(Child.staticCField+"<br/>");//必须使用类名访问自己的静态属性

38	childObj.cMethod();//子类对象调用自己的实例方法

39	Child.staticCMethod();//必须使用类名来调用自己的静态方法