登录  /  注册
首页 > web前端 > js教程 > 正文

JS的设计模式之构造函数模式详解

php中世界最好的语言
发布: 2018-03-14 14:07:33
原创
1340人浏览过

这次给大家带来js的设计模式构造函数模式详解,使用js构造函数模式的注意事项有哪些,下面就是实战案例,一起来看一下。

概念 
构造函数用于创建特定类型的对象,我们在里面不仅声明了使用的对象,构造函数还可以接受参数以便于第一次创建的时候设置对象的成员值。你也可以声明自定义类型对象的属性和方法

作用和注意事项 

用于创建特定类型的对象。

第一次声明的时候给对象赋值

可以传参进去,自己声明构造函数,赋予属性和方法

注意事项:

注意new的使用

区分与单例的区别

基本用法 
JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。我们通过使用new操作付,我们可以告诉javascript我们要创建的的一个新的对象并且新对象的成员都是构造函数里定义的。在构造函数里,this指向的是新创建的对象,基本语法如下:

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314
登录后复制

这就是最简单的构造函数的方法,但是我们有没有发现一个问题,我们在继承的时候是不是感觉太麻烦了,所以我们可以通过原型prototype,将ouput方法添加到创建的对象上,来看下面的这一段代码

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112
登录后复制

这样output单实例可以在PersonBir对象实例中共享使用,我们通过给构造函数命名时采用函数名大写来表示,以便于区分普通函数。

强制使用new操作符
对于构造函数new操作符的使用我们来看下面这些代码,我们通过判断this值的instanceof是是不是PersonBir达到强制使用new操作符,以达到目的。

function PersonBir(name, year, month) {
    //核心代码,如果为假,就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name;
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

js设计模式之-单例模式的使用

前端为什么要使用模块化?

CSS的常见兼容性问题解决方案

以上就是JS的设计模式之构造函数模式详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号