javascript面向对象编程

最新推荐文章于 2022-02-13 21:47:00 发布

原创最新推荐文章于 2022-02-13 21:47:00 发布 · 805 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面向对象编程

Javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了JavaScript面向对象编程的四种方式：字面量方式定义对象、工厂方法、构造方法及通过原型的方式，并提供了实例代码。此外，还展示了如何通过原型扩展Date类和String类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript面向对象编程的四种方式

1. 字面量方式定义对象

主要应用于属性多的对象。直接创建一个对象。

<script>
            //1. 按照字面量方式 定义对象

            var student = {"sname":"tom","sex":"",
                "getsname":function(){return this.sname},
                "setsex":function(arg){this.sex=arg}
                };
            console.log(student.sname);
            console.log(student.getsname());
            student.setsex("f");
            console.log(student.sex);
</script>

运行结果

2.工厂方法

存在一个工厂，每次调用都可以生成一个对象。

    function getStudent(_sname,_sex)
            {
                var student = new Object();
                student.sname=_sname;
                student.sex=_sex;
                student.getsname=function(){
                    return this.sname;
                }
                student.setsname = function(_sname)
                {
                    this.sname=_sname;
                }
                return student;
            }
            var student = getStudent("hah","aha");
//          student.setsname("jack");
            console.log(student.getsname());

3.构造方法

function Student(_sname,_sex)
            {
                this.sname=_sname;
                this.sex=_sex;
                this.getsname=function()
                {
                    return this.sname;
                }
                this.setsname=function(_sname)
                {
                    this.sname=_sname;
                }
            }
            var student = new Student("this","that");
//          student.setsname("blue");
            console.log(student.getsname());

4.通过原型的方式

function Student(){}
            Student.prototype.sname="tom";
            Student.prototype.sex="m";
            Student.prototype.setsname=function(_sname)
            {
                this.sname=_sname;
            }
            Student.prototype.getsname=function()
            {
                return this.sname;
            }

            var student = new Student();
            student.setsname("yuanxing");

            var student2 = new Student();
            student2.setsname("diergename");
            console.log(student.getsname());
            console.log(student2.getsname());

很多时候需要将 34中方法结合使用，例如

function Student(_sname,_sex)
            {
                this.sname=_sname;
                this.sex=_sex;
                Student.prototype.setsname=function(_sname)
                {
                    this.sname=_sname;
                }
                Student.prototype.getsname=function()
                {
                    return this.sname;
                }
            }
                var student = new Student("hhe","m");
                console.log(student.getsname());
                student.setsname("xixi");
                console.log(student.getsname());

下面是两个练习：
练习1：扩展Date类，添加getday1（dnum），0->星期日，1->星期一

Date.prototype.getDay1 = function(){
                var day = this.getDay();
                switch(day)
                {
                    case 0:return "星期日";
                    case 1:return "星期1";
                    case 2:return "星期2";
                    case 3:return "星期3";
                    case 4:return "星期4";
                    case 5:return "星期5";
                    case 6:return "星期6";
                }
            }
            var now = new Date();
            console.log(now.getDay1());

练习2：扩展string类，trim1（）去字符串前后空格不去中间空格

var str = "   a b c e   ";
            String.prototype.trim1 = function()
            {
                var str = this.toString();
//              while(str.charAt(0)==" ")
//              {
//                  //截掉第一个空格   
//                  str = str.substring(1,str.length);
//              }
//              while(str.charAt(str.length-1)==" ")
//              {
//                  str = str.substr(0,str.length-1);
//              }
//              正则表达式的方法也可以
                str = str.replace(/^\s*|\s*$/g,"");
                return str;
            }
            console.log(str.trim1().length);