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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
jquery图片放大镜效果
Jun 23 jQuery
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 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
php实现httpclient类示例
2014/04/08 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
js自定义事件代码说明
2011/01/31 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
Python实现简单的代理服务器
2015/07/25 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python文件读写代码实例
2019/10/21 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
管理心得体会
2013/12/28 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
Django显示可视化图表的实践
2021/05/10 Python