首页 > 代码库 > 理清一下JavaScript面向对象思路

理清一下JavaScript面向对象思路

2024-08-01 08:15:41   213人阅读

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

1var o = {
2    ...
3}
4var obj = new o();

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

var o = {}; 等价于 var o = new Object(); 但不等价于 var o = function(){};涞水县梁以纸业

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

1var o = {};
2o.oField = "oField";

等价于

1var o = {
2    oField : "oField"
3}

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

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

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

01//定义类
02var Engin = function(){};
03 
04//实例属性
05Engin.prototype.objectField = "objectField";
06 
07//类属性（静态域）
08Engin.classField = "classField";
09 
10//实例方法
11Engin.prototype.objectMethod = function(){
12    document.write("objectMethod is called<br/>");
13}
14//类方法（静态方法）
15Engin.classMethod = function(){
16    document.write("classMethod is called<br/>");
17}
18 
19//调用实例方法
20new Engin().objectMethod();
21 
22//调用类方法
23Engin.classMethod();
24 
25document.write(new Engin().objectField + "<br/>");
26document.write(Engin.classField + "<br/>");
27 
28//只能遍历出类属性和类方法
29//怎么遍历出实例属性和实例方法呢？
30document.write("使用for in 遍历Engin对象===============================<br/>");
31for(var o in Engin){
32    document.write(o+"<br/>");
33}
34document.write("=======================================================<br/>");
view source
 
print?
01//定义父类Parent，并在父类里定义了一个属性pField和一个方法pMethod
02var Parent = function(){
03    this.pField = "pField";
04    this.pMethod = function(){
05        document.write("pMethod is called<br/>");
06    }
07};
08//定义父类静态属性
09Parent.staticPField = "staticPField";
10//定义父类静态方法
11Parent.staticPMethod = function(){
12    document.write("staticPMethod is called<br/>");
13}
14//定义子类Child，并在子类里定义了一个属性cField和一个方法cMethod
15var Child = function(){
16    this.cField = "cField";//实例属性
17    this.cMethod = function(){//实例方法
18        document.write("cMethod is called<br/>");
19    }
20};
21//定义子类静态属性
22Child.staticCField = "staticCField";
23//定义子类静态方法
24Child.staticCMethod = function(){
25    document.write("staticCMethod is called<br/>");
26}
27//指定Child继承自Parent
28Child.prototype =  new Parent();
29 
30//创建子类对象
31var childObj = new Child();
32document.write(childObj.pField+"<br/>");//子类对象访问父类实例属性
33//document.write(childObj.staticPField+"<br/>");//子类对象不能访问父类静态属性
34childObj.pMethod();//子类对象调用父类实例方法
35//childObj.staticPMethod();//子类对象不能调用父类静态方法
36document.write(childObj.cField+"<br/>");//子类对象访问自己的实例属性
37document.write(Child.staticCField+"<br/>");//必须使用类名访问自己的静态属性
38childObj.cMethod();//子类对象调用自己的实例方法
39Child.staticCMethod();//必须使用类名来调用自己的静态方法

理清一下JavaScript面向对象思路


联系
我们