哥被逼得要当全栈工程师，今天练习了下各种对象的创建方式。代码较多参考了https://www.cnblogs.com/ImmortalWang/p/10517091.html

为了方便测试，整合了一个Student的类，包含了各种属性。

myboj.js内容

/**

 * 这是一个关于js的简单测试

 * 一个关于student的基本测试

 * student，具有基本的属性：subject,class,family,和其它基本信息

 * 要实现的动作：

 * 专业：添加课程，删除课程

 * 课程：添加课程，删除课程，上课，考试，成绩统计，成绩打印

 * 家庭：添加，删除，打印家庭成员信息

 *

 * 使用对象人：老师

 */

 /**

  * 工厂模式--工厂模式通过将对象的创建封装到一个方法中，再通过在调用该方法时传入参数而实现对象的实例化，解决了以上提到的产生大量重复代码的问题

  * 但是工厂模式也存在一个不足，就是通过该方法创建的对象的构造函数全都是Object，没有辨识度。

  * 没有办法通过构造函数辨别一个对象到底是Person还是Dog，亦或是Cat。于是乎，为了解决这个问题，就引入了构造函数模式

  */

/**

 * @description 工厂模式结合object 创建对象--家庭成员。严重的问题：不符合，不类似其它高级语言的类定义

 * @param {*} name

 * @param {*} sex

 * @param {*} relation

 */

function createFamily(name,sex,relation){

    let m=new Object();

    m.name=name;

    m.sex=sex;

    m.relation=relation;

    m.toString=function(){

        return "姓名:"+this.name+",性别:"+this.sex+",关系:"+this.relation;

    }

    return m;

}

/**

 * 构造函数模式 -- 遵循大峰驼命名对象

 */

function Subject(name,teachderName, passScore){

    this.name=name;

    this.teachderName=teachderName;

    this.passScore=passScore;

    this.toString=function(){

        return "课程名称:"+this.name+",老师名称:"+this.teachderName+",及格分数线:"+this.passScore;

    }

}

/**

 * 构造函数+原型模式结合

 * 构造函数模式和原型模式结合在一起，继承了它们优点的同时又避免了各自的缺点。

 * 它将具有各自特点的属性和方法定义在构造函数中，将实例间共享的属性和方法定义在prototype上，

 * 成为了在es6出现之前使用最普遍的一种创建对象模式。

 */

function Classes(subject,teacher,studyTime){

    this.subject=subject;

    this.teacher=teacher;

    this.studyTime=studyTime;

}

Classes.prototype={

    constructor:Classes,

    toString:function(){

        return this.teacher+"在"+this.studyTime+" 上 " +this.subject.name;

    }

}

 /**

  * class定义-es6标准

  * 注意内部的不同方法之间，不需要逗号分好隔离，更加类似其余语言的类定义

  */

 class Student{

    // #subjects;

    // #classes;

    // #families;

    constructor(name,sid,sex) {

        this.name=name;

        this.sid=sid;

        this.sex=sex;

        this.subjects=new Array();

        this.classes=new Array();

        this.families=new Array();

    }

    addSubject(subject) {

        this.subjects.push(subject) ;

    }

    addClasses(classes){

        this.classes.push(classes);

    }

    addFamilies(family){

        this.families.push(family);

    }

    print(){

        console.log(this.families.length+":"+this.subjects.length+":"+this.classes.length);

        for(let i=0,len=this.families.length;i<len;i++){

            console.log(this.families[i]);

            console.log(this.families[i].toString());

        }

        for(let i=0,len=this.subjects.length;i<len;i++){

            console.log(this.subjects[i]);

            console.log(this.subjects[i].toString());

        }

        for(let i=0,len=this.classes.length;i<len;i++){

            console.log(this.classes[i]);

            console.log(this.classes[i].toString());

        }

    }

}

objtest.html内容

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

  <input type="button" value="regme" onclick="fn_click()">

</body>

<script type="text/javascript" src="myobj.js"></script>

<script>

   var modelMap={

      match:function(fileName){

        return this.newMatch(fileName);

      },

      newMatch:function(fileName){

         return '11111--'+fileName;

      }

   };

  function fn_click(){

    let str="sd23";

    let nstr=str.search("bsd");

    alert(nstr);

  }

  function test(){

      let student= new Student("luzhifei","103","man");

      let girl=createFamily("lml","girl","女儿");

      student.addFamilies(girl);

      let hanyu=new Subject("汉语","luzhifei",75);

      student.addSubject(hanyu);

      let cls=new Classes(hanyu,"luzhifei","星期一");

      student.addClasses(cls);

      student.print();

  }

</script>

</html>

在控制台运行test(),结果如下：

姓名:lml,性别:girl,关系:女儿

课程名称:汉语,老师名称:luzhifei,及格分数线:75

luzhifei在星期一 上 汉语

总结：

还是用Class的方式好，这是长久以来的习惯！希望老浏览器尽快淘汰吧！

js-对象创建的更多相关文章

  1. JS对象创建的几种方式整理

    ​ 本文主要介绍了JS对象创建的几种方式 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = ...

  2. js 对象创建设计模式

    创建js对象可以使用多种模式,每种模式有着不同的特点:如下: 1.工厂模式:创建一个函数,在函数中实例化一个对象,当每次调用函数时,就实例化一个对象,并返回这个对象: 我们知道,对象是引用形式的,每次 ...

  3. JS对象创建模式

    JS的对象创建模式 1.Object构造函数模式 var person = new Object(); person.name = 'name'; person.age = 43; console.l ...

  4. JS对象创建常用方式及原理分析

    ====此文章是稍早前写的,本次属于文章迁移@2017.06.27==== 前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的 ...

  5. JS对象创建的几种方法

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.n ...

  6. 用js对象创建链表

    //以下是一个链表类 function LinkedList(){ //Node表示要加入列表的项 var Node=function(element){ this.element=element; ...

  7. js学习（六）- js对象创建

    //---------------------js文件--------------------- var namespace02=new Object(); namespace02.Person=fu ...

  8. JS——对象创建

    1.原始创建 <script> person = new Object();//不要var person.firstname = "Bill"; person.last ...

  9. 浅谈Js对象的概念、创建、调用、删除、修改！

    一.我们经常困惑,对象究竟是什么,其实这是一种思维,一种意识上的东西,就像我们都说    世界是有物质组成的道理一样,理解了下面的几句话!对象也不是那么抽象!    1.javascript中的所有事 ...

  10. 在这个看脸的世界，该如何优雅的创建JS对象

    Javascript是一门解释型的语言,是基于对象的,严格来说并不怎么符合的面向对象的标准,显著的特点就是函数就是“一等对象”,与传统的面向对象语言不同的时,Javascript有“一千种”方法来创建 ...

随机推荐

  1. 全网最详细SpringCloud-高级篇

    SpringCloud-高级篇 高级篇包含微服务保护(流量控制,系统保护,熔断降级,服务授权).分布式事务.多级缓存.Redis集群.可靠消息服务 学习安排 技术分类 1.微服务保护 ①初识Senti ...

  2. MacBook M1 虚拟机安装Windows for ARM使用体验

    前言 大家好,我是 刚进入春天还没来得及踏青又开始从早忙到晚的 蛮三刀.去年给大家带来了一篇比较详尽的MacBook M1评测.评测经历了全网的热情转载,成为了我唯一的一篇爆款文章(我该哭还是该笑!) ...

  3. Linux查看文件指定行数内容与查找文件内容

    Linux查看文件指定行数内容 1.tail date.log 输出文件末尾的内容,默认10行 tail -20 date.log 输出最后20行的内容 tail -n -20 date.log 输出 ...

  4. WordPress 整合Bootstrap制作分页代码

    1.整合Bootstrap分页代码 * 因为wordpress默认仅仅提供简单分页, 所以要实现数字分页,需要自定义函数,wordpress可以结合bootstrap制作分页,bootstrap提供了 ...

  5. gRPC入门学习之旅（八）

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) gRPC入门学习之旅(四) gRPC入门学习之旅(五) gRPC入门学习之旅(六) gRPC入门学习之旅(七) 3. ...

  6. ctfshow_web_1(困难题)

    CTFshow web1(困难题) 根据前面做题经验,看见登录框基本都是跑一下爆破,弱口令等等 这里用 dirmap 目录爆破爆出来有一个 www.zip 把他下载下来 看了 login.php 和 ...

  7. C#的关于窗体的类库方案 - 开源研究系列文章

    这次想到了以前编写的关于应用的那个类库,不过当时的只是定义了显示接口,然后调用窗体显示.现在想到要把这个关于窗体的类库进行集合,统一调用,于是就把原来的代码进行了修改完善,终于得到了这次这个例子. 这 ...

  8. pageoffice 5.x升级到pageoffice 6.x的关键步骤

    Vue+Springboot前后端分离项目 将后端Springboot项目中pom.xml文件中对于pageoffice的jar引用升级成6.0版本,以maven中央仓库(https://mvnrep ...

  9. RESTful风格openapi接口设计+openapi远程服务调用

    我们平常开发一般只使用GET.POST方法.而对于HTTP给出的PUT.DELETE等其他方法都没使用.以RESTful风格设计接口就能全部用上这些方法. 按照RESTful理查德森成熟度模型改造接口 ...

  10. 一文了解JVM面试篇（上）

    Java内存区域 1.如何解释 Java 堆空间及 GC? 当通过 Java 命令启动 Java 进程的时候,会为它分配内存.内存的一部分用于创建 堆空间,当程序中创建对象的时候,就从对空间中分配内存 ...