JavaScript类的定义以及单例实现

写在前面:
这是一篇菜鸟的学习笔记,记录效果实现过程,而没有考虑安全、兼容、性等问题。供新手参考,也希望前辈们指点。

我遇到的JavaScript问题

  • 全局变量的滥用,命名出现了冲突(比如flag就经常用作全局变量)
  • 只会使用面向过程的写法而没有使用过JavaScript面向对象的机制
  • 遇到了一些需要使用单例模式的场景,而js对单例的实现不会写

首先,先记录JavaScript中的类的定义

这是自己通过网络资料写的一段类定义代码,不知道规范定义是否也如此。那就暂且先记录下来吧,以后遇到更好的在来更新。_
需要注意的是“公布方法”引用类成员需要在前面加"this.",而“私有方法”则需在定义时引入添加参数"_this",然后在方法里面使用该参数进行访问类成员

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSClassDemo</title>
    
    <script type="text/javascript">
        //一个js类
        function Person(){
            this.name = "zji";
            this.sex;
            this.setName = function(name){
                this.name = name;
            }
            this.getName = function(){
                return this.name;
            }
            this.setSex = function(sex){
                this.sex = sex;
            }
            //公布方法,可以随便访问类成员
            this.outdoorCall = function(){
                alert(this.name);
                indoorCall(this);//可以调用私有方法
                alert(this.getName());//可以调用公布方法
            }
            //私有方法,需要传递this才能访问类成员
            var indoorCall = function(_this){
                alert(_this.sex);           
            }
        }
        //使用该类实例
        function mmdShowToast(name,sex){
            var p = new Person();
            p.setName(name);
            p.setSex(sex);
            p.outdoorCall();
            //p.indoorCall();无法访问
        }
        
    </script>
</head>
<body>
    <button id="send" onclick="mmdShowToast('im宇','男')">显示Toast</button>
</body>
</html>

接着,来看看单例模式的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>JSClassDemo</title>
    <script type="text/javascript">
        //一个js类
        function Person(){
            if(Person.instance !== undefined){
                return Person.instance;
            }
            Person.instance = this;
            this.name = "zji";
            this.setName = function(name){
                this.name = name;
            }
            this.getName = function(){
                return this.name;
            }
        }
        //使用该类实例
        function mmdShowToast(name,sex){
            var p = new Person();
            var q = new Person();
            p.setName(name);
            q.setName("q引用把名字改为imyu");
            alert("p的name="+p.getName()+"\nq的name="+q.getName());
        }
        
    </script>
</head>
<body>
    <button id="send" onclick="mmdShowToast('im宇','男')">显示Toast</button>
</body>
</html>

实际上加入单例的代码只是下面的四行:

if(Person.instance !== undefined){
    return Person.instance;
}
Person.instance = this;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,326评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,695评论 19 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 34,840评论 18 399
  • 秋风不知落叶的情。
    如水之情阅读 256评论 2 3
  • 阳光从树叶的缝隙间跳跃下来, 星星点点的撒满你的背影, 我踩着你的脚印笑得像个小孩。 稚嫩的情感和岁月的沧桑, 两...
    陶韵阅读 254评论 0 2

友情链接更多精彩内容