JS 创建对象的模式实例小结


Posted in Javascript onApril 28, 2020

本文实例总结了JS 创建对象的模式。分享给大家供大家参考,具体如下:

1.工厂模式

抽象了创建具体对象的过程,创建了一种函数,封装特定的接口创建对象的细节。

  • 新建一个对象
  • 定义属性和方法
  • return刚新建的对象
function createPerson(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = createPerson("name1", "age1", "job1");
var person2 = createPerson("name2", "age2", "job2");

存在问题:

没有解决对象识别的问题(怎么识别对象的类型)

2.构造函数模式

  • 不显式创建对象
  • 直接将属性和方法定义在this
  • 没有return
  • 通过 new操作符调用
function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayHi = function() {
 console.log(this.name);
 };
}

var person1 = new Person("name1", "age1", "job1");
var person2 = new Person("name2", "age2", "job2");

存在问题:

  • 每个方法都要在实例上创建一次

3.原型模式

创建的每一个函数都有prototype原型属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

所有原生引用类型都在其构造函数的原型上定义了方法

function Person{

}

Person.prototype.name="name"
Person.prototype.age="age"
Person.prototype.job="job"
Person.prototype.sayHi=function(){
 console.log(this.name)
}

var person1=new Person()
var person2=new Person()

存在问题:

  • 所有属性是被很多实例共享的

4.组合构造和原型模式

构造函数用来定义实例属性,原型模式用来定义方法和共享的属性

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
Person.prototype={
 constructor:Person;
 sayHi:function(){
 console.log(this.name)
 }
}

var person1 = new Person("name1", "age1", "job1");

5.动态原型模式

这里对原型的修改,能够对所有实例生效,只在初次调用构造函数会执行

function Person(name,age,job){
 this.name=name;
 this.age=age;
 this.job=job;
 if(typeof this.sayHi !="function" ){
 Person.prototype.sayHi=functong(){
  console.log(this.name)
 }
 }
}

var person1 = new Person("name1", "age1", "job1");

6.寄生构造函数模式

工厂模式+构造函数

  • 返回的对象与构造函数、构造函数的原型属性之间没有关系
  • 不能依赖instanceof来去定对象原型
  • 不建议使用
function Person(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = new Person("name1", "age1", "job1");

7.稳妥构造模式

  • 没有公共属性
  • 不使用this
  • 不使用new
function Person(name, age, job) {
 var obj = new Object();
 // 定义室友变量和函数
 obj.sayHi = function() {
 congsole.log(name);
 };
 return obj;
}

var person1 = Person("name1", "age1", "job1");
// name1

摘抄自《JavaScript 高级程序设计》第六章

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS获取图片lowsrc属性的方法
Apr 01 Javascript
js 求时间差的实现代码
Apr 26 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
js实现复制粘贴的两种方法
Dec 04 Javascript
JavaScript console的使用方法实例分析
Apr 28 #Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 #Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 #Javascript
JavaScript 链表定义与使用方法示例
Apr 28 #Javascript
Vue 3.0 全家桶抢先体验
Apr 28 #Javascript
React生命周期原理与用法踩坑笔记
Apr 28 #Javascript
js最全的数组的降维5种办法(小结)
Apr 28 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python 序列的方法总结
2016/10/18 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
交通事故和解协议书
2014/09/25 职场文书
跑吧孩子观后感
2015/06/10 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技