理清一下JavaScript面向对象思路

浏览数：22 / 时间：2015年06月08日

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

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/>");

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();//必须使用类名来调用自己的静态方法