JavaScript如何面向对象

关于JavaScript编写类的方式，总结一下JavaScript编写类的几种写法以及这几种写法的优缺点。

构造函数方式

基本语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function 类名(){
     this.属性名;//公共属性
     var 属性名;//私有属性
    /*凡是定义类的公共属性和公共方法都要使用this*/
    //定义类的公共函数
    this.函数名=function(){
            ..... 
    }
    //定义类的私有函数
    function 函数名(){
　　　　......
    }
}
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
31
32
33
34
35
36
37
38
39
40
41

/*定义一个Person类*/
    function Person(_name,_age,_salary){
        //Person类的公开属性，类的公开属性的定义方式是：”this.属性名“
        this.name=_name;
        //Person类的私有属性，类的私有属性的定义方式是：”var 属性名“
        var age=_age;//私有属性
        var salary=_salary;//私有属性

        /*定义私有属性Age的对外公开访问方法*/
        this.setAge = function(intAge) {
            age = intAge;
        }
        /*定义私有属性Age的对外公开访问方法*/
        this.getAge = function() {
            return age;
        }

        //定义Person类的公开方法(特权方法)，类的公开方法的定义方式是：”this.functionName=function(){.....}“
        this.Show=function(){
            document.writeln("在公开方法里面访问类的私有属性是允许的，age="+age+"\t"+"salary="+salary);//在公开方法里面访问类的私有属性是允许的
        }
        //公共方法
        this.publicMethod = function(){
            document.writeln("在公开方法里面访问类的私有方法是允许的");
            privateFn();//在公开方法里面调用类的私有方法
            privateFn2();//在公开方法里面调用类的私有方法
        }
        /*
        定义Person类的私有方法(内部方法)，
        类的私有方法的定义方式是：”function functionName(){.....}“，
        或者 var functionName=function(){....}
        */
        function privateFn(){
            document.writeln("我是Person类的私有函数privateFn");
        }

        var privateFn2=function(){
            document.writeln("我是Person类的私有函数privateFn2");
        }
    }

测试Person类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var p1 = new Person("孤傲苍狼",24,2300);
    var p2 = new Person("白虎神皇",24,2300);
    document.write("<pre>");
    document.writeln("p1 instanceof Person的结果是："+(p1 instanceof Person));//p1是Person类的实例，结果是true
    document.writeln("p2 instanceof Person的结果是："+(p2 instanceof Person));//p2是Person类的实例，结果是true
    //当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等
    document.writeln("当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等");
    document.writeln("比较p1和p2这两个对象的show方法的内存地址是否一样：p1.show== p2.show的结果是："+(p1.show == p2.show));//false
    document.writeln("p1.show == p2.show的结果是："+(p1.show == p2.show)+"，这证明p1对象和p2对象不是共享一个show方法，在内存中show方法的代码有2份，存放在两块内存区域");
    document.writeln("name是Person类定义的public属性，可以使用类的对象去直接访问类的public属性");
    document.writeln("p1.name="+p1.name);//访问公有属性，这是可以正常访问的
    document.writeln("age和salary是Person类定义的private属性，不能使用类的对象去直接访问类私有属性，这是访问不了的，结果都是undefined");
    document.writeln("p1.age="+p1.age+"，"+"p1.salary="+p1.salary)//不能使用类的对象去直接访问类私有属性，这是访问不了的，结果都是undefined
    p1.show();//调用类的公共函数，这次允许的
    p1.publicMethod();//调用类的公共函数，这次允许的
    p1.setAge(24);//使用public方法setAge方法为私有属性age赋值
    document.writeln("使用public方法getAge方法获取私有属性age的值，p1.getAge()="+p1.getAge());//使用getAge方法获取私有属性age的值
    //document.writeln("p1.privateFn()："+p1.privateFn()+"&nbsp;p1.privateFn2()："+p1.privateFn2());//不能使用类的对象去调用类的私有方法，这里会报错”对象不支持此属性或者方法
    document.write("</pre>");

这种方式的优点是：可以根据参数来构造不同的对象实例 ，每个对象的属性一般是不相同的，缺点是构造每个实例对象时，方法不能共享，Person类里面定义的那些方法，p1对象有一份，p2也有一份，那么在内存中就得开辟两块内存空间来分别存储p1的方法和p2的方法，这样就造成了内存的浪费。对于一个类的不同实例对象，这些对象的属性一般是不相同的，但是方法是相同的，所以节约内存的做法就是把方法放到内存的一块区域中存放，然后每个实例对象都从这块内存中取出方法。

原型方式

需要说明的是，使用原型方式编写JavaScript类是无法给类添加私有属性和私有方法的，使用原型方式添加的属性和方法都是public的。

  • 写法一

    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

    /*定义一个Person类*/
        function Person(_name,_age,_weight,_height){
           this.init(_name,_age,_weight,_height);
        }

        /*使用原型的方式定义Person类的public属性：name,age,weight,height，使用原型的方式添加的属性都是public的*/
        Person.prototype.name;
        Person.prototype.age;
        Person.prototype.weight;
        Person.prototype.height;
        /*使用原型的方式给Person类添加public方法，使用原型的方式添加的方法都是public的*/
        /*使用原型的方式给Person类添加init方法*/
        Person.prototype.init = function(_name,_age,_weight,_height) {
            if(_name != undefined && _age!=undefined && _weight!=undefined && _height!=undefined){
                this.name = _name;
                this.age = _age;
                this.weight=_weight;
                this.height=_height;
                document.writeln("this.name="+this.name+",this.age="+this.age+",this.weight="+this.weight+",this.height="+this.height);
            }
             
        }
        /*使用原型的方式给Person类添加show方法*/
        Person.prototype.show = function(){
            document.writeln("show method");
        }

    测试

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    document.write("<pre>");
        var p1 = new Person("孤傲苍狼",24,115,160);
        var p2 = new Person("白虎神皇",25,120,170);
        var p3 = new Person();
        p3.init("玄天邪帝",26,130,180);//调用public方法init初始化p3对象
        document.writeln("p1 instanceof Person的结果是："+(p1 instanceof Person));//p1是Person类的实例，结果是true
        document.writeln("p2 instanceof Person的结果是："+(p2 instanceof Person));//p2是Person类的实例，结果是true
        document.writeln("p3 instanceof Person的结果是："+(p3 instanceof Person));//p3是Person类的实例，结果是true
        //当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等
        document.writeln("当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等");
        document.writeln("比较p1和p2这两个对象的show方法的内存地址是否一样：p1.show == p2.show的结果是："+(p1.show == p2.show));//true
        document.writeln("p1.show == p2.show的结果是："+(p1.show == p2.show)+"，这证明p1对象和p2对象共享一个show方法，在内存中show方法的代码只有一份，存放在内存的一块区域");//true
        document.writeln("p1.name="+p1.name+"，p1.age="+p1.age+"，p1.weight="+p1.weight+"，p1.height="+p1.height);//访问公有属性，这是可以正常访问的
        document.writeln("p2.name="+p2.name+"，p2.age="+p2.age+"，p2.weight="+p2.weight+"，p2.height="+p2.height);//访问公有属性，这是可以正常访问的
        p3.name="灭世魔尊";//为公共属性重新赋值
        document.writeln("p3.name="+p3.name);//访问公有属性，这是可以正常访问的
        p1.show();//调用类的公共函数，这次允许的
        document.write("</pre>");

  • 写法二
    使用原型方式给类定义public属性和public方法更加优雅的写法，我个人推荐使用这种方式，这种方式看起来比较舒服

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*定义类Person2*/
    function Person2(){
        
    }

    /*使用原型方式给类定义public属性和public方法更加优雅的写法*/
    Person2.prototype = {
        name:"",//public属性
        age:0,//public属性
        weight:0,//public属性
        height:0,//public属性
        /*public方法*/
        init:function(_name,_age,_weight,_height) {
            this.name = _name;
            this.age = _age;
            this.weight=_weight;
            this.height=_height;
            document.writeln("this.name="+this.name+",this.age="+this.age+",this.weight="+this.weight+",this.height="+this.height);
        },
        /*public方法*/
        show:function(){
            document.writeln("show method");
        }
    };

测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

document.write("<pre>");
    var p2_1 = new Person2();
    var p2_2 = new Person2();
    p2_1.init("孤傲苍狼",24,115,160);
    p2_2.init("白虎神皇",25,120,170);
    document.writeln("p2_1.name="+p2_1.name+"，p2_1.age="+p2_1.age+"，p2_1.weight="+p2_1.weight+"，p2_1.height="+p2_1.height);//访问公有属性，这是可以正常访问的
    document.writeln("p2_2.name="+p2_2.name+"，p2_2.age="+p2_2.age+"，p2_2.weight="+p2_2.weight+"，p2_2.height="+p2_2.height);//访问公有属性，这是可以正常访问的
    document.writeln("p2_1 instanceof Person2的结果是："+(p2_1 instanceof Person2));//p2_1是Person2类的实例，结果是true
    document.writeln("p2_2 instanceof Person2的结果是："+(p2_2 instanceof Person2));//p2_2是Person2类的实例，结果是true
    //当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等
    document.writeln("当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等");
    document.writeln("比较p2_1和p2_2这两个对象的init方法的内存地址是否一样：p2_1.init == p2_2.init的结果是："+(p2_1.init == p2_2.init));//true
    p2_1.name="灭世魔尊";//为公共属性重新赋值
    document.writeln("p2_1.name="+p2_1.name);//访问公有属性，这是可以正常访问的
    p2_1.show();//调用类的公共函数，这次允许的
    document.write("</pre>");

构造函数+原型

　构造函数方式和原型方式都有各自的优缺点，因此可以把这两种方式合并起来，用构造函数方式来定义类的属性(public属性，private属性)，用原型方式来定义类的方法(public方法)。互补不足，这就有了第三种写法。

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*定义一个Person类*/
    function Person(_name,_age,_salary){
        //在Person类内部定义类的public属性和private属性以及private方法
        //Person类的公开属性，类的公开属性的定义方式是：”this.属性名“
        this.name=_name;
        //Person类的私有属性，类的私有属性的定义方式是：”var 属性名“
        var age=_age;//私有属性，只能在类内部使用
        var salary=_salary;//私有属性，只能在类内部使用
        /*
        定义Person类的私有方法(内部方法)，只能在类内部使用
        类的私有方法的定义方式是：”function functionName(){.....}“，
        或者 var functionName=function(){....}
        */
        function privateFn(){
            document.write("<pre>");
            document.writeln("我是Person类的私有属性age，只能在Person类内部使用，初始化后age="+age);
            document.writeln("我是Person类的私有函数privateFn，只能在Person类内部使用");
            document.write("</pre>");
        }

        var privateFn2=function(){
            document.write("<pre>");
            document.writeln("我是Person类的私有属性salary，只能在Person类内部使用，初始化后salary="+salary);
            document.writeln("我是Person类的私有函数privateFn2，只能在Person类内部使用");
            document.write("</pre>");
        }

        privateFn();//在Person类内部调用私有方法
        privateFn2();//在Person类内部调用私有方法
    }

    //使用prototype原型方式定义的方法(public方法)是无法访问类的私有属性和私有方法的
    //使用prototype原型方式定义Person类的方public方法
    Person.prototype={
        setName:function(_name){
            this.name = _name;
            //privateFn();//不能调用Person类定义的私有方法privateFn()，会报错：缺少对象
        },
        getName:function(){
            return this.name;
        },
        show:function(){
            document.writeln("公开方法show");
        },
        //公共方法
        publicMethod:function(){
            document.writeln("公开方法publicMethod");
        }
    };

测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var p1 = new Person("孤傲苍狼",24,2300);
    var p2 = new Person("白虎神皇",25,3000);
    document.write("<pre>");
    document.writeln("p1 instanceof Person的结果是："+(p1 instanceof Person));//p1是Person类的实例，结果是true
    document.writeln("p2 instanceof Person的结果是："+(p2 instanceof Person));//p2是Person类的实例，结果是true
    //当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等
    document.writeln("当==两边的内容是对象或者是对象的函数属性时，则比较内存地址是否相等");
    document.writeln("比较p1和p2这两个对象的show方法的内存地址是否一样：p1.show== p2.show的结果是："+(p1.show == p2.show));//true
    document.writeln("p1.show == p2.show的结果是："+(p1.show == p2.show)+"，这证明p1对象和p2对象共享一个show方法，在内存中show方法的代码有1份，存放在1块内存区域");
    document.writeln("name是Person类定义的public属性，可以使用类的对象去直接访问类的public属性");
    document.writeln("p1.name="+p1.name);//访问公有属性，这是可以正常访问的
    document.writeln("age和salary是Person类定义的private属性，不能使用类的对象去直接访问类私有属性，这是访问不了的，结果都是undefined");
    document.writeln("p1.age="+p1.age+"，"+"p1.salary="+p1.salary)//不能使用类的对象去直接访问类私有属性，这是访问不了的，结果都是undefined
    p1.show();//调用类的公共函数，这次允许的
    p1.publicMethod();//调用类的公共函数，这次允许的
    p1.setName("玄天邪帝");//调用类的公共函数设置为name属性重新赋值
    document.writeln("p1.getName="+p1.getName());
    //document.writeln("p1.privateFn()："+p1.privateFn()+"&nbsp;p1.privateFn2()："+p1.privateFn2());//不能使用类的对象去调用类的私有方法，这里会报错”对象不支持此属性或者方法
    document.write("</pre>");

第三种方式通过前两种方式的结合，算是达到了一个比较理想的写法了，可以通过传参构造对象实例，对象实例都共享同一份方法不造成内存浪费。第三种方式在开发中用得最多，我本人也是采用这种方式来编写JavaScript类。

查看原文

  • 作者: Sam
  • 发布时间: 2019-05-23 23:47:08
  • 最后更新: 2019-12-09 23:03:26
  • 文章链接: https://ydstudios.gitee.io/post/d7445999.html
  • 版权声明: 本网所有文章除特别声明外, 禁止未经授权转载，违者依法追究相关法律责任!